There 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.
Just loved the API. Really simple and nice/easy to see.
I’ll do some tests with TweenJS for sure!
Thanks.
Looks good and could eventually be advertised on EaselJS website.
Please keep it standalone but pluggable in EaselJS.
I quite like Raphael’s tweening API:
http://raphaeljs.com/reference.html#animate
something like that for Canvas would be awesome 🙂
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.
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.
Hey Grant this is really cool, I like the chained syntax. Very JS friendly and intuitive!
Wouldn’t you know it. There’s another beer I owe you. Great stuff Grant!
Definately keep it seperate from Easel please.
no easing? 🙁
Long time fan of your tweening libs, real happy to find this project its exactly what I need, migrating my dev over from flash to html5
Thanks a lot for all your fine work!
btw your website appears to need the grass mowed. I was hoping the mouse would sort of slice it when i click dragged, that’d be a fun effect