ZIM js JavaScript Framework

Canvas Components, Controls and more!

ZIM 4.7 Launches with Animation Series, Sprite Improvements and more for HTML Canvas Coding with JavaScript and CreateJS

icon4

ZIM 4.7.0 (and actually 4.7.1) has launched – hey, did you guys notice the 4 in the ZIM Logo Icon?

http://zimjs.com – is the URL to the ZIMjs Framework for HTML Canvas using JavaScript and powered by CreateJS.

ANIMATION SERIES

CreateJS has always had a great way to chain animations to create animation series.  ZIM added a wrapper to the CreateJS tweens called zim.animate() to simplify the animation for a single animation and incorporate an integrated automatic Ticker.

Now, ZIM can do animation series inside zim.animate() by passing an array of animations into the obj parameter.  These can have all the parameters of an individual animation (except sequencing, looping forever, and further animation series).

For instance:

var circle = new zim.Circle().center(stage).mov(100,-200);
var rect = new zim.Rectangle().centerReg(stage).mov(-100, -200);
var animations = [ // or can insert animations directly in animate below
  {obj:{alpha:0}, time:1000, from:true},
  {obj:{scale:2}, time:1000, rewind:true, rewindCall:playSound},
  {target:rect, obj:{rotation:360}, time:2000, ease:"backInOut"},
  {obj:{x:circle.x-100}, time:500, call:fightBack},
  {obj:{x:circle.x-50}, time:200, loop:true, loopCount:3, rewind:true},
  {target:rect, obj:{x:rect.x+100}, time:200},
];
circle.animate({obj:animations, call:function(){zog("end");}, id:"series"});
var button = new zim.Button({label:"PAUSE", toggle:"PLAY"}).center(stage);
button.on("click", function() {zim.pauseZimAnimate(button.toggled, "series");});

function playSound() {zog("playsound")}
function fightBack() {
    rect.animate({
        obj:{x:rect.x+50}, wait:200, time:200,
        loop:true, loopCount:2, rewind:true,
        override:false, id:"series"
    });
}
stage.update();

Note that the default target for animate is the object animate is placed on but you can use other targets – and if you want, just use zim.animate() and provide target params for each.

ANIMATE IDS
ZIM 4.7.0 introduces animate ids that can be used with pauseZimAnimate(state, id) and stopZimAnimate(id).  Using circle.stopZimAnimate() would stop all tweens on the circle only.  Using circle.stopZimAnimate(“series”) will stop all tweens with an id of “series” on the circle.  Using zim.stopZimAnimate() stops all tweens and zim.stopZimAnimate(“series”) would stop all tweens with an id of “series”.  Note that this includes tweens from zim.move() and sprite.run() as well.  And note that a series will get the same id.

SPRITE ANIMATION SERIES
The zim.Sprite makes use of the animate series with the run() method.  See the blog post on Sprite Updates.

spritesheetpromo

MORE CHAINING
sca(), reg(), siz() have been added to the chainable transformation properties representing scale, registration and size.  These are in addition to pos(), mov(), alp(), rot() and ske().

INTERVALS
zim.interval(time, call, total, immediate) and zim.timeout(time, call) have been added to make intervals and timeouts that use requestAnimationFrame to not waste batteries when the app is not in view.  There are a few more handy features to get random intervals, pause and clear as well – so check the docs.

FULL ON MOBILE
The full scale mode has been rewritten to solve some iPhone bugs when changing orientation. Thanks to Frank Los for the help in debugging these and coming up with solutions.

Please see all the updates on the ZIM Docs Updates page.

Have a great day!

Dan Zen

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

%d bloggers like this: