圆形路径中的位图旋转CreateJS Tweenjs
Bitmap rotation in circular path CreateJS Tweenjs
我试图在圆形路径中旋转一只鸟,但问题是 to 方法并没有提供太多控制来做确切的事情,我正在尝试随着旋转上下移动鸟头。
这是我的 fiddle
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)
我想将它旋转一圈,如有帮助将不胜感激。
谢谢
旋转在你的例子中似乎工作正常,但你正在围绕菱形(具有直线路径)补间鸟,所以它看起来很奇怪。
获得所需效果的一种简单方法是使用 regX
和 regY
偏移鸟的中心点,然后旋转它。如果你想象这只鸟是从一张纸上剪下来的,这就像在它的中心附上一根指向下方的棍子,然后用棍子旋转它。请在此处查看示例:
http://jsfiddle.net/HF765/143/
另一种选择是查看 TweenJS 的 MotionGuidePlugin
。它使用起来更复杂,但提供了很多控制,包括让目标沿路径旋转的能力。
http://www.createjs.com/Docs/TweenJS/classes/MotionGuidePlugin.html
我试图在圆形路径中旋转一只鸟,但问题是 to 方法并没有提供太多控制来做确切的事情,我正在尝试随着旋转上下移动鸟头。
这是我的 fiddle 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)
我想将它旋转一圈,如有帮助将不胜感激。
谢谢
旋转在你的例子中似乎工作正常,但你正在围绕菱形(具有直线路径)补间鸟,所以它看起来很奇怪。
获得所需效果的一种简单方法是使用 regX
和 regY
偏移鸟的中心点,然后旋转它。如果你想象这只鸟是从一张纸上剪下来的,这就像在它的中心附上一根指向下方的棍子,然后用棍子旋转它。请在此处查看示例:
http://jsfiddle.net/HF765/143/
另一种选择是查看 TweenJS 的 MotionGuidePlugin
。它使用起来更复杂,但提供了很多控制,包括让目标沿路径旋转的能力。
http://www.createjs.com/Docs/TweenJS/classes/MotionGuidePlugin.html