【Rive】动画

1 动画基础概念

​ Rive 编辑器为用户提供了动画状态机、时间线、输入变量、事件监听器、动画图层等工具(如下图),方便用户控制动画交互。

img

1.1 时间线

​ 时间线用于编辑动画对象在每个关键帧的状态参数,如:物体 A 从 x 位置平移到 y 位置的动画,可以在时间线的首帧设置 A 的位置为 x,尾帧设置 A 的位置为 y。

1)创建时间线

img

​ 鼠标双击创建的时间线,可以重命名时间线。

2)添加动画参数

​ 在动画模式下,选中需要做动画的对象,在右侧的检视器窗口中,点击需要做动画的属性后面的小菱形,使其变成蓝色。

img

​ 在动画窗口可以看到添加的动画参数,如下。

img

3)添加关键帧

​ 移动当前预览的时间位置,并修改动画参数(或者在监视器窗口修改动画对象的动画参数),我们会发现时间线上多了个小菱形,表示新建了一个关键帧。

img

4)插值器

​ 插值器用于调整动画参数随时间的变化速度。选中时间线上的小菱形,在右侧窗口选择插值曲线,如果选择 S 形曲线(贝塞尔曲线,详见 → 贝塞尔曲线原理),可以通过拖动上下两个手柄控制插值曲线的线形,也可以在右下角直接输入贝塞尔曲线的参数值。

img

​ 通过以下方式也可以调整插值曲线,并且可以直接在时间线上移动关键帧的位置。

img

5)播放动画

​ 点击三角形(▶)按钮,即可播放动画。

img

​ 用户也可以设置只播放一次(One Shot)、循环播放(Loop)、来回循环播放(Ping Pong) ,还可以设置动画播放的时间区间(Work Area)。

img

​ 切换不同的播放方式,时间线前面的图标也会相应发生变化。

img

1.2 状态机

​ 状态机用于控制动画的转换逻辑,Rive 中可以创建多个状态机,双击创建的状态机,可以重命名状态机。每个状态机里可以包含多个动画图层,动画图层里有一些动画状态节点(即时间线),这些动画状态节点间可以通过连线连接起来,表示动画的状态切换流程。

1)创建动画图层

​ 每个状态机里可以创建多个动画图层,双击创建的动画图层,可以重命名动画图层。

img

2)添加动画节点

​ 拖拽左侧的时间线到动画图层中,即可添加动画节点。

img

​ 也可以在动画图层窗口右键,在弹出的菜单里选择【Add State】。

img

​ 再选中创建的动画状态,在右侧窗口选择对应的时间线。

img

3)添加动画过渡

​ 连接 2 个动画状态,表示两个动画状态间可以扭转。将鼠标移至 A 状态附近,出现小圆点后按下鼠标拖至 B 状态,就会出现一条 A 指向 B 的连接线。

img

​ 说明:两个状态间可以相互扭转,同一个方向也可以设置多条连线。“>”、“< >”、“>>” 分别表示单向、双向、多个并列条件(每个条件间是 “或” 关系)。

4)设置过渡参数

​ 选中动画过渡连接线,在右侧窗口可以配置动画过渡的参数。

img

  • 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)初始节点

img

​ 初始节点只能是 Entry 或 Any State 节点,它们的区别如下。

  • Entry: 一旦进入了 Entry 的一个子节点,将无法进入 Entry 的其他子节点,除非这些子节点间有连接线。
  • Any State: 当动画状态处于 Any State 的某个子节点(假设为 A 节点)时,只要满足 Any State 节点到其他子节点(假设为 B 节点)的过渡条件,就可以切换至 B 节点,即使 A 节点到 B 节点间没有连接线。

1.3 过度条件

1)创建输入变量

​ 动画过渡条件中会使用到输入变量,输入变量包含:Number、Boolean、Trigger 三种类型。 双击创建好的变量,可以重命名变量。

img

  • Number: 数字类型,对应 Java 中的 float 类型,但是它只保留 2 位有效数字。
  • Boolean: 布尔类型。
  • Trigger: 触发器,与 Boolean 类型不同的是:它没有状态值,当动画过渡条件设置为触发器时,只要触发了事件就会满足过渡条件,不会比较状态值。

2)设置过渡条件

​ 选中过渡箭头,点击右侧窗口 Conditions 栏的 “+” 号,可以创建一个过渡条件,点击多次 “+” 号,可以创建多个过渡条件,这些条件同时满足,才满足动画的最终的过渡条件,即这些条件是 “与” 关系,如果想创建 “或” 关系的条件,可以在两个动画状态间连接多条线,这时连接线上会出现 “<<” 或 “>>” 符号。

img

​ 补充:Number 类型过渡条件可以设置等于 (==)、不等于 (!=) 、小于等于 (<=)、大于等于 (>=)、小于 (<)、大于 (>) 某个值,Boolean 类型过渡条件可以设置 true 或 false 值。

1.4 事件监听器

1)创建监听器

​ 点击 Listeners 后面的 “+” 号,就可以创建事件监听器,双击创建的监听器,可以重命名监听器。

img

2)绑定监听对象

​ 选中监听器,在右侧窗口选择绑定对象。在创建监听器时,如果已经选中了监听对象,会自动绑定到该对象。

img

3)选择监听事件类型

​ 监听的事件类型主要有:Pointer Enter(鼠标进入)、Pointer Exit(鼠标退出)、Pointer Down(按下)、Pointer Up(抬起)、Pointer Move(鼠标移动)、Click(点击)。

img

4)添加事件响应

img

​ 事件的响应类型主要有 Input Change、Align Target、Report Event,它们的区别如下。

  • Input Change: 当事件响应时,可以修改输入变量的值,从而使得某个动画的过渡条件通过。
  • Align Target: 当事件响应时,可以修改某个对象的 position,使其移到鼠标位置。
  • Report Event: 当事件响应时,可以抛出一个事件,这个事件可以被其他系统或脚本监听,以执行特定的操作。

img

2 应用

​ 本节只展示 Rive Editor 中的案例实现步骤,Rive 在 Android 中的环境配置详见 → Rive在Android上的简单应用

2.1 应用一

2.1.1 应用描述

​ 如下,绘制一个五角星和一个圆形,当鼠标(或手指) 进入圆形时,五角星顺时针旋转 1 圈;当鼠标(或手指) 离开圆形时,五角星逆时针旋转 1 圈;点击圆形时,五角星开始周期性放大缩小;再点击圆形时,五角星缩放回原来的大小,并停止缩放。

img

2.1.2 实现方法

1)创建时间线、输入变量、事件监听器

img

​ ①时间线说明: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 个动画图层,如下。

img

​ 过渡条件如下。

过渡 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 运行效果

img

2.2 应用二

2.2.1 应用描述

​ 如下,绘制两个圆形,当鼠标(或手指) 在大圆中移动时,小圆移至鼠标(或手指)位置。

img

2.2.2 实现方法

​ 给大圆创建事件监听器,如下,事件响应设为 Align Target,Target 设为小圆。

img

2.2.3 运行效果

img

声明:本文转自【Rive】动画

posted @   little_fat_sheep  阅读(70)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· [翻译] 为什么 Tracebit 用 C# 开发
· Deepseek官网太卡,教你白嫖阿里云的Deepseek-R1满血版
· 2分钟学会 DeepSeek API,竟然比官方更好用!
· .NET 使用 DeepSeek R1 开发智能 AI 客户端
· 刚刚!百度搜索“换脑”引爆AI圈,正式接入DeepSeek R1满血版
点击右上角即可分享
微信分享提示