JavaScript动画在几个循环后滞后

JavaScript animation lag after several loops

本文关键字：几个 循环 滞后 动画 JavaScript      更新时间：2023-09-26

我正在使用velocity.js.为一个项目制作这些虚线（SVG）的动画

然而，在几个循环之后，动画开始滞后很多。

我已经在下面的代码笔中粘贴了我的动画链接。

http://codepen.io/aofaoin/pen/pbLvAb?editors=0110

for (i = 1; i <= 69; i++) {
    $("#gold2 .cls-" + i)
      .velocity("fadeOut", {
        delay: g2,
        duration: 800,
      })
      .velocity("fadeIn", {
        delay: 15,
        duration: 800,
      })
    g2 += 80;
  }

我不能使用loop:true，因为我想编排动画。

如果有人能告诉我如何在几个循环后阻止动画滞后，那就太好了。非常感谢。

查看您的代码，我建议将velocity操作封装在setTimeout(function() { ... }, 0)中。这将防止浏览器冻结，因为你试图做大量的同步操作

  for (i = 1; i <= 69; i++) {
    setTimeout(function() {
      $("#gold2 .cls-" + i)
        .velocity("fadeOut", {
          delay: g2,
          duration: 800,
        })
        .velocity("fadeIn", {
          delay: 15,
          duration: 800,
        });
       g2 += 80;
     }, 0);
  }

如果需要使用延迟来制作动画，请在setTimeout中添加专用延迟。

相关文章：