javascript - 翻译后JavaScript旋转错误

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 的性能优化的副产品是忽略对转换值的外部更改（包括样式表中定义的初始值，但这可以通过 Forcefeeding 进行补救）。（您可以使用 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>