ZIM js 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/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();

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
  • the rewind and count features of ZIM move and animate are quite handy and currently createjs.Tween does not provide the functionality
Advertisements

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 )

Google+ photo

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

Connecting to %s

Information

This entry was posted on December 31, 2015 by in tutorials and tagged , , , , , , .
%d bloggers like this: