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】眼睛互动动画。