javascript - 使用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();

你可以在这里看到一个现场版本。

Answer 2

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

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

start();