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

时间:2015-02-03 14:31:44

标签: javascript html5-canvas createjs

我正在尝试在圆形路径中旋转一只鸟,但问题是方法无法控制到确切的事情,我试图将鸟头向上移动或者随着轮换而下来。

这是我的小提琴 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)

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

由于

1 个答案:

答案 0 :(得分:3)

旋转似乎在你的例子中正常工作,但你是在钻石形状周围补充鸟(用直线路径),所以它看起来很奇怪。

获得所需效果的一种简单方法是使用regXregY来偏移鸟的中心点,然后旋转它。如果你想象这只鸟是从一张纸上切下来的,这就像是从它的中心向下安装一根棍子并用棍子旋转它。请看这里的例子:

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

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

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