【Rive】眼睛互动动画

1 前言

​ 本文基于 Rive 社区开放的眼睛动画，进一步加工处理，实现更有趣的眼睛互动动画。

​ 原始资源见 → Eye Joysticks Demo，效果如下。

​ 原始资源只有一只眼睛，并且没有事件交互，动画比较单一。本文在该资源的基础上进行了以下修改。

• 绘制两只眼睛；
• 无事件时，眼睛在微眯和张开之间循环动画；
• 移动鼠标（或手指）时，眼睛看向鼠标（或手指）位置；
• 鼠标（或手指）移至眼睛附近时，眼睛聚焦，眼睛和瞳孔逐渐变小；鼠标（或手指）远离眼睛时，眼睛和瞳孔逐渐恢复原来大小；
• 单击背景时，眨下眼（逐渐闭眼，然后逐渐张开，再逐渐微眯，再张开）；
• 单击背景或鼠标（或手指）离开背景区域时，眼睛恢复到中间位置。

2 眼睛动画

​ 本节只展示 Rive Editor 中的案例实现步骤，Rive 在 Android 中的环境配置详见 → Rive在Android上的简单应用。本节完整资源详见 → Android中基于Rive实现眼睛互动动画。

​ 1）对象层级结构

​ 2）时间线、输入变量、监听器

​ 说明：Scale_Small、Trans 里只有一帧。

​ 3）状态机

​ 说明：Blink_Idle_Large→Blink_Large_Idle、Blink_Large_Idle→Blink_Idle_Large、Blink→Blink_Large_Idle 的 Exit Time 都设置为 100%，表示左边的动画执行完后才能扭转到右边的状态，不能被打断；Blink_Idle_Large→Scale_Small、Blink_Large_Idle→Scale_Small、Scale_Small→Blink_Idle_Large、Blink→Blink_Large_Idle 的过渡时长（Duration）分别为 500ms、500ms、300ms、200ms；None→Trans(Trans)、None→Trans(Blink) 的过渡时长（Duration）分别为 800ms、350ms。

​ 4）插值器变换

​ Blink 时间线中，在眼睛张开到最大后补了一些关键帧：渐变到微眯，再渐变到最大，在张开到最大和微眯时插值器曲线是对称的。假设插值器 A 的贝塞尔参数为 (x1, y1, x2, y2)，则对称的插值器为：(1 - x2, 1 - y2, 1 - x1, 1 - y1)。

​ 5）运行效果

​ 浅色模式运行效果如下。

​ 深色模式运行效果如下。

​ 声明：本文转自【Rive】眼睛互动动画。