Velocity.js -围绕中心旋转

Question

我用Velocity.js制作动画。

什么是正确的方式移动一个SVG图像，同时围绕中心旋转呢？

Answer 1

你不需要做每帧动画，如果你可以定义运动使用旋转和线性运动组合。

结果，你的问题是你不能完全管理旋转的起源。

注意：：以下内容不仅适用于速度，而且适用于所有的css转换。

旋转的原点是要旋转的项的左上角。

现在，如果您想在不移动原点的情况下移动对象，则可以使用translateX, translateY属性。例如

.velocity({ translateX: "+=200", translateY: "25%"})

为了移动对象和原点，您需要设置或移动它的x and y位置参数。例如

.velocity({ x: "+=200", y: "25%" })

围绕中心旋转

举个例子，如果你想旋转一个物体的中心，你需要

• 将对象转换为-w/2和- h /2，其中宽度和高度为w和h。
• 旋转物体

围绕外部点旋转

如果您需要围绕项目旋转对象，只需先将对象以适当的距离从原点移开，然后旋转即可。

这个钢笔展示了两个例子，绿色矩形围绕其中心旋转，蓝色矩形通过正确的平移和位置组合围绕外部点旋转。

Answer 2

Velocity.js使用CSS转换来完成它的旋转。因此，您真正需要做的就是在CSS中设置transform-origin: center;。这改变了所有动作发生的点。

试图匹配旋转运动，并相应地移动您的X和Y将是一个较慢的动画和更容易出错。

有关transform-origin的更多信息可以找到这里。