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

Posted 2021-04-17

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

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

提前致谢。罗杰。

答案

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

您可以将SmartRotation插件与CDN（0.6.2）中最新标记的TweenJS版本一起使用，以确保它旋转“最短”距离，因此在上面的第二个示例中，它将逆时针旋转。您可以在“plugins”目录中找到它。

但是，更好的选择是使用最新的TweenJS NEXT版本（尚未在CDN上发布），您可以在其中使用RotationPlugin（在src / tweenjs / plugins中），它具有与旧版本相同的“最短距离”行为SmartRotation插件，还能够根据to()调用设置旋转方向：

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

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