以速度循环/重新启动动画而不反向播放

【问题标题】：Loop/Restart Animation with Velocity without Playing in Reverse以速度循环/重新启动动画而不反向播放
【发布时间】：2017-02-08 05:42:59
【问题描述】：

我正在使用 Velocity 在屏幕上平移一个元素。完成后，我希望元素返回其原点并循环动画，绕过循环时发生的默认反向效果。

我有我的标准动画函数，我将我的值传递到其中：

$(element).delay(initialDelay).velocity(animationValues, {duration: duration, easing: easing, loop: loop, complete: function() {
   callback();
}});

有没有一种方法可以通过翻译元素而不是仅仅旋转它来实现此功能？

【问题讨论】：

标签： jquery animation velocity.js

【解决方案1】：

确保在动画函数中初始化位置 - 请参见下面的示例：

$(document).ready(function(){

  var el = $('#target');
  
  function anim() {
    el.velocity({ 'left': 0   }, 0 )
      .velocity({ 'left': 300 }, { duration: 2000, complete: anim });
  };

  anim();

});

#target {
  background: #999; width: 100px; height: 100px; position: absolute;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.jsdelivr.net/velocity/1.4.2/velocity.min.js"></script>
<div id="target"></div>

【讨论】：