Search code examples
javascripthtml5-canvascreatejs

Bitmap rotation in circular path CreateJS Tweenjs

I'm trying to rotate a bird in circular path but the problem is the to method doesn't give much control to do the exact thing, I 'm trying to move the bird head up or down with the rotation.

Here is my 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)

I want to rotate it in a circle, any help will be greatly appreciated.

Thanks

Solution

  • The rotation seems to be working correctly in your example, but you are tweening the bird around a diamond shape (with straight paths), so it looks weird.

    One easy way to get the effect you're looking for is to offset the bird's center point using regX and regY, and then rotate it. If you imagine the bird was cut out of a piece of paper, this is like attaching a stick pointing down from the center of it and rotating it using the stick. See an example here:

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

    Another option is to look at the MotionGuidePlugin for TweenJS. It's more complicated to work with, but offers a lot of control, including the ability to have the target rotate along the path.

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