Animation

The animation platform of the image component allows to use animated images (e.g. GIF files) on displays. Animations support all options of the file platform and add lambda methods: next_frame(), prev_frame() and set_frame() to change the shown picture.

image:
  - platform: animation
    file: "animation.gif"
    id: my_animation
    resize: 100x100
    type: RGB565

The animation can be rendered just like the image component with the image() function of the display component.

To show the next frame of the animation call id(my_animation).next_frame(), to show the previous picture use id(my_animation).prev_frame(). To show a specific picture use id(my_animation).set_frame(int frame). This can be combined with all Lambdas:

display:
  - platform: ...
    # ...
    lambda: |-
      //Ingress shown animation Frame.
      id(my_animation).next_frame();
      // Draw the animation my_animation at position [x=0,y=0]
      it.image(0, 0, id(my_animation), COLOR_ON, COLOR_OFF);

Additionally, you can use the animation.next_frame, animation.prev_frame or animation.set_frame actions.

NOTE

To draw the next animation independent of Display draw cycle use an interval:

interval:
  - interval: 5s
      then:
        animation.next_frame: my_animation

Configuration Variables

The animation platform supports all options of the file platform, such as file, type, resize and transparency. The file option points to the animated image (e.g. a GIF file) whose frames will be embedded. In addition, the following options are available:

• loop (Optional): If you want to loop over a subset of your animation (e.g. a fire animation where the fire “starts”, then “burns” and “dies”) you can specify some frames to loop over.

  • start_frame (Optional, int): The frame to loop back to when end_frame is reached. Defaults to the first frame in the animation.
  • end_frame (Optional, int): The last frame to show in the loop; when this frame is reached it will loop back to start_frame. Defaults to the last frame in the animation.
  • repeat (Optional, int): Specifies how many times the loop will run. When the count is reached, the animation will continue with the next frame after end_frame, or restart from the beginning if end_frame was the last frame. Defaults to “loop forever”.

Actions

animation.next_frame Action

Moves the animation to the next frame. This is equivalent to the id(my_animation).next_frame(); lambda call.

• id (Required, ID): The ID of the animation to animate.

animation.prev_frame Action

Moves the animation to the previous frame. This is equivalent to the id(my_animation).prev_frame(); lambda call.

• id (Required, ID): The ID of the animation to animate.

animation.set_frame Action

Moves the animation to a specific frame. This is equivalent to the id(my_animation).set_frame(frame); lambda call.

• id (Required, ID): The ID of the animation to animate.
• frame (Required, int): The frame index to show next.

See Also

• Images
• Display