动画 | anyui

在 anyui-LIVE 里，组件的属性可以随时间变化，组件事件也能触发这些变化。本文介绍动画的编排与播放方式，以及哪些能力取决于项目所选的 LVGL 版本。

概览

动画是整个项目共享的具名资源：同一个动画可以在任意界面中播放，也可以被多个事件反复调用。

概念	指什么	在哪里编辑
动画	一条具名的时间轴，外加重复、延迟、方向等播放选项。	底部面板的动画选项卡
轨道	某个组件的某一个属性，例如某个面板的不透明度。	底部面板的动画选项卡
关键帧	轨道上的一次数值变化：何时开始、持续多久、从哪个值变到哪个值、用什么缓动。	底部面板的动画选项卡
内联动画	直接写在事件操作里的单个属性动画。	检查器的事件选项卡
屏幕切换动画	项目切换屏幕时所用的过渡动画。	检查器的事件选项卡

新建动画

打开底部面板的动画选项卡。若已有目标组件，先在画布上选中它。
点击动画列表上方的 +（新建动画）。面板分为三部分：左侧是动画列表，中间是时间轴，右侧是编辑选项。
新建的动画自带一条轨道：所选组件的 X 坐标在 300 毫秒内从 0 移到 100。若当时选中的是界面，或未选中任何组件，则使用项目中的第一个组件。随后在 轨道 1 下修改该轨道的组件和属性。
点击 添加关键帧 增加一段变化，再设置 起始时间（毫秒）、计时方式、起始值 与 结束值，以及 缓动曲线。
在 播放设置 下设置整个动画的播放选项。
如需更改其他组件或属性，点击 添加轨道；若同一条属性上要增加一段变化，点击 添加关键帧。动画列表会在名称旁标出每条动画的规模，例如 2 条轨道 · 800 毫秒，无需展开即可了解大致情况。
先到预览中查看效果，再用代码查看器确认它在导出代码中的呈现方式。

关键帧

每个关键帧描述一次变化：

字段	含义
起始时间（毫秒）	这一段从何时开始，以动画起点为零点计时。
计时方式	选择固定时长时，该段持续完整的时长（毫秒）；选择按速度时，按速度（单位/秒）播放，时长由系统计算并显示为推导时长（毫秒）。
起始值 / 结束值	属性变化的起点与终点。用取值方式决定写法：数值或颜色直接填值，C 表达式填导出代码里原样使用的表达式，当前值表示播放那一刻组件持有的值。
缓动曲线	变化的形态：Linear、Ease In、Ease Out、Ease In Out、Overshoot、Bounce、Step，另有 24 条内置 CSS 曲线。

需要注意：

一条轨道只动一个属性，同一条轨道上的两个关键帧不能在同一时刻开始；若确实发生重叠，面板会给出警告。
按速度 计时的关键帧必须写出明确的 起始值 与 结束值：当前值 和 C 表达式 只能配合 固定时长 使用，因为按速度计算时长时，需要根据两端取值之间的距离计算。
颜色属性要填颜色，数值属性要填数值，填错会由面板指出。
用 C 表达式 写的取值，加上少数没有实时读取接口的属性上的 当前值，只有导出代码才会解析。预览不会推测，而是直接指出无法解析的取值。

播放设置

选项	含义
显示名	动画列表里显示的名称。
代码名	导出代码里使用的名称：仅限字母、数字与 `_`，不能以数字开头，最长 16 个字符。
重复次数（-1 = 无限）	动画的播放次数，`-1` 表示无限重复。
重复间隔（毫秒）	每遍播放之间的等待时间。
整体倒放	按相反顺序从结束值播放到起始值。
倒放时长（毫秒）	倒放阶段的持续时间。
倒放延迟（毫秒）	倒放阶段开始前的等待时间。
整体延迟（毫秒）	整个动画开始前的等待时间。
提前应用起始值	一开始播放就把起始值写到组件上，无需等完延迟。

动画还能在开始和结束时执行动作，见回调区的 开始时 与 完成时；常见用法是一段过渡结束后显示、隐藏或修改某个组件。编辑器不会检查这两个动作列表，其中的问题会出现在构建选项卡的日志中。

播放动画

动画由组件事件触发，在检查器里配置：

选中组件，打开事件选项卡，添加一个事件，例如 短点击。
点击 添加操作，选择 播放动画。
在动画字段里选择已创建的动画，该事件行会播放整条时间轴。

操作	作用
播放动画	开始播放。
停止动画	结束播放。指定动画就只停那一个；清空动画后它显示为“目标上的全部动画”，也就是停掉该组件正在运行的所有动画。
暂停动画	把正在播放的动画冻结在当前帧。
继续动画	让已暂停的动画继续播放。
定位动画	把已经开始的动画跳到指定的位置（毫秒），并显示那一帧。

播放动画 也可以不依赖动画资源：选 无（按单个属性内联播放），直接在当前行里设置目标、属性、起始值、结束值、持续时间、延迟、重复次数和缓动曲线。如需快速测试一段动画，这种方式最方便。之后点击 提升为动画，它就变成一个具名动画，既能复用，也能继续添加轨道。

切换屏幕是同样的做法：在 切换屏幕 操作里把 淡入淡出 设成想要的过渡，再设置 持续时间。

在预览中检查动效

进入预览后，动画选项卡会为选中的动画提供播放控制：

播放、暂停、停止，外加一行状态：空闲、播放中、已暂停、已停止 或 已完成。
头 … 毫秒 是当前播放到的位置；运行 … 毫秒 / … 毫秒 把预览引擎实际运行的跨度与你编排的时长并列显示。
在时间轴上拖动 播放头 可以停在任意一帧，位置会吸附到最接近的 10 毫秒。
缩小、放大、适应宽度 调整时间轴的显示比例。

预览运行期间该面板为只读状态，如需继续编辑，请先停止预览。

版本差异

导出后的项目支持哪些能力，取决于项目的目标 LVGL 版本：

能力	可用情况
整体倒放	各版本均可。
重复播放整个动画	LVGL 9.2.2 及以后。LVGL 8.3.7 上改成每条轨道各自循环。
整体延迟（毫秒）	单轨道单关键帧的动画各版本均可；多轨道或多关键帧的动画需要 LVGL 9.4.0 及以后。
倒放时长（毫秒）	单轨道单关键帧的动画各版本均可；多轨道或多关键帧的动画只有 LVGL 8.3.7 支持。
暂停动画 / 继续动画	各版本均可；例外是单轨道单关键帧的动画，它在 LVGL 8.3.7 与 9.2.2 上暂停不了。在 LVGL 8.3.7 上暂停后继续，会从头重播。
定位动画与拖动播放头	各版本均可；例外同样是单轨道单关键帧的动画——任何版本都没法给单个动画逐帧定位。
重复次数上限	LVGL 8.3.7 最高 65534，其余版本最高 4294967294；超出的值会在设备端被截断。
24 条 CSS 缓动曲线	仅 LVGL 9.x；七条基础曲线各版本均可。
可动画的属性	绝大多数属性各版本都有。LVGL 8.3.7 缺少外边距、按轴的缩放与斜切、绘制长度、分层不透明度和渐变不透明度，这些要用 LVGL 9.x。
Transform Zoom	唯一反过来的属性：只有 LVGL 8.3.7 有，LVGL 9.x 已经把它拆成缩放与斜切。

切换版本时，anyui-LIVE 会留下你已经编排好的内容，同时说明当前版本无法表达的部分：轨道用到了该版本没有的属性，时间轴会把这条轨道标注出来；这类属性和不支持的缓动曲线也会写进问题选项卡，导出前就能看到。

预览播放的动画与导出项目一致，除了“关键帧”一节提到的取值写法，以及少数预览引擎暂不支持的选项——整体倒放、整体延迟，还有暂停单轨道单关键帧的动画。如果你正在检查的动画用到这些选项，问题选项卡会指出具体动画以及预览无法支持的部分，而导出的代码仍按上表执行。