Velocity.js - 围绕中心旋转
Velocity.js - rotation around center
我正在使用 Velocity.js 制作动画。
移动 SVG 图像同时绕中心旋转的正确方法是什么?
如果可以使用旋转和线性运动的组合来定义运动,则不需要每帧动画。
结果表明,您的问题是您无法完全管理旋转原点。
注意 :以下内容不仅适用于速度,而且通常适用于所有 css 转换。
旋转的原点是要旋转的项目的左上角
现在,如果您想移动对象而不移动原点,您可以使用translateX, translateY
属性。例如
.velocity({ translateX: "+=200", translateY: "25%"})
为了移动对象以及原点,您需要设置或移动它的x and y
位置参数。例如
.velocity({ x: "+=200", y: "25%" })
绕中心旋转
举个例子,如果你想旋转一个物体在它的中心,你需要
- 通过 -w/2 和 -h/2 转换对象,其中宽度和高度为 w 和 h。
- 旋转对象
围绕外部点旋转
如果您需要围绕项目旋转对象,只需先将对象从其原点平移适当的距离,然后再旋转它。
此 PEN 显示了两个示例,其中绿色矩形围绕其中心旋转,蓝色矩形通过正确组合平移和位置围绕外部点旋转。
Velocity.js 使用 CSS 转换来进行旋转。因此,您真正需要做的就是在 CSS 中设置 transform-origin: center;
。这改变了所有动作发生的点。
尝试匹配旋转运动并相应地移动 X 和 Y 将是一个较慢的动画并且更容易出现错误。
可以找到有关 transform-origin
的更多信息 here。
我正在使用 Velocity.js 制作动画。
移动 SVG 图像同时绕中心旋转的正确方法是什么?
如果可以使用旋转和线性运动的组合来定义运动,则不需要每帧动画。
结果表明,您的问题是您无法完全管理旋转原点。
注意 :以下内容不仅适用于速度,而且通常适用于所有 css 转换。
旋转的原点是要旋转的项目的左上角
现在,如果您想移动对象而不移动原点,您可以使用translateX, translateY
属性。例如
.velocity({ translateX: "+=200", translateY: "25%"})
为了移动对象以及原点,您需要设置或移动它的x and y
位置参数。例如
.velocity({ x: "+=200", y: "25%" })
绕中心旋转
举个例子,如果你想旋转一个物体在它的中心,你需要
- 通过 -w/2 和 -h/2 转换对象,其中宽度和高度为 w 和 h。
- 旋转对象
围绕外部点旋转
如果您需要围绕项目旋转对象,只需先将对象从其原点平移适当的距离,然后再旋转它。
此 PEN 显示了两个示例,其中绿色矩形围绕其中心旋转,蓝色矩形通过正确组合平移和位置围绕外部点旋转。
Velocity.js 使用 CSS 转换来进行旋转。因此,您真正需要做的就是在 CSS 中设置 transform-origin: center;
。这改变了所有动作发生的点。
尝试匹配旋转运动并相应地移动 X 和 Y 将是一个较慢的动画并且更容易出现错误。
可以找到有关 transform-origin
的更多信息 here。