ZIM JavaScript Framework

Canvas Components, Controls and more!

ZIM BITS – Animate Position, Rotation, Scale and Alpha in JavaScript HTML 5 Canvas and CreateJS – Tips, Techniques and Tutorials

b_animation

http://zimjs.com/bits/view/animation.html

CreateJS has a TweenJS library.  ZIM 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 animate
2. call animate();

SEE FULL CODE

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

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

Information

This entry was posted on December 31, 2015 by in tutorials and tagged , , , , , , .

Categories

%d bloggers like this: