LVGL Animations

LVGL 动画

动画在一段时间内平滑地更改一个或多个组件的一个或多个样式属性。每个动画在其 duration 期间将每个配置的属性从 from 值插值到 to 值，可选择性地应用计时函数来塑造进程。

动画在 lvgl: 配置的顶层 animations: 键下定义，并通过 id 引用。它们可以在启动时自动启动、循环，或通过 lvgl.animation.start 操作按需启动。

# 示例配置条目
lvgl:
  widgets:
    - obj:
        id: box
        x: 0
        y: 0
        width: 50
        height: 50
        bg_color: 0xFF0000
  animations:
    - id: slide
      duration: 1s
      auto_start: true
      loop: true
      timing: ease_in_out
      widgets:
        - id: box
          x:
            from: 0
            to: 200
          y:
            from: 0
            to: 100

配置变量

id（必需，ID）：动画的 ID，用于从 lvgl.animation.start 操作中引用它。
duration（可选，Time）：动画运行一次的时间。默认为 5s。
start_delay（可选，Time）：动画启动与首次值变化之间的延迟。默认为 0s。
auto_start（可选，boolean）：设备启动时自动启动动画。默认为 false。
loop（可选，boolean）：动画每次完成后自动重新启动。默认为 false。
timing（可选）：计时函数，或按顺序应用的一组计时函数。默认为无（线性插值）。
widgets（必需，list）：要动画化的组件，以及每个组件上要动画化的属性。每个条目包含：
- id（必需，ID）：要动画化的组件的 ID。
- 一个或多个可动画化属性，每个以 from/to 对给出：
  - from（必需）：属性的起始值。
  - to（必需）：属性的结束值。
on_start（可选，Automation）：动画每次启动时（start_delay 之后）运行的自动化。
on_stop（可选，Automation）：动画每次停止时运行的自动化，无论它是完成、重启还是通过 lvgl.animation.stop 停止。

当列出多个属性或组件时，它们将在相同的 duration 和 timing 期间一起动画化。

可动画化属性

以下样式属性可动画化：

位置和大小：x、y、translate_x、translate_y、translate_radial、min_width、max_width、min_height、max_height、length。
变换：transform_width、transform_height、transform_rotation、transform_skew_x、transform_skew_y、transform_pivot_x、transform_pivot_y。
颜色：bg_color、bg_grad_color、border_color、outline_color、line_color、text_color、text_outline_stroke_color、arc_color、shadow_color、drop_shadow_color、image_recolor、bg_image_recolor、recolor。
透明度：opa、opa_layered、bg_opa、bg_main_opa、bg_grad_opa、bg_image_opa、bg_image_recolor_opa、border_opa、outline_opa、image_opa、image_recolor_opa、line_opa、text_opa、text_outline_stroke_opa、arc_opa、shadow_opa、drop_shadow_opa、color_filter_opa、recolor_opa。
边框、线条、阴影和文本：border_width、line_width、line_dash_gap、line_dash_width、shadow_width、shadow_spread、shadow_offset_x、shadow_offset_y、drop_shadow_radius、drop_shadow_offset_x、drop_shadow_offset_y、blur_radius、text_letter_space、text_line_space、text_outline_stroke_width。

NOTE

颜色属性只能在常数值之间动画化；颜色的 from 或 to 不能是 lambda。数值属性可以使用 lambda（见下文）。

使用 lambda 作为值

from 或 to 值可以是 lambda。lambda 在每次动画启动时无参数求值一次——因此可用于随机化或计算每次运行的端点：

animations:
  - id: random_slide
    duration: 1s
    auto_start: true
    loop: true
    widgets:
      - id: box
        x:
          from: !lambda "return random_uint32() % 200;"
          to: 200

计时函数

默认情况下，属性在动画的 duration 期间线性变化。timing 函数重塑进程。可以给定单个计时函数，也可以给定一组按顺序应用的计时函数。每个计时函数为以下之一：

round_trip：在 duration 的前半段正向播放动画，后半段返回到起点。不接受参数。
ease_in_out：在开始时缓入值，在结束时缓出值。
- weight（可选，float）：缓动的强度。默认为 2.0。
gravity：像受重力作用一样加速值，到达末端时弹跳。
- acceleration（可选，float）：应用的加速度。默认为 0.5。
- bounce（可选，float，0–1）：每次弹跳时保留的速度比例。默认为 0.5。

不带参数的计时函数可以写成简单的字符串。带参数时，使用带有 type: 键的映射：

animations:
  - id: bounce_in
    duration: 2s
    timing:
      - type: gravity
        bounce: 0.3
        acceleration: 0.8
    widgets:
      - id: box
        y:
          from: 0
          to: 200

操作

`lvgl.animation.start` 操作

启动一个或多个动画。如果动画已经在运行，则从头重启。如果给定，duration、start_delay 和 loop 选项将覆盖为此及后续运行配置的动画值。

on_...:
  then:
    # 通过 ID 启动单个动画
    - lvgl.animation.start: slide

    # 启动多个，覆盖部分选项
    - lvgl.animation.start:
        id:
          - slide
          - fade
        duration: 2s
        loop: false

id（必需，ID）：要启动的动画的 ID，或 ID 列表。
duration（可选，Time）：覆盖动画的 duration。
start_delay（可选，Time）：覆盖动画的 start_delay。
loop（可选，boolean）：覆盖动画的 loop 设置。
lvgl_id（可选，ID）：动画所属的 LVGL 实例的 ID。仅当配置了多个 LVGL 实例时才需要。

`lvgl.animation.stop` 操作

停止一个或多个正在运行的动画，动画属性保持在其当前值。on_stop 自动化将为每个正在运行的动画运行。停止未运行的动画没有效果。

on_...:
  then:
    # 通过 ID 停止单个动画
    - lvgl.animation.stop: slide

    # 一次停止多个
    - lvgl.animation.stop:
        - slide
        - fade

id（必需，ID）：要停止的动画的 ID，或 ID 列表。
lvgl_id（可选，ID）：动画所属的 LVGL 实例的 ID。仅当配置了多个 LVGL 实例时才需要。