使用velocity.js循环动画

Loop animation with velocity.js

本文关键字：动画 循环 js velocity 使用      更新时间：2023-09-26

我正试图用velocity.js做那种循环动画：将X轴上的对象从0平移到473，然后从0平移至473，依此类推

我已经成功地做到了这一点（代码如下），但在Android Chrome和iOS Chrome浏览器上，循环会有一些延迟（滞后）。有人能帮忙吗？

function start() {
  $(".el").velocity(
    { 
      translateX: [ -473, 0 ]
    },
    { 
      duration: 8000,
      delay: 0,
      easing: "linear",
      complete: reset
    });
}
function reset() {
    $(".el").css("transform", "translate(0px, 0px)");
    start();
}
start();

由于使用强制馈送，.css()调用是多余的。

删除这一行可以消除Android版Chrome的初始滞后：

$el = $(".el");
function start() {
  $el.velocity(
    { 
      translateX: [ -473, 0 ]
    },
    { 
      duration: 8000,
      delay: 0,
      easing: "linear",
      complete: start
    });
}
start();

你可以在这里看到实时版本。

如果有人再看这里，就写一个答案。现在，Velocity 1.2.0中有一个选项可以通过设置loop: true进行循环，也可以设置为整数进行多次循环，例如

$el = $(".el");
function start() {
  $el.velocity(
    { 
      translateX: [ -473, 0 ]
    },
    { 
      duration: 8000,
      delay: 0,
      easing: "linear",
      loop: true
    });
}
start();
相关文章：