Question

我使用Velocity.js进行动画制作。

我首先翻译和旋转一个物体。动画完成后，我需要将对象再旋转360度。

问题是在第二个动画期间旋转轴关闭。物体围绕其原始点旋转，而不是围绕中心旋转。

$.Velocity( obj, "stop" );
$.Velocity( obj,
              {translateX: pos, rotateZ: rotation + 'deg'},
              {duration: 1000, complete: function() {
                  $.Velocity( obj, {rotateZ: "360deg"}, {duration: 1000} ); }
             });

可能是什么问题？

更新

演示此问题的Codepen：http://codepen.io/anon/pen/MYZaaj

Answer 1

这是因为Velocity目前不解析初始transform值。来自文档：

请注意，Velocity的性能优化具有忽略转换值的外部更改的副产品（包括样式表中定义的初始值，但这可以通过强制馈送来补救）。（您可以使用Hook功能在Velocity中手动设置变换值。）

这将在未来的版本中解决，但目前遵循以下建议使用强制馈送来修复它。

Answer 2

对不起，我没有足够的评论，但钩子（另一个答案是对的）。只需添加$ .Velocity.hook（circle，“translateY”，“0”）;

var circle = $(".circle");

circle.velocity({
  translateX: 500,
  rotateZ: 360
}, {
  duration: 2500
}).delay(500).velocity({
  rotateZ: -360 * 2,
  translateY: 200
}, {
  duration: 2500
});
$.Velocity.hook(circle, "translateY", "0");

circle.delay(500)
  .velocity({
    translateY: 0,
    rotateZ: -360 * 5
  }, {
    duration: 2500
  });

.circle {
  background: url("https://dl.dropboxusercontent.com/u/16997159/square.png");
  width: 128px;
  height: 128px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.2/velocity.min.js"></script>

<div class="circle">
</div>

翻译后JavaScript旋转错误

2 个答案: