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

2019年7月28日 241次阅读

这是我试图创建的效果(
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);
});

结果：

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

它似乎很成功.但是,在切换标签后,我遇到了这样的问题,然后又回来了：

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

在上面的小提琴中,我试图通过在选项卡未聚焦时停止动画来“修复”这个问题.这比我没有检查标签无焦点时更好,但它仍然有问题.这是我用来做的代码：

var running = true;

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

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

所以,我的问题是：如何防止动画受到未聚焦选项卡的影响？

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

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

(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;
  
})();
@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;
}
<h1 class="wavey">Hello World</h1>
点赞