ZIM BITS – Animate Position, Rotation, Scale and Alpha in JavaScript HTML 5 Canvas and CreateJS – Tips, Techniques and Tutorials
http://zimjs.com/code/bits/view/animation.html
CreateJS has a TweenJS library. ZIM move() and animate() wrap this functionality. With the createjs.Tween you need to also make a Ticker so it becomes a couple steps and you have to remember to turn the ticker off when your animation is done. CreateJS separated the Tween and the Ticker for a reason! It is more efficient if you have concurrent tweens to have only one Ticker so DO NOT animate more than four or five things at once with the ZIM move and animate. A few at a time and as many times as you want is fine.
STEPS
1. make an object to move or animate
2. call zim.move() or zim.animate();
EXTRA
- if you do not send any parameters when calling a function after tweening then an automatic parameter of the target of the tween is passed
- this is a little different than createjs.Tween which returns the tween and then you would get the tween.target to get the target
- if you are going to do one tween after another on the same object then it is probably easier to use createjs.Tween and chain the tweens. You can do it by starting a second move or animate in the call but this is a little awkward
- the rewind and count features of ZIM move and animate are quite handy and currently createjs.Tween does not provide the functionality
Advertisements
