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

Question

这是我尝试创建的效果（JSFiddle）：

$('.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();
})

如果用户从标签中花费的时间不到几秒钟，那么动画看起来就像是第二个GIF，我没有办法避免这种情况。我尝试过使用requestAnimationFrame()，但我无法弄清楚如何使其正常运行。

所以，我的问题是：如何阻止动画受到未聚焦标签的影响？

奖励积分（比喻）如果你能帮我在移动设备上提高效率的话。

Answer 1

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

＆＃13;

＆＃13;

(function(){
  
  var el = document.querySelectorAll(".wavey")[0];
  var oldText = el.innerText
  var newHtml = "";
  for (var i in el.innerText) { newHtml += ("<span style='animation-delay: " + i/10 + "s;'>" + oldText[i] + "</span>"); }
  el.innerHTML = newHtml;
  
})();

＆＃13;

@keyframes wave {
  from { transform: translateY(0); }
  to { transform: translateY(-1em); }
}

h1.wavey { margin-top: 2em; }

h1.wavey span {
  display: inline-block;
  animation-duration: 1s;
  animation-name: wave;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: ease-in-out;
}

＆＃13;

<h1 class="wavey">Hello World</h1>

＆＃13;

＆＃13;

＆＃13;