 TweenJS: Animate, Tween & Sequence in JavascriptPosted on March 21, 2011 by Grant SkinnerThere were a lot of requests for tweening support in EaselJS, so to address this I thought I’d try writing a companion tweening library. I started in on this a couple days ago, and just posted the very early results to a new GitHub repo. This is very much pre-alpha, untested, undocumented, and subject to change, but I thought I’d share it and solicit feedback. It has a simple but powerful API that uses chained method calls to create complex tweens (similar to Graphics in EaselJS). For example, the following code will create a new tween instance that tweens the target’s x value to 300 for 400ms, waits 500 ms, then tweens the target’s alpha to 0 over 1s, sets its visible to false, and calls the onComplete function. var myTween = Tween.get(myTarget).to({x:300},400).wait(500).to({alpha:0},1000).set({visible:false}).call(onComplete); You can also use it to sequence commands, without tweening at all: var mySeq = Tween.get(target).call(doStuff,[param]).wait(500).set({prop:value}).set({prop:value},foo).call(allDone); Let me know what you think. We’re still considering whether it should live completely on its own, or be a part of EaselJS. Right now it has no dependencies on EaselJS, but it will use the same Ticker class if available. It should work to tween / sequence just about anything in Javascript, but so far I’ve only tested it with EaselJS and HTML5 canvas. You can check out an example of TweenJS in action here. Have a look at the source code to get a better sense of how things work. You can grab the library from the TweenJS GitHub Repo.
Follow @gskinner on Twitter for more news and views on interactive media.
|
|
|
10 Comments
Just loved the API. Really simple and nice/easy to see.
I'll do some tests with TweenJS for sure!
Thanks.
Posted by: Rafael Rinaldi on Mar 21, 2011 10:12am URL: http://www.rafaelrinaldi.com
Looks good and could eventually be advertised on EaselJS website.
Please keep it standalone but pluggable in EaselJS.
Posted by: Philippe on Mar 21, 2011 10:16am
I quite like Raphael's tweening API:
http://raphaeljs.com/reference.html#animate
something like that for Canvas would be awesome :)
Posted by: bigfish on Mar 21, 2011 2:56pm URL: http://dafishinsea.com
Grant - I was wishing recently that you would do a tweening engine for javascript. With your background in actionscript and the tweening API's there, I know you'll do it properly. I'll be watching it's development closely. The API looks good.
Thanks,
Dan.
Posted by: Dan Walls on Mar 21, 2011 5:54pm
This is great, and essential. I also like the idea of keeping it standalone but able to integrate in EaselJS. Will definitely keep watching this develop.
Posted by: stahlmanDesign on Mar 22, 2011 12:20pm URL: http://www.stahlmandesign.com
[...] included in Grant Skinner’s EasleJS. Wouldn’t you know it? Less than a week later Grant posted an alpha build of TweenJS. With not a whole lot of effort I was able exchange his library with my [...]
Posted by: Randy Troppmann » u… on Mar 26, 2011 4:40pm URL: http://www.randytroppmann.com/2011/03/26/usin…
Hey Grant this is really cool, I like the chained syntax. Very JS friendly and intuitive!
Posted by: moses gunesch on Apr 6, 2011 2:05pm URL: http://blog.mosessupposes.com
Wouldn't you know it. There's another beer I owe you. Great stuff Grant!
Posted by: Ted on Apr 12, 2011 7:54am
Definately keep it seperate from Easel please.
Posted by: Neil on Jun 1, 2011 10:30am
no easing? :-(
Posted by: ron on Aug 9, 2011 9:22am