i'm trying to design a simple animation with TweenJs.. Lets consider two people playing throwing ball. I've managed to move the ball in a linear path. But it has to seem realistic. Ball should follow a curvy path like there is gravity.. How can i define "checkpoints" in the path? Or should i change my tactic to achive that goal? Thanks in advance..

i'm trying to design a simple animation with TweenJs.. Lets consider two people playing throwing ball. I've managed to move the ball in a linear path. But it has to seem realistic. Ball should follow a curvy path like there is gravity.. How can i define "checkpoints" in the path? Or should i change my tactic to achive that goal? Thanks in advance..

• javascript
• animation
• tween

Share Improve this question Follow asked Mar 11, 2013 at 13:33 DonkeyKongDonkeyKong 81811 gold badge1010 silver badges2424 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

The recently released TweenJS (Version 0.4.0, Feb 12, 2013) contains a MotionGuidePlugin. The usage is pretty simple:

// Using a Motion Guide
createjs.Tween.get(target).to({guide:{ path:[0,0, 0,200,200,200, 200,0,0,0] }},7000);
// Visualizing the line
graphics.moveTo(0,0).curveTo(0,200,200,200).curveTo(200,0,0,0);

Here is a quick fiddle: http://jsfiddle/lannymcnie/qEYD4/1/

More info in the docs. http://www.createjs./Docs/TweenJS/classes/MotionGuidePlugin.html