使用velocity.js实现循环动画

Question

我正在尝试用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();

Answer 1

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

删除这一行将消除Chrome for Android的初始延迟：

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

start();

你可以看到一个实时版本的here。

Answer 2

如果有人再看这里，请写下答案。现在在中有一个通过设置loop: true来循环的选项，或者设置为一个整数来循环多次，例如

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

start();