Animations

Guide to creating and controlling animations in LVGL Pro Editor using timeline-based animation system.

Create smooth, professional animations for your UI components using LVGL's timeline-based animation system, which allows you to define and control complex sequences with ease.

Overview

XML animations are built on timeline animations that organize multiple animation steps into coordinated sequences.

Timelines are composed of simple animations. For example: "change the bg_opa of my_button_2 from 0 to 255 in 500 ms."

Each Component can define its own timeline animations, which can then be played by the Component itself or by any parent Components.

Defining Timelines

Timelines can be defined inside <screen>s and <component>s.

Example:

<component>
 <animations>
  <!-- Show Component and its children -->
  <timeline name="load">
   <animation prop="translate_x" target="self" start="-30" end="0" duration="500"/>
   <animation prop="opa" target="text" start="0" end="255" duration="500" delay="200"/>
   <include_timeline target="icon" timeline="show_up" delay="300"/>
  </timeline>

  <!-- Shake horizontally -->
  <timeline name="shake">
   <animation prop="translate_x" target="self" start="0" end="-30" duration="150"/>
   <animation prop="translate_x" target="self" start="-30" end="30" duration="300" delay="150"/>
   <animation prop="translate_x" target="self" start="30" end="0" duration="150" delay="450"/>
  </timeline>
 </animations>

 <view>
  <lv_button width="200">
   <my_icon name="icon" src="image1"/>
   <lv_label name="text" text="Click me"/>
  </lv_button>
 </view>
</component>

Simple Animations

Inside <animations>, you can define <timeline>s with unique names that you can reference later. Within each timeline, add individual <animation> elements to describe each step. The following properties are supported:

• prop - Style property to animate. All integer, percentage, and color style properties are supported.
• selector - Style selector, e.g. knob|pressed. Default: main|default.
• target - Name of the UI element to animate. self refers to the root element of the Component (the view).
• start - Start value (integer only).
• end - End value (integer only).
• duration - Duration of the animation in milliseconds.
• delay - Delay before starting in milliseconds. Default is 0.
• early_apply - If true, the start value is applied immediately, even during the delay. Default is false.

Include External Timelines

The include_timeline element can be used in a <timeline> to reference animations from another timeline. For example, if my_icon defines a "show_up" timeline that fades in and enlarges the icon, you can include that timeline in other animations without duplicating the code.

To include a timeline, use the following properties:

• target - Name of the target UI element whose timeline should be included. self refers to the root element of the Component (the view).
• timeline - Name of the timeline to include. Must be defined in the target's XML file.
• delay - Delay before starting in milliseconds. Default is 0.

Playing Timelines

Timelines can be triggered by events (such as clicks) using the <play_timeline_event> element as a child of any widget.

Learn more about it in Events section.

Under the Hood

Understanding how timelines work internally helps you use them more effectively.

When an XML file is registered, the contents of the animations section are parsed, and the timeline data is stored as a "blueprint". The descriptors store target names as strings.

When a Component or Screen instance is created, lv_anim_timelines are created and initialized from the saved blueprints. If include_timelines are used, the requested timeline is included in the Component's timeline at this point. As all children are created at this point, the saved animation target names are resolved to pointers using lv_obj_find_by_name.

The created timeline instances and their names are saved in the Component's instance. Since each instance has its own timeline, you can have multiple Components (for example, 10 list_items) and play their load timelines independently with different delays.

When a play_timeline_event is added to a UI element, the target and timeline names are saved as strings. Pointers cannot be used because the event can reference UI elements that will be created only later in the view.

Finally, when the play timeline event is triggered, the selected timeline is retrieved by its name from the target and started according to the other parameters (reverse, delay, and so on).