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

1 Answer 1

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