Glimmr Canvas Animation

version 1/111030 by Erik Temple

  • Home page
  • Beginning
  • Previous
  • Next



  • Section: Parameterized motion animation tracks

    Parameterized motion tracks are like standard motion tracks (see above), except that they can target any number or coordinate property. Practically, what this means is that we can use a motion track to act on the following properties:

        origin (coordinate)
        endpoint (coordinate)
        cursor (number)
        line-weight (number)
        bit-size (number)

    Clearly, parameterized motion tracks can be used on a much narrower range of properties than parameterized reel tracks; they work only on those numerical properties for which continuous motion is possible.

    A parameterized motion animation on the origin coordinate is almost exactly equivalent to the basic motion track preset, with the important exception that, for g-elements that have an endpoint property (i.e., primitives), the endpoint is *not* moved along with the origin, as does happen with the motion preset. This allows us to use a parameterized motion animation targeting the origin to move the upper left corner (origin) of a primitive independently of its lower right (endpoint). And of course, targeting the endpoint will move it independently of the origin.

    To invoke a parameterized motion track:

        animate <track> as a parameterized motion animation targeting <chosen parameter/property> of <target> and ending at <end point> at <interval> with a duration of <length> frames, <cycling>

    Or, specifying the average velocity of movement rather than the length of the animation:

        animate <track> as a parameterized motion animation targeting <chosen parameter/property> of <target> and ending at <end point> at <interval> with a velocity of <velocity> units, <cycling>

    The <end point> token can be either a coordinate (list of two numbers) or a number (single digit), or a variable containing one of these.

    Usage examples:

    Animating the endpoint coordinate of a line, so that it sweeps back and forth across the screen:
        The sweeping track is an animation track.

        The Scanline is a line primitive. The origin is {200, 100}. The endpoint of the Scanline is {0, 0}.

        When play begins:
            animate the sweeping track as a parameterized motion animation targeting the endpoint of the Scanline and ending at {400, 0} at 10 fps with a velocity of 10 units.


    Animating by a simple number rather than by a coordinate. Here we move a cursor from the end of a short text back to the beginning, but with bounce easing set to move it back and forth, a bit aimlessly, along the way:
        The wandering cursor track is an animation track. The easing is the bounce easing out rule.

        Well-Considered Phrase is a bitmap-rendered string. The text-string is "It was a dark and stormy...". The cursor is 27.

        When play begins:
            animate the wandering cursor track as a parameterized motion animation targeting the cursor of the Well-Considered Phrase and ending at 0 at 6 fps with a velocity of 1 unit.


    Parameterized motion animations can use easing equations to influence the timing and path of movement. Because coordinate-based parameterized motion animations can move on two axes (i.e., the x and y axes), we can use different easing equations simultaneously on the two axes. If we specify only the "easing" for the track, then the same easing equation will be applied to both axes. If we also supply the "secondary easing" for the track, then the easing will apply to the x axis, while the secondary easing applies to the y axis. To reset a track to the defaults after using secondary easing, we specify the "null easing rule" for the secondary track, e.g.

        now the easing of the default track is the linear easing rule;
        now the secondary easing of the default track is the null easing rule.

    See the "Eased Movements" example to explore the effect of easing, including differential-axis easing, on animated movement.