Javascript 如何创建有效的无限循环挥动文本动画？

这就是我试图创建的效果（）：

如果用户在选项卡上花不到几秒钟的时间没有聚焦，动画看起来又像第二个GIF，我看不出有什么办法可以避免。我尝试过使用

requestAnimationFrame（）

，但我不知道如何使其正确运行

因此，我的问题是：如何防止选项卡未聚焦影响动画？

---

如果你能帮我在手机上更高效的话，我会给你加分。

我不确定这是否能解决你的口吃问题。这个策略在概念上与您正在做的类似，但是使用CSS动画而不是js

（函数（）{
var el=document.queryselectoral（“.wavey”）[0]；
var oldText=el.innerText
var newHtml=“”；
对于（el.innerText中的变量i）{newHtml+=（“”+oldText[i]+“”）；}
el.innerHTML=newHtml；
})();
@关键帧波浪{
来自{transform:translateY（0）；}
到{transform:translateY（-1em）；}
}
h1.wavey{边缘顶部：2em；}
波跨{
显示：内联块；
动画持续时间：1s；
动画名称：wave；
动画迭代次数：无限；
动画方向：交替；
动画计时功能：轻松进出；
}
Hello World
你说的“加分”是什么意思？简单地使用gif效果如何？Ceylamunkucabaş只是一个笑话；没有任何“要点”，但我希望有人能回答这个子问题，尽管这不是必需的。@JonSG GIF是用代码制作的，但我假设你知道这一点，我想知道为什么我自己不用GIF格式制作动画。最大的原因是，我只想学习如何用代码实现这种效果，但我也想避开页面上的许多图像。@Xatenev谢谢！在发布这篇文章之前，我处于“危险地带”，听到这句话真是太好了：]这太完美了，非常感谢！我很可能会用这个；但是，有没有办法让它更“浮动”而不是“反弹”呢？您可以在h1.wavey span css中添加一个放松功能，例如动画计时功能：放松输入输出；我会用它更新我的答案！哈哈，你也获得了那些积分。干得好！
$('.header h1 span').each(function() { // each letter is contained inside a <span> element
    var that = $(this);
    setTimeout(function() {
        that.animate({
                top: "-10px"
            }, animateTime / 2)
            .animate({
                top: "10px"
            }, animateTime / 2);
    }, that.index() * 100);
});

var running = true;

document.addEventListener('visibilitychange', function(){
    console.log("Running:" + running);
    running = !document.hidden;
    if(!running) clearQueues();
})