YOUR GUIDE TO

Animation on the Canvas with JavaScript

With loop, rewind, series, sequence, easing, paths, and more!

Welcome readers from ◎ Your Guide to Coding Creativity on the Canvas

ZIM Beads animated on path with depth zoom, speed and shading

Animation can be done at several levels on the Canvas. You can manually change properties in a time, for instance, with a Ticker which runs at the framerate and updates the stage. Usually, we use an animation or tween engine to easily apply easing equations, handle rewind, loop and dozens of various options. This guide will take you through both but concentrate on the engine.

We will be using the ZIM JavaScript Canvas Framework. For more options see ◎ Your Guide to Selecting a JavaScript Canvas Library or Framework.

Changing Properties in Time to Animate

In HTML 5 we have been given a new way to handle time for animation. This is the requestAnimationFrame which runs at the refresh rate of the monitor to provide smooth animation. In ZIM, we have wrapped this function in a Ticker class so that we can queue stage updates. You can add functions to the Ticker queue and only one update will be done at the end. ZIM also uses the same queue internally for dragging, animating and other features.