ZIM js JavaScript Framework

Canvas Components, Controls and more!

ZIM Dynamo and Accelerator launches with version 4.7.2 for HTML Canvas, JavaScript and CreateJS


http://zimjs.com/code/zide/ demonstrates the new dynamic scene functionality in the latest release of ZIM – 4.7.2.


Dynamo takes a zim.Sprite and lets you change its speed by a percentSpeed property.  So you can animate this with zim.animate or change the speed based on mouse position or key presses.  It runs any CreateJS SpriteSheet animations including nested labels and is intended for looping animations.

// this code will slow down and speed up the sprite repeatedly over time
var dynamo = new zim.Dynamo({sprite:mySprite, speed:30, label:"walk"});
   target:dynamo, obj:{percentSpeed:0}, 
   ticker:false, rewind:true, loop:true, time:5000

The Dynamo is for dynamic animations whereas the zim.Sprite run() method plays an animation over a specific time with wait, loop, rewind, easing, and calls and combines this with any traditional tween animated properties like x, y, scale, alpha, rotation, etc.  The two can work together as shown in the example where the character walks and changes speed but then plays a set sprite animation to shoot.


Accelerator manages the speed of multiple Dynamo and Scroller objects by its percentSpeed property.  So you can speed up and slow down a whole scene with one property.  This property can be animated or controlled via the mouse, keyboard, or any input like data, time, sound frequencies, etc.

var scroller = new zim.Scroller(background, 5); 
// could be more scrollers for parallax effect
// and assuming we had the dynamo from above...
var accelerator = new zim.Accelerator([scroller, dynamo]);
// in the ticker, make all speeds twice as fast with mouse at the bottom of stage
// normal speed in the middle of the stage and no speed at the top of the stage
zim.Ticker.add(function() {
    accelerator.percentSpeed = (stageH - stage.mouseY) / stageH * 100 * 2;
}, stage);

You can also pause and unpause Dynamo, Scroller and Accelerator objects.  You can slow them down over time and alternatively, make a Dynamo stop a sprite on a frame number.

The example shows multiple scenes and how to switch between them.  All the best, and let us know when you make something cool!  We are hoping to make some interactive storytelling / interactive animation soon.  Ciao.

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 )

Google photo

You are commenting using your Google 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


This entry was posted on February 2, 2017 by in animation, interactive media, javascript and tagged , , , , , , , , , .


%d bloggers like this: