圆形路径中的位图旋转 CreateJS Tweenjs

【问题标题】：Bitmap rotation in circular path CreateJS Tweenjs圆形路径中的位图旋转 CreateJS Tweenjs
【发布时间】：2015-04-02 19:05:02
【问题描述】：

我正在尝试以圆形路径旋转鸟，但问题是 to 方法并没有提供太多控制来执行确切的操作，我正在尝试将鸟头向上移动或向下旋转。

这是我的小提琴 http://jsfiddle.net/HF765/142/

 var tween = createjs.Tween.get(shape, {loop: true})
    .to({x: 100 , y: 100, rotation: 0}, 0)
    .to({x: 200 , y: 200, rotation: 90}, 2000)
    .to({x: 100 , y: 300, rotation: 180}, 2000)
    .to({x: 0 , y: 200, rotation: 270}, 2000)
    .to({x: 100 , y: 100, rotation: 360}, 2000)

我想把它旋转一圈，任何帮助将不胜感激。

谢谢

【问题讨论】：

标签： javascript html5-canvas createjs

【解决方案1】：

在您的示例中，旋转似乎正常工作，但是您正在将鸟儿围绕菱形（直线路径）进行补间，因此看起来很奇怪。

获得所需效果的一种简单方法是使用regX 和regY 偏移小鸟的中心点，然后旋转它。如果你想象这只鸟是从一张纸上剪下来的，这就像在它的中心连接一根指向下方的棍子，然后用棍子旋转它。在此处查看示例：

http://jsfiddle.net/HF765/143/

另一种选择是查看 TweenJS 的 MotionGuidePlugin。使用起来更复杂，但提供了很多控制，包括让目标沿着路径旋转的能力。

http://www.createjs.com/Docs/TweenJS/classes/MotionGuidePlugin.html

【讨论】：