我正在使用 Velocity.js 制作动画。
移动 SVG 图像同时围绕中心旋转的正确方法是什么？
问问题
4725 次
2 回答
0
如果您可以使用旋转和线性运动的组合定义运动，则无需执行每帧动画。
结果表明，您的问题是您无法完全管理旋转的起源。
注意：以下内容不仅适用于速度，而且适用于一般的所有 css 转换。
旋转原点是要旋转的项目的左上角
现在，如果您想在不移动原点的情况下移动对象，可以使用translateX, translateY属性。例如
.velocity({ translateX: "+=200", translateY: "25%"})
为了移动对象以及原点，您需要设置或移动其x and y位置参数。例如
.velocity({ x: "+=200", y: "25%" })
绕中心旋转
例如，如果要在其中心旋转对象，则需要
- 通过 -w/2 和 -h/2 平移对象，其中宽度和高度分别为 w 和 h。
- 旋转对象
围绕外点旋转
如果您需要围绕某个项目旋转对象，只需先将对象从其原点平移一段合适的距离，然后再旋转它。
此笔显示了两个示例，其中绿色矩形围绕其中心旋转，蓝色矩形通过正确组合平移和位置围绕外部点旋转。
于 2015-03-19T07:02:28.917 回答
0
Velocity.js 使用 CSS 变换来进行旋转。因此，您实际上需要做的就是transform-origin: center;在 CSS 中进行设置。这改变了所有动作发生的点。
尝试匹配旋转运动并相应地移动 X 和 Y 将是一个较慢的动画并且更容易出现错误。
更多信息transform-origin可以在这里找到。
于 2017-07-27T20:24:35.730 回答