DYNAMIC AND PATH ANIMATIONS – IMPROVEMENT

The speed of animations can be controlled with the percentSpeed property on the target. Animations can be combined in an Accelerator to control all at once (along with Dynamos (dynamic Sprites) and Scrollers). Accelerators can be controlled with a MotionController (or techniques below). percentSpeed also works with Slider, Dial, Stepper, Swiper and Parallax. percentSpeed also can be added to wiggle or animate.

Animations can also be scrubbed with the percentComplete property on the target. percentComplete works with Slider, Dial, Stepper, Swiper and Parallax. percentComplete also can be added to wiggle or animate.

Animation along a path (Blob or Squiggle) supports dynamic animation. Objects can now be dragged along a path – see DRAG below:

PERCENTSPEED

Added dynamic parameter to animate().
Set dynamic to true to be able to change the speed of the animation
with the percentSpeed property of the target object.
See https://zimjs.com/nio/speed.html
Adjusted Accelerator so it accepts any object with a percentSpeed
including an object that is being dynamically animated.
Added a clamp parameter to animate() to limit dynamic animations to edges of their times
otherwise time can go well beyond and take just as long to reverse to active animation time range
See https://zimjs.com/nio/controls.html
Adjusted MotionController so if an Accelerator is passed in
the MotionController operates percentSpeed rather than x and y
in any of its types - mousemove, keydown, gamestick, etc.

PERCENTCOMPLETE

Added percentComplete property to any object being animated.
Setting this gives manual control for instance with a Slider, Dial, mouse position, Parallax, etc.
http://zimjs.com/nio/parallax.html

FLIP

In addition to orient, there is now flip and flipVertical convenience props for animate()
set these to true to flip the target with scaleX and scaleY depending on direction
http://zimjs.com/nio/flip.html

DRAG

Added a drag parameter to animate() that lets you drag path animations
Set startPaused to true to pause the animation and drag or drag a moving animation.
Added a redirect convenience property to the props object.
This defaults to true so that drag will alter the direction of the animation IF rewind is set
Set this to false to not alter the direction - you can still drag backwards
but when you let go, it will go in the direction the animation was going
http://zimjs.com/nio/drag.html

ZIM NIO EXTRA! – IMPROVEMENT

EXTRA! provides animation based on animation. This allows for setting zoom, depth, speed, fade, etc. based on target y value while animating on a path but EXTRA! also opens up endless possibilities as the input and output does not have to be the target. This means that animation can also control properties of other objects and other object properties can control the animation. http://zimjs.com/nio/extra.html

There is a general and full format for EXTRA! but convenience properties are also provided. These primarily help with depth while animating along a path (Squiggle or Blob) or just a straight line with x and y.

ZOOM, SPEED, LAYER, FADE

Added zoom, speed, layer and fade convenience properties to animate props
These accept an array of values - [inputMin, inputMax, outputMin(default 0), outputMax(defaunt stageH)]
zoom:[.5,1.5] will scale the target to .5 if its location is at 0 and 1.5 if at stageH and then proportionally in between
speed:[50,100] will make the animation play at a slower speed the higher the target is on the stage
layer:[0,10] will make the target change layers from the bottom to the top if animated along the y from y=0 to y=stageH
fade:[0.5,1] will make the alpha fade as the target recedes to the back (top of the stage)
This will help with depth animation to make things farther away animate more slowly
and give the ability to animate around an object depth-wise.

EXTRA

In addition to the convenience properties above, ZIM EXTRA! has a more general and complete format:
Pass in a single EXTRA! object or an array of EXTRA! objects: extra:{} or extra:[{},{},{}]
The object has the following properties - all are optional except the outputProp which is required:
|ZIM VEE| - each object below optionally accepts a ZIM VEE value for zik() to pick randomly from
inputObj - (default target) - the object with the input property - probably the animation target but could be any object
inputProperty - (default "y") - a string of the property name for the input - "x", "rotation", etc.
inputMin - (default 0) - the minimum input value for the calculation - also see constrain
inputMax - (default stageH) - the maximum input value for the calculation - also see constrain
outputObj - (default target) - the object whose output property is being changed - probably the animation target but could be any object
outputProp - (default "scale") - a string of the property name of the output - "scale", "layer", "rotation", etc.
outputMin - (default 0) - the minimum output value for the calculation - also see constrain
outputMax - (default 1) - the maximum output value for the calculation - also see constrain
factor - (default 1) setting factor to -1 will reverse the direction of the animation
outputRound - (default false) set to true to receive rounded output values
constrain - (default true) constrain the output value to outputMin and outputMax
set to false to let values go beyond provided mins and maxes
this is quite usual when a proportion is easily figured at a certain range
and continued increase or decrease is desired outside the range - just turn constrain to false.
EXAMPLES:
extra:{outputProp:"scaleX"} would animate the scaleX of the target from 0-1 over the stage height
extra:{outputObj:circle, outputProp:"alpha"} would animate the alpha of circle based on the animated target's y position
extra:{inputObj:circle, inputProp:"x", inputMax:stageW, outputProp:"level"} would animate the target's child index as the circle's x goes across the screen
** in the last two examples, circle is a different object than the target of the animation - circle might be animating independently or based on a Slider value, etc.

CORNER

TAP

An chainable tap(call, distance, time, once) method has been added to all DisplayObjects along with a noTap() method. This acts like a traditional click where you down up without moving the mouse (within the distance parameter). This is handy too as the methods are chainable. The callback function will receive the traditional event object

HOV

Added a short chainable method hov(value, prop) to change the value of a hovered object. By default this is the alpha if a number is passed or the color if a string is passed
new Circle().center().cur().alp(.5).hov(.8).tap((e)=>{e.target.color = red; stage.update();});

ABOUT ZIM

ZIM at http://zimjs.com is an open source JavaScript Framework for the HTML Canvas. You code in a text editor and view the code in a Browser. You can make visually rich games, apps, art and sites. ZIM is powered by the wonderful CreateJS with many thanks to their team!