⏱️ 时间轴动画

时间轴动画用于管理组件在不同时间点的属性变化。你可以先在“动画编辑器”中定义动画轨道与关键帧，再通过事件系统在运行时触发播放。

📍 入口位置

  1. 在工作台主界面查看画布底部的 Tab 栏
  2. 点击 “动画” Tab（位于“日志”Tab右侧）
  3. 打开 “时间轴动画” 编辑器后，新建动画并选择“预览测试组件”

动画入口

1. 🔑 动画功能关键概念

动画（Animation）

  • 一个动画是一条独立轨道，包含名称、测试组件、多个关键帧。
  • 一个项目可以有多个动画，后续可在事件里选择目标动画触发。

关键帧（Keyframe）

  • 关键帧代表某个时间点（单位 ms）组件应达到的状态。
  • 至少一个关键帧即可形成可见过渡（从当前/起始状态过渡到该关键帧），添加多个关键帧可定义更复杂的连续变化。

属性状态（Property State）

  • 每个关键帧可选择若干参与动画的属性（如 width、height、bg_color、opa）。
  • 未勾选的属性不会参与该关键帧计算。

读取状态（Read Component State）

  • “读取”会把预览测试组件当前状态写入当前关键帧已勾选的属性。
  • 适合在画布上先把组件调到目标样子，再一键写回关键帧，减少手工录入。
  • 建议先勾选需要参与动画的属性，再执行读取，避免覆盖不相关字段。

缓动函数（Easing）

  • 用于控制属性从上一个关键帧过渡到当前关键帧的速度曲线。
  • 常见类型：线性、缓入、缓出、缓入缓出、回弹、弹跳。

预览测试组件 vs 触发目标组件

  • 预览测试组件：仅用于编辑器中预览效果。
  • 触发目标组件：运行时真正执行动画的组件，在“触发动画”事件里配置。
  • 两者可以相同，也可以不同（例如复用一个动画模板到多个组件）。

2. 🧪 示例：正方形先放大，再由红变蓝

下面以一个正方形组件为例，完成“50x50 放大到 100x100，再由红色变为蓝色”的时间轴动画。

步骤 1：准备测试组件

  1. 在画布中添加一个容器组件。
  2. 设置初始尺寸为 50 x 50，初始颜色为红色。
  3. 为组件命名（示例：square_1），便于后续在事件中选择。

页面

步骤 2：创建动画轨道

  1. 打开 时间轴动画。
  2. 点击 “添加动画”。
  3. 动画名称填写：square_pulse_color。
  4. 在“预览测试组件”中选择 square_1。

添加动画

步骤 3：添加关键帧

本示例添加 2 个关键帧即可（初始状态直接使用组件当前状态，无需额外添加关键帧）：

  • 500ms：完成放大（100 x 100），颜色保持红色
  • 1000ms：尺寸保持 100 x 100，颜色从红色过渡到蓝色

时间轴

步骤 4：配置每个关键帧属性

关键帧 A（500ms）

  • width = 100
  • height = 100
  • bg_color = 红色

关键帧 B（1000ms）

  • width = 100
  • height = 100
  • bg_color = 蓝色

缓动建议：

  • 到 500ms 使用 缓出（ease out）

步骤 5：预览与微调

  1. 点击 “预览” 播放动画。
  2. 观察“先放大，再变色”是否符合预期节奏。

页面

3. 🎯 如何在屏幕加载时触发动画

时间轴动画定义完成后，需要通过事件系统触发。

步骤 1：选择屏幕（页面）作为触发源

  1. 回到工作台，在组件树中选中当前页面的根节点（屏幕）。
  2. 在属性面板切到 “事件” 标签。

步骤 2：新增事件并选择动作

  1. 点击 “添加事件”。
  2. 事件类型选择：LV_EVENT_SCREEN_LOADED（页面加载完成时触发）。
  3. 动作类型选择：“触发动画”。

步骤 3：配置触发动画参数

  1. 动画：选择 square_pulse_color
  2. 目标组件：选择 square_1
  3. 重复次数：
  4. 1 表示播放一次
  5. 0 表示无限循环
  6. 反向播放：按需开启（用于反向时序播放）

事件

步骤 4：验证运行效果

  1. 保存项目并运行预览。
  2. 页面加载完成后观察动画是否自动播放。
  3. 确认 square_1 按时间轴效果执行“先放大，再由红变蓝”。

页面

🔗 相关功能

工作台文档：← 返回工作台 | 画布 | 组件库 | 组件树 | 属性面板 | 事件系统 | 多语言 | 时间轴动画 | AI设计 | 工具栏 | 快捷键