使用velocity.js 循环动画答案

【问题标题】：Loop animation with velocity.js使用velocity.js 循环动画
【发布时间】：2021-03-22 00:05:38
【问题描述】：

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

【问题讨论】：

标签： javascript android ios velocity.js

【解决方案1】：

由于您使用强制喂食，.css() 调用是多余的。

删除该行将消除 Chrome for Android 上的初始滞后：

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

start();

你可以看到一个现场版本here。

【讨论】：

感谢您的回答。事实上.css() 电话是没有必要的。然而，Chrome iOS 和 Safari iOS 仍然存在滞后。还没测试过安卓。使用代表滞后的动画更新了实时版本：jsfiddle.net/3eeLo819/6
您的 fiddle 在 Android Chrome 上不起作用，您需要删除 float 并设置 display: inline-block，参见 here。这在 Android 上效果很好
还有一个问题，不使用“强制喂食”技术可以做同样的动画吗？
目前没有，文档中也提到了。但我知道 Julian 正在努力为此提供支持，或者至少正在计划这样做。 2015 年之前应该会有另一个版本可能包含该功能。
不确定您的情况是否有同样的问题。我已经更新了演示：jsfiddle.net/3eeLo819/15 通过从 web 视图中删除滚动更改和隐藏内容溢出，我认为这应该可以解决您在 iOS 上的问题。

【解决方案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();

【讨论】：