How to Add an Animated Image

1. Adding Animation Frames

   First, you need to add a sequence of images that will be played one after another.

   Place all animation frames inside: plugins/UltimateUI/contents/images/animations/example/

   It is recommended to name the frames sequentially for ex. 1.png, 2.png, 3.png...

2. Adding the Animation to a File

   Next, add the animation to your .yml file. The syntax is very similar to a regular image element, but you need to add a few additional properties.

   iniCopy

   frames: animations/example

   This specifies the folder from which the animation frames will be loaded.

   iniCopy

   interval-ms: 50

   This determines how often the animation switches to the next frame.

   iniCopy

   animation-loop: false

   This determines whether the animation should start again after reaching the final frame.

Full example#

blocks:
- type: image
  id: animated_img
  name: Example Animation
  layer: 1
  image: animations_example_1
  frames: animations/example
  interval-ms: 50
  animation-loop: false
  position:
    x: 0
    y: 0
  size:
    width: 1000
    height: 1000