Easeljs中的Tween rotation：控制旋转方向

Question

我在舞台上有一些形状。其中一些我想补间顺时针旋转，一些逆时针旋转。

Easel.js 中对象的旋转属性从 0 到 360（我认为）。所以...如果我想补间对象逆时针旋转从 45 度到 -45 度...90 度的变化...我该怎么做？

提前致谢。罗杰.

Answer 1

通常，TweenJS 补间旋转与任何其他数字相同： * 如果你从 45 到 -45，它会逆时针旋转 * 如果你从45到300，它会顺时针旋转

您可以在 CDN (0.6.2) 中使用带有最新标记版本 TweenJS 的 SmartRotation 插件来确保它旋转 "shortest" 距离，因此在上面的第二个示例中，它会旋转反-顺时针方向。您可以在 "plugins" 目录中找到它。

但是，更好的选择是使用最新的 TweenJS NEXT 版本（尚未在 CDN 上发布），您可以在其中使用 RotationPlugin（在 src/tweenjs/plugins 中），它具有相同的 "shortest distance" 与旧的 SmartRotation 插件一样的行为，而且还能够设置每个 to() 调用的旋转方向：

myTween.get(foo)
    .to({rotation:30, rotationDir:-1})
    .to({rotation:60})
    .to({rotation:10, rotationDir:1});

RotationPlugin 自动处理 rotation，以及 rotationX、rotationY 和 rotationZ 属性。

Easeljs中的Tween rotation：控制旋转方向

Tween rotation in Easeljs: Control direction of rotation

rotation

easeljs

tween