Glimmr Canvas Animation

version 1/111030 by Erik Temple

  • Home page
  • Beginning
  • Previous
  • Next



  • Chapter: Getting started with Glimmr Canvas Animation

    Before you can do any work with Glimmr Canvas Animation, you will need to set up at least one graphics window in your project. Please refer to the documentation for Jon Ingold's Flexible Windows extension for more information. You can also copy the window-related code from the examples in GCA if you just want to get started quickly.

    Once you have a graphics window, you will also need to set up a Glimmr canvas and add some graphics elements--that way you'll have something to animate! See the Glimmr Canvas-Based Drawing extension for instructions and a number of examples. Of course, you can also just plunder the examples in GCA if you just want to get a feel for how things work.

    Next, you will create one or more "animation tracks". Each track controls a single animation effect acting on a single graphics object (either a single sprite, a canvas, or an entire window's display). Multiple tracks can run at the same time; for example, one track might move an image across the screen, while the other makes it smaller and smaller until it disappears. Creating a track is as simple as:

        The movement track is an animation track.
        
    To actually make that track do something, apply an animation preset to it via a phrase like this, placed in the rule that you want to trigger the animation:

        animate the movement track as a motion animation targeting My Sprite and ending at {500, 100} at 250 milliseconds per frame with a duration of 12 frames

    That is all that is required to create a 12-frame animation that moves the sprite from its current position to coordinate (500, 100). The extension will automatically update the graphics window or windows involved, and will stop the timer when all animations have finished.

    Some animations will require a bit more setup. For example, a reel animation requires you to predefine a list of the images to be shown:

        The image-reel of the flipbook track is {Figure 1, Figure 2, Figure 3, Figure 5, Figure 4}.
        
    Many types of GCA animation also allow you to specify "easing" to adjust the speed, timing, or even path of motion (see http://glimmr.wordpress.com/2011/06/11/animation-demo-series-2/ for an introduction to easing). This is completely optional, and is again accomplished with a single line, e.g.:

        The easing of the movement track is the cubic easing out rule.

    See the appropriate sections below for more information on animation tracks, the animation presets available and how to invoke them, easing (also known as tweening), and other topics. There are also a number of in-depth examples at the end of this documentation. More discussion of some of the examples can also be found at glimmr.wordpress.com:

        http://glimmr.wordpress.com/2011/06/05/glimmr-animation-series-1/
        http://glimmr.wordpress.com/2011/06/11/animation-demo-series-2/
        http://glimmr.wordpress.com/2011/06/23/animation-demo-series-3/