Glimmr Canvas Animation

version 1/111030 by Erik Temple

  • Home page
  • Beginning
  • Previous
  • Next



  • Section: Zooming animation tracks

    "Zooming" tracks affect the scaling of an object, allowing us to "zoom" graphics in or out. Zooming tracks can be function with:

        g-elements
        graphics g-windows

    When targeting a g-element, a zooming animation affects the "scaling factor" property of the element. The effect this has depends on the type of g-element; only the line-weight of primitives is affected by the scaling factor, and the scaling factor of bitmaps is much more coarsely realized than that of images. See the docs for Glimmr Canvas-Based Drawing for more information. (Note that if you are using asymmetrically scaling, the zooming track will nevertheless scale symmetrically. Use the "parameterized zooming" preset--see below--to scale axes independently.)

    When targeting a graphics window, the property affected is the "arbitrary scaling factor" of the window. This forces manual scaling of the window (see Glimmr Canvas-Based Drawing), so if we wish to return to automatic scaling after completing the animation, we will need to reset the arbitrary scaling factor and trigger a redraw, e.g.:

        now the arbitrary scaling factor of the graphics-window is 0.0000;
        refresh windows.

    If we attempt to target a canvas, we will instead affect *all* windows that currently display the canvas. This is only advisable if all of these windows are set to the same scaling factor/arbitrary scaling factor, because the scaling factor of the last window to be created will be used for all windows during the animation.

    Note that, to avoid aesthetic abomination, Glimmr normally does not allow the canvas to be scaled at larger than actual size. This can be changed, however, on a window-by-window basis, like so. For example:

        Oversize scaling of the graphics-window is true.

    Also note that whether we are targeting a graphic element or a window, content that is automatically centered may show some "jiggle" due to rounding errors. To avoid this problem when zooming an individual element (such as a sprite), we can make sure that the element is "left-aligned" or "right-aligned" rather than "center-aligned" (see Glimmr Canvas-Based Drawing).

    To invoke a zooming preset, we use the following phrase:

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

    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).

    Usage examples:

    Targeting an image-rendered string element, zooming it from nearly invisible to full-size. An easing equation makes the zoom more dynamic.

        The title zoom track is an animation track. The easing of the title zoom track is cubic easing in.

        The Title Text is an image-rendered string. The text-string is "Your Title Here". The scaling factor is 0.0001.

        When play begins:
             animate the title zoom track as a zooming animation targeting the Title Text and ending at 1.0000 at 20 frames per second with a duration of 12 frames.

    Targeting a box primitive. Because a primitive's size is determined by its endpoint, we can only zoom the weight of the line used to draw the box. This animation, which cycles endlessly, will thus produce a box whose line-weight pulsates:

        The line-pulsation track is an animation track.

        The Frame is a box primitive. The origin is {10, 10}. The endpoint is {100, 100}. The line-weight is 1.

        To start pulsation:
            animate the line-pulsation track as a zooming animation targeting the Frame and ending at 4.0000 at 8 frames per second with a duration of 8 frames, cycling.