【Rive】动画
1 动画基础概念
Rive 编辑器为用户提供了动画状态机、时间线、输入变量、事件监听器、动画图层等工具(如下图),方便用户控制动画交互。
1.1 时间线
时间线用于编辑动画对象在每个关键帧的状态参数,如:物体 A 从 x 位置平移到 y 位置的动画,可以在时间线的首帧设置 A 的位置为 x,尾帧设置 A 的位置为 y。
1)创建时间线
鼠标双击创建的时间线,可以重命名时间线。
2)添加动画参数
在动画模式下,选中需要做动画的对象,在右侧的检视器窗口中,点击需要做动画的属性后面的小菱形,使其变成蓝色。
在动画窗口可以看到添加的动画参数,如下。
3)添加关键帧
移动当前预览的时间位置,并修改动画参数(或者在监视器窗口修改动画对象的动画参数),我们会发现时间线上多了个小菱形,表示新建了一个关键帧。
4)插值器
插值器用于调整动画参数随时间的变化速度。选中时间线上的小菱形,在右侧窗口选择插值曲线,如果选择 S 形曲线(贝塞尔曲线,详见 → 贝塞尔曲线原理),可以通过拖动上下两个手柄控制插值曲线的线形,也可以在右下角直接输入贝塞尔曲线的参数值。
通过以下方式也可以调整插值曲线,并且可以直接在时间线上移动关键帧的位置。
5)播放动画
点击三角形(▶)按钮,即可播放动画。
用户也可以设置只播放一次(One Shot)、循环播放(Loop)、来回循环播放(Ping Pong) ,还可以设置动画播放的时间区间(Work Area)。
切换不同的播放方式,时间线前面的图标也会相应发生变化。
1.2 状态机
状态机用于控制动画的转换逻辑,Rive 中可以创建多个状态机,双击创建的状态机,可以重命名状态机。每个状态机里可以包含多个动画图层,动画图层里有一些动画状态节点(即时间线),这些动画状态节点间可以通过连线连接起来,表示动画的状态切换流程。
1)创建动画图层
每个状态机里可以创建多个动画图层,双击创建的动画图层,可以重命名动画图层。
2)添加动画节点
拖拽左侧的时间线到动画图层中,即可添加动画节点。
也可以在动画图层窗口右键,在弹出的菜单里选择【Add State】。
再选中创建的动画状态,在右侧窗口选择对应的时间线。
3)添加动画过渡
连接 2 个动画状态,表示两个动画状态间可以扭转。将鼠标移至 A 状态附近,出现小圆点后按下鼠标拖至 B 状态,就会出现一条 A 指向 B 的连接线。
说明:两个状态间可以相互扭转,同一个方向也可以设置多条连线。“>”、“< >”、“>>” 分别表示单向、双向、多个并列条件(每个条件间是 “或” 关系)。
4)设置过渡参数
选中动画过渡连接线,在右侧窗口可以配置动画过渡的参数。
- Duration: 动画 A 结束后到动画 B 开始时的过渡时长,中间会进行插值动画,也可以设置插值器(默认线性插值),Duration 取 0 表示 A 动画结束后,会立刻执行 B 动画。
- Exit Time: 如果不勾选,表示当过渡条件满足时,会立刻扭转到下一个状态,即使当前动画只执行一半;如果勾选,表示当过渡条件满足时,过 xxx ms(或当前动画执行到 xxx%)会立刻扭转到下一个状态,即使当前动画只执行一半;如果不希望当前动画被打断,可以设置 Exit Time 为 100%。
- Pause source when exiting: 当前动画结束时是否暂停当前动画。
- Allow exit duration transition: 过渡过程中,如果满足其他过渡条件,是否结束过渡动画。
说明:过渡条件在 1.3 节会单独介绍。
5)初始节点
初始节点只能是 Entry 或 Any State 节点,它们的区别如下。
- Entry: 一旦进入了 Entry 的一个子节点,将无法进入 Entry 的其他子节点,除非这些子节点间有连接线。
- Any State: 当动画状态处于 Any State 的某个子节点(假设为 A 节点)时,只要满足 Any State 节点到其他子节点(假设为 B 节点)的过渡条件,就可以切换至 B 节点,即使 A 节点到 B 节点间没有连接线。
1.3 过度条件
1)创建输入变量
动画过渡条件中会使用到输入变量,输入变量包含:Number、Boolean、Trigger 三种类型。 双击创建好的变量,可以重命名变量。
- Number: 数字类型,对应 Java 中的 float 类型,但是它只保留 2 位有效数字。
- Boolean: 布尔类型。
- Trigger: 触发器,与 Boolean 类型不同的是:它没有状态值,当动画过渡条件设置为触发器时,只要触发了事件就会满足过渡条件,不会比较状态值。
2)设置过渡条件
选中过渡箭头,点击右侧窗口 Conditions 栏的 “+” 号,可以创建一个过渡条件,点击多次 “+” 号,可以创建多个过渡条件,这些条件同时满足,才满足动画的最终的过渡条件,即这些条件是 “与” 关系,如果想创建 “或” 关系的条件,可以在两个动画状态间连接多条线,这时连接线上会出现 “<<” 或 “>>” 符号。
补充:Number 类型过渡条件可以设置等于 (==)、不等于 (!=) 、小于等于 (<=)、大于等于 (>=)、小于 (<)、大于 (>) 某个值,Boolean 类型过渡条件可以设置 true 或 false 值。
1.4 事件监听器
1)创建监听器
点击 Listeners 后面的 “+” 号,就可以创建事件监听器,双击创建的监听器,可以重命名监听器。
2)绑定监听对象
选中监听器,在右侧窗口选择绑定对象。在创建监听器时,如果已经选中了监听对象,会自动绑定到该对象。
3)选择监听事件类型
监听的事件类型主要有:Pointer Enter(鼠标进入)、Pointer Exit(鼠标退出)、Pointer Down(按下)、Pointer Up(抬起)、Pointer Move(鼠标移动)、Click(点击)。
4)添加事件响应
事件的响应类型主要有 Input Change、Align Target、Report Event,它们的区别如下。
- Input Change: 当事件响应时,可以修改输入变量的值,从而使得某个动画的过渡条件通过。
- Align Target: 当事件响应时,可以修改某个对象的 position,使其移到鼠标位置。
- Report Event: 当事件响应时,可以抛出一个事件,这个事件可以被其他系统或脚本监听,以执行特定的操作。
2 应用
本节只展示 Rive Editor 中的案例实现步骤,Rive 在 Android 中的环境配置详见 → Rive在Android上的简单应用。
2.1 应用一
2.1.1 应用描述
如下,绘制一个五角星和一个圆形,当鼠标(或手指) 进入圆形时,五角星顺时针旋转 1 圈;当鼠标(或手指) 离开圆形时,五角星逆时针旋转 1 圈;点击圆形时,五角星开始周期性放大缩小;再点击圆形时,五角星缩放回原来的大小,并停止缩放。
2.1.2 实现方法
1)创建时间线、输入变量、事件监听器
①时间线说明:RotateIdle、Rotate_P、Rotate_N 都只对旋转参数做动画,RotateIdle 里只有一帧,旋转值为 0,Rotate_P 是正向旋转一周,Rotate_P 是逆向旋转一周;ScaleIdle 和 Scale 都只对旋转参数做动画,ScaleIdle 里只有一帧,缩放值为 100%,Scale 里有 4 个关键帧,缩放值分别为 100%、150%、100%、67%,并设置为 Loop。
②输入变量说明:Trigger_Entered、Trigger_Exited、Trigger_Clicked 都是触发器,分别在鼠标(或手指)进入、离开、点击圆形时激活。
③事件监听器说明:Listener_Enter 监听了 Pointer Enter 事件,事件响应时会激活 Trigger_Entered 触发器;Listener_Exit 监听了 Pointer Exit 事件,事件响应时会激活 Trigger_Exited 触发器;Listener_Clicked 监听了 Click 事件,事件响应时会激活 Trigger_Clicked 触发器。
2)动画图层
由于旋转和缩放是相互独立的,可以并行融合,因此需要创建 2 个动画图层,如下。
过渡条件如下。
过渡 | Duration | Exit Time | Conditions |
---|---|---|---|
RotateIdle→Rotate_P | 0ms | —— | Trigger_Entered |
RotateIdle→Rotate_N | Trigger_Exited | ||
Rotate_P→RotateIdle | 0ms | 100% | —— |
Rotate_N→RotateIdle | |||
Rotate_N→Rotate_P | 300ms | 35% | Trigger_Entered |
Rotate_P→Rotate_N | Trigger_Exited | ||
ScaleIdle→Scale | 0ms | —— | Trigger_Clicked |
Scale→ScaleIdle |
2.1.3 运行效果
2.2 应用二
2.2.1 应用描述
如下,绘制两个圆形,当鼠标(或手指) 在大圆中移动时,小圆移至鼠标(或手指)位置。
2.2.2 实现方法
给大圆创建事件监听器,如下,事件响应设为 Align Target,Target 设为小圆。
2.2.3 运行效果
声明:本文转自【Rive】动画。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· [翻译] 为什么 Tracebit 用 C# 开发
· Deepseek官网太卡,教你白嫖阿里云的Deepseek-R1满血版
· 2分钟学会 DeepSeek API,竟然比官方更好用!
· .NET 使用 DeepSeek R1 开发智能 AI 客户端
· 刚刚!百度搜索“换脑”引爆AI圈,正式接入DeepSeek R1满血版