Other Components Guide
sprite-image widget can be used to create frame based animations from
individual image files stored within the
animation is used
to control the behavior of the animation. By animating the
image files for each frame are loaded into an
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:
- 100 frames, use two digits:
- 1000 frames, use three digits:
The first frame filename must be set in the
href attribute of the
dur attribute controls the amount of time a single loop of the animation
to attributes are used to determine the first and
last frame of the animation. e.g.
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
end the animation, and these can be triggered
In the following example, we will animate images
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
<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
<svg> <use id="myAnimation" href="#frames" /> </svg>
index.js file to trigger the
import document from "document"; const myAnimation = document.getElementById("myAnimation"); myAnimation.animate("enable");
To stop the animation, you can use: