Using – Rive

Rive 是一款基于(Flutter)Web 的动画工具,可以制作流畅的60FPS矢量动画,动画体积小并可跨平台运行,还拥有协作功能。你可以先到他们的社区看看那些惊艳的动画。

目前为 Beta 0.6.3 版本。

现在的 Rive 按照开发者的说法其实是 Rive 2,至于 1 在哪里发生了什么不得而知,2 是在8个月前开始迭代,也就是现在的版本。


Rive 整体分为两个部分,Design 和 Animate:

和 Figma 类似,先在 Design 里做设计,然后在 Animate 里的时间轴做关键帧调节,但两者实际并不相关。Design 里的图形像是坐标、填充描边等属性在 Animate 里依然可以更改,并相应生成关键帧。这么一看,Design 状态更像是不自动记录关键帧的元素增删改,位置甚至都可以随心所欲的放置。

下面是菜单结构,所有的都在这里了,很简单。

而我就是被这个简单菜单的第一印象“迷惑”了,以为还是个非常早期的版本,各个方面都不完善。虽然这话放在现在也没错,但是现在已经能实现强大的动画效果了。

目前主要的功能都集中在第三排菜单,构建矢量图形与骨骼。其他功能都分散到右边的属性选择器里,包括位置坐标、缩放、旋转、填充、描边、蒙版、图层顺序、路径跟踪。以及路径编辑状态中重要的骨骼绑定功能。

(Reverse Direction :来自于一些字体设计应用里,用于标注路径起点,Reverse 就可以反向路径、首尾互换。)

下面介绍几个功能。

Trim Path

Trim Path 功能隐藏在描边(Strokes)设置里,如图:

Trim Path 的开启选择可为两种,序列模式(Sequential)和同步模式(Synced)。两项均为控制多条描边时的选项,控制一条描边时都是一样的效果。可以详见官网说明

剩下的 Start、End 和 Offset 是比较熟悉的路径跟踪效果常用参数,不多说。

动画时间轴

你在 Rive 里设计花的时间绝不会比动画要多,其简单的工具致使我们一般会在其他工具里完成(矢量)设计工作,然后拖到 Rive 里进行优雅的动画设计。

首先要说的是,Rive 里元素的图层结构和一般的应用不一样,非单层结构,而是像 C4D 那样的多层图层,嵌套在最外面的属性层不可取消分组,实际的操作都是针对内部的对象。比如图中的 Custom Shape 被定义了 2px 宽的白色描边,那么之后再往里面添加的形状也都会是这个属性。

到了动画里样式变化产生的关键帧,作为最外面的属性分组依然会向下分配所有关键帧属性,内部对象的其他单独关键帧则会独立显示:

再加上关键帧实际着陆的地方还是对象的属性,就导致这样一层嵌套一层的非常凌乱。对比 Ae 中同样都是属性关键帧,但是 Ae 有着非常统一的结构,这种统一带来了后续使用上的节奏感而不会拖慢生产速度。Rive 这里的树状图显然是“一树多用”。

就像大多数动画应有都有的,Rive 可以快捷设置内容区域(Work Area),并对区域内容设定是单次播放(One Shoot)、循环播放(Loop)还是往复播放(Ping Pong),播放速度默认 1 倍速 60 FPS,这些都可以自定义。

只靠这些就可以完成一个基本可在 runtime 里运行的动画。重点是后面的这个多个动画与状态机。

状态机

一般来说对动画进行分层应该是有状态/流程上判断的需求,否则在一个动画组做就好了,当然不排除要做多个动画方案拿给上级/客户选择的情况。状态机就是负责连接各个动画分组用的功能,此功能开发者在 Twitter 上预告已久,在初写此文时是 0.5.X 版本末期,后来写着写着更新到 0.6.X 时便实装了状态机功能。不过非常遗憾的是目前状态机 BUG 不少……比如复现同一流程有时就会直接 Crash:

此时就需要断掉之前的流程节点,重新连线。否则每次按下 Play 都会 Crash(还在 web app 都会自动保存)。

正常流程下是,先在最左边建立一个状态机,然后到右边新建状态层(Layers),最后在 Inputs 里新建各种状态变量来控制动画流程。

不过我也没搞明白新建一个状态机后建立多个 Layers 和新建多个状态机每个状态机一个 Layer 有什么区别,官方文档里也只字未提……先不管这个,状态变量里目前只有三种,布尔(Boolean)、数值(Number)和触发器(Trigger)。布尔值就是 True 和 False,数值负责做数值上的对比(==, !=, >=, <=),触发器是点击右侧圆圈区域触发,属于按下和抬起两个状态(当然变量这里是不分这个状态的)。

建立后的变量是为了加入流程中的条件判断(Conditions),如图:

你可能会认为这个流程是开始(Entry)后,先播放 MOVE 动画循环,条件满足后就会播放 COLOR 动画循环。但事实是 MOVE 和 COLOR 是按照条件处于同一层级被判断的。比如上图中我定义的向右箭头不是 Trigger 而是 Boolean 值为 True ,然后 Inputs 那边勾选上 Boolean 的 Checkbox,此时流程会略过 MOVE 而直接播放 COLOR 动画,随后 Boolean 值变为 False 后(向左箭头设置)切换为 MOVE 动画。

顺便一提 Conditions 是可以叠加多个变量判断的,当然 Crash 几率也大大增加了……希望开发者之后能优化下报错系统以及上面提到的节点顺序的表达。

要注意的是,状态机只做判断,不做合成。只做“串联”,不做“并联”。其他的像这个 Any State 节点就不知道完全干嘛的,右键点了 Add State 也没反应,官方文档依然没有提及。等待之后的更新吧。

骨骼

骨骼说是 Rive 的核心功能也不为过,根据官方文档的介绍,它能实现的远不止传统的角色控制功能。

来自 Rive 社区
来自 Rive 社区

在使用 Rive 的骨骼功能之前,为了“巩固下”自己以往的无知,我特意下载了 Dragon Bones 这款知名 2D 动画软件看看里面骨骼的使用方法。

从 Dragon Bones 官方的骨骼动画示例可以看到,除了要连接上复杂的“骨骼经络”外,剩下的基本就是控制骨骼的坐标(移动)、旋转角度和缩放。由于都是位图,所以无法像 Rive 一样控制矢量图形的锚点—— Rive 的骨骼功能最核心之处。而这样灵活的操作其实需要打破以往对骨骼的认知,或者说,要重新了解 RIve 的骨骼本质是什么。不去认识到本质的话会永远停留在需求套用功能的阶段,这也是我认为 Rive 里学习成本最高的地方。

图为官方文档里用骨骼实现类似3D的翻转效果
图为官方文档里用骨骼实现类似3D的翻转效果

下图是 Rive 里的基本骨骼(Root Bone)结构,和以往一样,起始点粗壮的根部一端控制全局的坐标和旋转量,绿色轴线上的方块负责(非线性按比例的)控制骨骼长度、粉色方块负责控制下一节骨骼的旋转曲率(默认是正圆),并会改变下一节末端的矢量信息,实际上可以看做把下一节骨骼绕画板的 X 轴旋转。稍细的末端粉绿色箭头也是移动功能,只不过也会线性地影响上一节骨骼长度。

说的可能有点复杂、实际试试就清晰了
说的可能有点复杂、实际试试就清晰了

当然多节骨骼也是支持的。

在 Rive 里骨骼的实际用法大多用于绑定使用(Bind Bones),可以绑定锚点和曲线的控制点。然后通过完全控制骨骼来影响内容。如下图这种:

注:此为30FPS的GIF
注:此为30FPS的GIF

这里设定了四个独立的骨骼去绑定圆形的四个顶点及其控制点。

控制的方法在右侧:

虽然图里一个圆的 12 个点由四个骨骼控制,但其实一个路径任意锚点绑定一个骨骼后,整个路径都会按照 100% 强度绑在那个骨骼上,无法设置为 0%。只有绑定两个骨骼的时候,一个强度调至 0%,另一个才会升到 100%,数值两者互补,是相对的。

然后就是控制基本骨骼的根部去控制锚点,从而产生千奇百怪的图形。

比如官方这个翻页效果示例中,其骨骼控制是这样安排的:

现有的骨骼系统缺憾在于无法实行完全的可视化,操作骨骼时看不到路径锚点的移动,选中锚点时又无法操作骨骼。骨骼本身的活动范围也没有呈现,大部分时候都是只能像选择图层混合模式一样不断地“试试”。所以就个人而言,我只能把 RIve 的骨骼归类到锚点控制器一类功能中,再往上开发,还有待挖掘。

其他

这一节用来谈谈 Rive 的不足之处。

首先上边我没有提 Draw Order 这个功能,这个功能可以便捷的改变图层叠放顺序,相当于 3D 空间的 z 值改变(也可以说是 CSS 中的 z-index)。我觉得它是比较能代表 Rive 目前的核心问题的一处,就是元素的逻辑关联性。

用过 PS 的都知道元素按图层、通道划分,至此才能精准的上手其他 Sketch、Figma 等设计类应用;Principle 的 Drivers 是以页面位移距离为驱动的动画逻辑关联性,以此形成清晰的轴线;AE、PR 是时间轴与层级上的逻辑关联;MagicaVoxel 的话则是以体素颜色来做关联……但是在 Rive 里就缺少这种可以把控整体逻辑的地方。无论是在左侧毫无章法的树状图结构还是动画里的时间轴,它们都不是信息集中的重点,而只是生产中的一环,生产中的各个信息关联没有得到足够的可视化提现。

就像上面介绍的 Draw Order 功能一样,既然图层是可以靠这个来改变,那树状图还有何用?或者为何不彻底放开 3D 空间?总之目前的混乱是无疑会产生不必要成本的。

还有一些诸如不支持中文命名、SVG 导入样式不兼容等问题,这里也不一一细谈,相信最后会迭代解决掉的。Runtime 那边的事我不太懂所以很抱歉本文也不会涉及。但总之 Rive 比起一些像是 Lottie 的前辈,体验要好上不少。

发表评论

Fill in your details below or click an icon to log in:

WordPress.com 徽标

您正在使用您的 WordPress.com 账号评论。 注销 /  更改 )

Google photo

您正在使用您的 Google 账号评论。 注销 /  更改 )

Twitter picture

您正在使用您的 Twitter 账号评论。 注销 /  更改 )

Facebook photo

您正在使用您的 Facebook 账号评论。 注销 /  更改 )

Connecting to %s

这个站点使用 Akismet 来减少垃圾评论。了解你的评论数据如何被处理

%d 博主赞过:
search previous next tag category expand menu location phone mail time cart zoom edit close