RiggyEnglish注册试用

Spine 待机动画怎么做:127 个官方动画实测的时长、幅度与曲线

待机动画(idle)是角色没在做别的事情时一直播放的动画:动得太多显得焦躁,动得太少又像一张静止的图。与其凭感觉猜,我们统计了 Spine 官方示例里的动画师实际是怎么做的。

统计了什么

样本是官方 spine-runtimes 仓库 4.2 分支 examples/ 文件夹里的 JSON 导出:26 个骨架、127 个动画、约 18,000 个关键帧——spineboy、raptor、owl、goblins、hero、windmill 等。对每个动画,我们记录了每个关键帧的时间和数值、所用的曲线、每条时间轴的数值范围、循环是否闭合,以及成对骨骼之间的相位差。骨骼分类(腿、手臂、躯干、头部、附属部件)是按骨骼名称划分的,所以下面的数字只是大致趋势,不是对某一个骨架的定论。

按 30 fps 网格设置关键帧

考虑到导出时的舍入,统计到的关键帧约 98% 落在 1/30 秒的整数倍上;落在 24 fps 网格上的只有 39%。最特别的是 coin(硬币),约 38% 的关键帧不在网格上——它的时间大概是按旋转周期而不是按帧来定的。运行库接受任意小数时间,但统一的网格能让动画之间的时间和事件触发的时刻更容易逐帧对齐。下文的“帧”都指 1/30 秒。

待机循环通常多长

样本中的待机循环长度在 30 到 200 帧之间,也就是 1 到 6.7 秒:hero/idle 是 30 帧,spineboy/idle 50 帧,owl/idle 200 帧。待机明显比同一个角色的走路循环长——spineboy 呼吸一次用 50 帧,走一个循环用 30 帧。

呼吸周期不必是步行周期的整数倍;错开周期有助于减少动作反复同步的机械感。

关键帧少,设置关键帧的骨骼占比也较低

待机动画里,旋转时间轴的关键帧密度中位数是每秒 3.0 个(四分位区间 2.4 到 4.3)。跑步是每秒 11.2 个,走路 5.5 个。

待机动画打关键帧的骨骼也更少:有自己关键帧的骨骼所占比例,中位数约为 31%,走路和跑步约为 54%。没有直接设置关键帧的骨骼,也可能随父骨骼或约束运动,所以这并不是说画面上其余部分是僵住的——但对待机来说,优先为需要独立控制的部位设置关键帧、而不是让整个骨架均匀地动,是一条稳妥的规则。

待机时各部位的运动幅度

对待机动画中的每条旋转时间轴,幅度是最大和最小关键帧数值之差;位移取 X、Y 两个方向幅度中较大的一个,单位与导出文件相同。以中位数为起点,需要更明显的动作时参考上四分位数(即第三四分位数):

待机动画的旋转幅度,单位:度
骨骼分类中位数(°)上四分位数(°)
腿(大腿、小腿、脚)1429
手臂(肩、前臂、手)1235
躯干(脊柱、胸)4.68
头部、颈部4.112
附属部件(头发、尾巴、布料)8.517
待机动画的位移幅度,单位:像素
骨骼分类中位数(px)上四分位数(px)
髋部6.916
躯干5.48
头2.911

静止感是由微小的动作组成的:几度、几个像素。走路时头动得很少(8.9°,腿是 79°);待机时躯干动得很少,所以头发这类轻的部件相比之下就很显眼。在spineboy/idle 里,头发转动 16.7°,躯干只有 3.8°。

循环要闭合,零时刻的关键帧确定起始姿势

在骨骼的旋转、位移、缩放和错切时间轴中,取关键帧不止一个、且最后一个关键帧在动画末尾的那些:85.5% 结束时的数值与开始时几乎相同。待机是循环动画:最后一个关键帧要重复第一个,否则每个循环的接缝处都会跳一下。

统计到的骨骼旋转、位移、缩放和错切时间轴中,约 86% 在零时刻有关键帧。没有它,这根骨骼可能在混合开始时受到上一段动画姿势的影响。只有一个关键帧的时间轴也是有效的用法——整个样本里有 872 条:它的意思是“在这段动画里保持这个值”。

曲线:比你想的少

排除各时间轴的最后一个关键帧后,统计结果为:53.2% 是线性,43.1% 是贝塞尔,3.7% 是阶梯(stepped)。把两个关键帧之间的区段归一化后,控制点坐标(cx1, cy1, cx2, cy2)各坐标的中位数为 (0.31, 0.00, 0.70, 1.00),对应一条起步和收尾较慢、中段较快的 S 形曲线。仅编辑器预设 (0.25, 0, 0.75, 1) 一种就占贝塞尔用法的 17.7%。

经验上,缓动用在应该显得有分量的部件上——躯干、头、手臂——快速的部件可以保持线性。放到待机里,就是呼吸的躯干加缓动,而每隔几帧打一次关键帧的闪烁用线性插值就很好。曲线在文件里怎么写,见Spine 4.2 JSON 中的贝塞尔曲线(英文);曲线转换工具(英文)可以把 CSS 缓动转换成这个数组。

错开各骨骼的关键帧时间

逐个动画统计不同的关键帧时刻组合,再将组合数相加,结果约为时间轴总数的 57%。关键帧集中在循环的开头、中间和结尾,其余地方几乎均匀分布——并没有“每隔四分之一个周期设置一个关键帧”的网格。owl/idle 的七片叶子周期都是 20 帧,却分处三个相位,分别错开 0、5 和 10 帧;windmill的树叶幅度保持不变,周期却浮动 10% 到 15%。所有骨骼都在同样的帧上打关键帧,会让整个角色同时停下、同时启动,往往显得很机械。

这些数字用在哪里

Riggy 的 AI 在打关键帧之前会先读这些规则作为参考,而不是凭空猜时长和幅度。示例页(英文)展示了结果:通过对话制作的骨骼动画,在 Spine 官方运行库中播放。怎么从分层 PSD 得到这样的动画,见AI 生成 Spine 骨骼动画。

用自己的美术做一个待机动画

注册,上传分层 PSD,描述哪里要动。

用自己的 PSD 做动画