JavaScript旋转在平移后是错误的
JavaScript旋转在平移后是错误的
提问于 2015-03-17 11:54:22
我用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
回答 2
Stack Overflow用户
回答已采纳
发布于 2015-03-19 08:10:36
对不起，我没有足够的意见，但是钩子(另一个答案是对的)。只需添加$.Velocity.hook(圆圈，"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>
Stack Overflow用户
发布于 2015-03-17 20:54:39
这是因为速成目前不解析初始transform值。从医生那里：
请注意，流速的性能优化有一个副产品，即忽略对转换值的外部更改(包括样式表中定义的初始值，但这是通过强制喂入来补救的)。(您可以使用Hook函数手动设置速成内的转换值。)
这将在未来的版本中解决，但目前遵循下面的建议，使用强制喂养来修复它。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/29098425
复制相关文章
相似问题
腾讯云开发者
