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 个动画图层，如下。

过渡条件如下。

2.1.3 运行效果

2.2 应用二

2.2.1 应用描述

如下，绘制两个圆形，当鼠标（或手指） 在大圆中移动时，小圆移至鼠标（或手指）位置。

2.2.2 实现方法

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

2.2.3 运行效果

声明：本文转自【Rive】动画。