使用Velocity循环/重新启动动画而不用反向播放

时间:2015-06-24 21:00:28

标签: jquery animation velocity.js

我正在使用Velocity在屏幕上翻译元素。完成后,我希望元素返回其原点并循环动画,绕过循环时出现的默认反向效果。

我有我的标准动画功能,我传递了我的值:

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

有没有办法通过翻译元素来实现这个功能,而不是只旋转它?

1 个答案:

答案 0 :(得分: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>