跳到正文
动画3 分钟阅读GitHub ↗

Rive 文件出了问题,它自己不会吭声

.riv 是编译后的程序,不是图片。它能正常加载,却可能不响应点击、在循环接缝处跳一下,或者干脆毫无生气。我写了一个检查器,加上一套方法,在上线前把这些问题揪出来。

.riv 文件看起来像一张会动的图,其实是一段编译好的程序。程序出了错,往往一声不吭。

它能编译、能加载,第一次试也看不出毛病,里面却可能藏着一个没人读取的输入,你的应用传进去的值全都石沉大海;或者一个能进不能出的状态;或者一次直接跳到某个姿势、而不是过渡过去的切换;或者一个在接缝处跳一下的循环,因为最后一帧和第一帧对不上;又或者一个用角度写的旋转,而 Rive 要的是弧度,于是图标转了五十七圈。

这些都不会报错。所以我做了个东西,替文件把话说出来。

抓住不出声的问题

rive-animator 是我用代码写 Rive 的工具包,面向 AI 编程助手,也面向开发者。它先有一个检查器,在场景碰到生产代码之前就检查一遍,编译后的 .riv 也能读。RML011 标出声明了却没有任何条件或监听器读取的输入;RML012 标出切到某个姿势却没有混合的过渡,也就是会直接跳的那种;RML013 标出最后一个关键帧和第一个对不上的循环。另一组检查二进制文件:文件被截断、没有画板、没有图层、输入名重复。

检查器抓不到的,我就渲染出来看。回不去的状态只有点两下才会露馅,所以每个示例都在真实的 Rive 运行时里录制,由脚本像应用那样去推动输入。一共九个示例,从开关、点赞爱心到进度环和吉祥物。

会呼吸的吉祥物

问题的另一半,是文件明明能用,却毫无生气。所有部件同时运动,每个姿势都戛然而止,颜色直接切换而不是渐变,两个动作之间什么都不发生。

吉祥物是一只圆滚滚的珊瑚色小家伙,顶着一片嫩芽。不碰它,它就在呼吸,隔一会儿眨一下眼。光标进来,它的眼睛跟着走。点一下,它蹲下、跳起、开心地落地;光标离开时,它还会目送。

跳跃是主要动作,可真正让它像个活物的,是没人理它的时候它在做什么:呼吸、眨眼、四处看。我的规则是一个主要动作,加上永不停止的待机层。这套方法来自 rossark0 的动作 skill,我把它翻译成了 RML。

有个技术细节我解决得挺开心。Rive 会对每一段关键帧单独做缓动,所以一串姿势会在每个关键帧处停一下。我写了个脚本 motion_keys.py,把曲线写成让动作经过每个姿势时既不停顿也不过冲。

能加载的文件,不等于能用的文件。现在一个 .riv 我要先看它过了检查器,再亲眼看它动起来,才算数。仓库是开源的,用 MIT 许可证。