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} ); }
             });

可能是什么问题？

更新

演示该问题的代码笔：http://codepen.io/anon/pen/MYZaaj

Answer 1

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

Note that Velocity's performance optimizations have the byproduct of ignoring outside changes to transform values (including initial values as defined in your stylesheets, but this is remedied via Forcefeeding). (You can manually set transform values within Velocity by using the Hook function.)

这将在未来的版本中解决，但目前按照以下建议使用强制进纸来修复它。

Answer 2

对不起，我没有足够的积分来发表评论，但是hook（另一个答案是正确的）。只需添加 $.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 翻译后旋转错误

JavaScript rotation is wrong after translating

javascript

jquery

velocity.js