Glimmr Canvas Animation

version 1/111030 by Erik Temple

  • Home page
  • Beginning
  • Previous
  • Next

  • Section: Motion animation tracks

    "Motion" tracks change the origin coordinate of the target object. If we attempt to target an object that doesn't have the origin property, Inform with throw a run-time error (error P10). The standard Glimmr objects that will support motion animations, then, are:

        any g-element
        graphics g-window

    (We can, of course, create our own kind of object, and as long as it has the "origin" property, we will be able to animate it with a motion animation track.)

    When a g-element that has an endpoint (boxes, rectangles, lines) is animated using the motion animation phrase, the endpoint will be changed along with the origin, so that the shape will move as a unit. If we want to do more complex effects--such as moving the endpoint without moving the origin, or vice versa--then we should use the "parameterized motion" preset (see below).

    When a graphics g-window is targeted by the motion animation phrase, then the framing of the canvas in the window is changed. See Glimmr Canvas-Based Drawing for an explanation of the origin coordinate of windows vis-a-vis their canvases.

    A motion animation always moves the object from its current position to the ending position we specify; the starting position of the object is not directly provided in the animation phrase. To invoke a motion preset animation we can use one of the following two phrases:

        animate <track> as a motion animation targeting <target> and ending at <final position> at <interval> with a duration of <length> frames, <cycling>

        animate <track> as a motion animation targeting <target> and ending at <final position> at <interval> with a velocity of <velocity> units, <cycling>

    The second phrase allows us to specify the velocity (in canvas units per frame; see Canvas-Based Drawing for the concept of canvas units/pixels); the number of frames required to move to the ending position at the given velocity will be calculated automatically.

    If we set the "cycling" option, the animation will start again from the beginning upon completion, ad infinitum or until stopped by another event (such as a callback from another track; see the section on callbacks below).

    Some examples of usage:

    Targeting a sprite element, and specifying the length of the animation rather than the speed:
        The run-movement track is an animation track.

        Lola is a sprite. The origin is {0, 100}.

        Instead of running:
            animate the run-movement track as a motion animation targeting Lola and ending at {400, 100} at 8 fps with a duration of 24 frames.

    Targeting a rendered string element, specifying the velocity rather than the duration of the animation. The text will move in from off the canvas, while an easing equation adds visual interest to the path of movement.
        The title bounce track is an animation track. The easing is bounce easing out.

        The Title Text is an image-rendered string. The text-string is "Your Title Here". The origin is {300, -100}.

        When play begins:
             animate the title bounce track as a motion animation targeting the Title Text and ending at {300, 300} at 20 frames per second with a velocity of 10.

    Targeting a rectangle primitive, and cycling endlessly. We are depicting a 1980s style videogame bullet (i.e. a square) shot repeatedly from a gun turret.
        The gatling shot is an animation track.

        The Bullet is a rectangle primitive. The origin is {100, 150}. The endpoint is {104, 154}. The tint is g-White.

        To activate the turret:
            animate the gatling shot as a motion animation targeting the Bullet and ending at {600, 150} at 10 fps with a velocity of 8, cycling.

    Motion animations, as well as parameterized motion animations (see below), can use easing equations to influence the timing and path of movement. Because motion animations can move on two axes (i.e., the x and y axes), we can also 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.