Spine 动画组件

Spine 动画组件用于在画布上展示专业的 2D 骨骼动画。与序列帧逐帧播放不同，Spine 动画基于骨骼和关键帧插值实现平滑动画，同一个角色模型可以包含多个动作（如待机、行走、攻击），并且文件体积相对较小。适合角色动画、复杂交互动效等场景。

所需文件

Spine 动画由以下三个文件组成，上传时需要一同提供：

请确保从 Spine 编辑器中以 JSON 格式 导出骨骼数据（非二进制 .skel 格式）。Adseed 目前仅支持 JSON 格式的 Spine 数据文件。

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

属性	说明	默认值
Spine 来源	上传的 Spine 动画文件包（包含 .json、.atlas、.png）	无
动画列表	Spine 文件中包含的所有动画片段名称及时长，上传后系统自动读取	自动读取
骨骼名称	指定要操作的目标骨骼节点，可用于精细控制特定骨骼的变换	空

Spine 动画的播放通过事件系统的 playSpine 动作控制。

参数	说明
动画名称	从动画列表中选择要播放的动画片段
循环播放	设置为循环时动画会无限重复播放；设置为单次时播放一遍后停止
结束效果	单次播放结束后触发的后续动作

自动播放待机动画 — 页面加载时通过自动事件触发循环播放待机动画

交互切换动作 — 用户点击后从待机动画切换到特定动作（如攻击、跳跃）

动作串联 — 一个动作播放结束后，通过结束效果自动切换到另一个动作

在 Spine 编辑器中完成动画制作后，选择 导出 → JSON 格式导出。确保同时导出骨骼数据（.json）、纹理图集（.atlas）和纹理图片（.png）。

将导出的所有文件上传到 Adseed 素材库。系统会自动识别这组文件属于同一个 Spine 动画。

将 Spine 素材从素材库拖入画布，组件会自动显示动画的第一帧画面。

在事件系统中为 Spine 组件添加播放事件，选择要播放的动画片段并设置循环方式。

如果 Spine 动画包含多个皮肤（Skin），您可以通过事件系统在运行时切换角色的外观。例如切换角色的服装、颜色方案等，无需上传多个 Spine 文件。

Spine 动画虽然比序列帧更节省文件体积，但复杂的骨骼动画仍然会消耗渲染性能。

Spine 动画的优势在于「一个模型、多个动作」。相比为每个动作制作一组序列帧，使用 Spine 可以大幅减少素材文件数量和总体积。

这个页面有帮助吗？