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。
• 旋转对象

围绕外部点旋转

如果您需要围绕某个项目旋转对象，只需先将对象远离其原点移动一段合适的距离，然后再旋转它。

这个PEN显示了绿色矩形围绕其中心旋转的示例，以及通过正确组合平移和位置而围绕外部点的蓝色矩形。

Answer 2

Velocity.js使用CSS变换来进行旋转。因此，您实际需要做的就是在CSS中设置transform-origin: center;。这改变了所有行动将要发生的点。

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

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