Other Components Guide

Sprite Image

The sprite-image widget can be used to create frame based animations from individual image files stored within the /resources directory.

A property animation is used to control the behavior of the animation. By animating the value attribute, image files for each frame are loaded into an <image>.

The image filenames must be numbered consecutively in the order of the required animation.

You must number the files with the correct amount of digits depending upon the number of frames within the animation.

10 frames, use one digit: something_0.png -> something_9.png
100 frames, use two digits: something_00.png -> something_99.png
1000 frames, use three digits: something_000.png -> something_999.png

The first frame filename must be set in the <image> href attribute of the sprite-image component.

The dur attribute controls the amount of time a single loop of the animation takes.

The animation from and to attributes are used to determine the first and last frame of the animation. e.g. from="0" to="99".

We can control the delay between each loop of the animation by adjusting the repeatDur attribute. The repeatCount attribute controls the number of times the animation repeats.

Events are used to begin or end the animation, and these can be triggered from JavaScript.

Basic Example

In the following example, we will animate images frame_1.png to frame_6.png with a duration of 3 seconds. After 5 seconds, the animation will begin again, looping indefinitely.

You should define the following symbol within your widget.defs file:

<svg>
  <defs>
    <link rel="stylesheet" href="styles.css" />
    <link rel="import" href="/mnt/sysassets/system_widget.defs" />

    <symbol id="frames" href="#sprite-image">
      <animate id="anim" attributeName="value" begin="enable"
          from="1" to="5" dur="3"
          repeatDur="5" repeatCount="indefinite" />
      <image href="frame_1.png" width="99" height="99" x="50%-50" y="50%-50" />
    </symbol>

  </defs>
</svg>

Then use the symbol within your index.gui file:

<svg>
  <use id="myAnimation" href="#frames" />
</svg>

Use the following JavaScript in your index.js file to trigger the enable event in JavaScript. This will start the animation.

import * as document from "document";

const myAnimation = document.getElementById("myAnimation");

myAnimation.animate("enable");

To stop the animation, you can use:

myAnimation.animate("disable");

View Components Guide