This component is for playing animation, support both sprite or sequence images animation.
Sprite animation
The old PrepL way of animation, a single sprite image contains all frames of the animation.
Easy for FE module development, just one image to input.
Approx 500kB for 14 frames @ 500 x 500px.
Large file size if the sprite contains a lot of frames.
All frames in the animation will be loaded once the page is loaded, will be heavy if the page shows multiple animations.
extra steps to produce the sprite image.
Sequence animation
Each animation will be composed by a series of image files. Pass to the FE development with an array of file names.
Easier to produce, no need to combine into one sprite sheet.
More flexible to edit, can only edit one frame inside an animation sequence.
Ability to load the first frame only, and loading the rest of frames after the user hit play button. Therefore well fit for large frames animation.
more error prone, typo in one of the file names will break the whole animation sequence.
Approx 50kB per frame @ 500 x 500px.
Image file requirements and specifications
Any web image file format are accepted: jpg, gif, png, etc.
Although image resolution is not a concern for this component, the old PrepL sprite sheet resolution is 500 x 500px, we can keep using the same resolution.
Spritesheet composition is exactly the same as old PrepL, orders from left to right horizontally.
The order of frames in the sequence animation, IS based on the order of file names inside the array, NOT based on the file name.
All frames, no matter sprite or sequence, MUST BE SQUARE.
Info for sprite animation when pass to FE dev: Sprite image URL, FPS, number of frames.
Info for sequence animation when pass to FE dev: Array of file names, FPS.
