序列帧组件

序列帧组件通过快速播放一系列静态图片来呈现动画效果。每一帧都是一张独立的图片，当这些图片按顺序高速切换时，就形成了流畅的动画。这种方式适合简单循环动效、加载动画、过渡效果等场景。

动画原理

序列帧动画的核心概念：

帧（Frame） — 动画中的每一张静态图片

帧率（FPS） — 每秒播放的帧数，帧率越高动画越流畅

总时长 — 由帧数和帧率共同决定：总时长 = 帧数 / 帧率

例如，一组包含 30 张图片的序列帧，以每秒 10 帧的速度播放，总时长为 3 秒。

帧率建议设置在 10 ~ 24 之间。10 帧适合简单动效，24 帧接近影视级流畅度但需要更多的图片素材。

选中序列帧组件后，右侧属性面板会显示以下专属属性（通用属性请参考组件概览）：

属性	说明	默认值
帧图片	动画的所有帧图片，按照播放顺序排列。上传时请确保文件名有序（如 frame_001.png、frame_002.png）	空
当前帧	当前显示的帧索引，从 0 开始计数。编辑时可通过调整此值预览特定帧的画面	0

序列帧动画的播放通过事件系统的 playKeyFrame 动作控制。

参数	说明
循环播放	设置为循环（repeat）时动画会无限重复播放；设置为单次时播放一遍后停留在最后一帧
结束效果	单次播放结束后触发的后续动作，可用于串联其他动画或跳转页面

自动循环 — 页面加载时通过自动事件触发循环播放，适合装饰性动效

点击触发 — 用户点击后播放一次动画，适合反馈性动效

串联播放 — 一个序列帧播放结束后，通过结束效果触发另一个动画

在设计工具中逐帧绘制动画的每一个画面。确保所有帧的尺寸一致。

将每一帧导出为单独的图片文件，文件名按顺序编号，例如 frame_001.png、frame_002.png。推荐使用 PNG 格式以保留透明背景。

将所有帧图片上传到项目素材库，系统会自动识别并按编号排序。

将序列帧素材拖入画布，在属性面板中确认帧顺序正确，然后通过事件系统配置播放方式。

序列帧动画的帧数直接影响文件体积和加载性能。

帧数	帧率	时长	文件体积预估	适用场景
10 帧	10 FPS	1 秒	较小	简单图标动效
30 帧	10 FPS	3 秒	中等	标准循环动画
60 帧	24 FPS	2.5 秒	较大	高质量动效

帧数越多，需要加载的图片文件也越多。在移动端场景中，建议将总帧数控制在 50 帧以内，并对每张帧图片进行压缩以确保加载速度。

如果您的动画需求较为复杂（如角色的多动作切换），建议使用 Spine 动画组件。

这个页面有帮助吗？