rive-animations

Rive 动画原理

使用 Rive 的状态机和交互式动画实现迪士尼动画的全部 12 条原则。

1. 挤压与拉伸

在 Rive Editor 中：

• 创建带骨骼的形状
• 以反向关系对 X/Y 轴缩放进行动画处理
• 关键点：当 scaleY: 0.8 时，scaleX: 1.2

// Trigger from code
rive.play('squash_stretch');

2. 预备动作

状态机设置：

1. 创建“Idle”状态
2. 创建“Anticipate”状态（预备姿势）
3. 创建“Action”状态
4. 连接：Idle → Anticipate → Action

const inputs = rive.stateMachineInputs('State Machine');
const trigger = inputs.find(i => i.name === 'jump');
trigger.fire(); // Plays anticipate → action sequence

3. 演出布局

在 Rive 中：

• 使用画板图层营造深度
• 对背景图层应用模糊/不透明度
• 使用嵌套画板构建复杂场景

// Control visibility
const bgOpacity = inputs.find(i => i.name === 'bgOpacity');
bgOpacity.value = 0.6;

4. 逐帧动画 / 姿势到姿势

在 Rive 中制作姿势到姿势动画：

• 在时间轴上设置关键姿势
• Rive 会在姿势之间进行插值
• 在 Graph Editor 中使用缓动曲线

5. 跟随动作与重叠动作

在 Rive Editor 中：

• 使用带约束的骨骼层级
• 为子骨骼应用“delay”或“lag”
• 或将关键帧错开 2-4 帧
• 使用弹簧约束实现自然的跟随动作

6. 慢入与慢出

在 Rive Graph Editor 中：

• 选择关键帧
• 应用缓动：Cubic、Quad、Bounce
• 调整贝塞尔控制柄以自定义曲线

// Runtime speed control
rive.play('animation', { speed: 0.5 });

7. 弧线运动

在 Rive 中：

• 使用 IK（反向运动学）实现自然的弧线运动
• 应用路径约束
• 使用曲线插值对位置进行动画处理

8. 次要动作

状态机方法：

// Listen for state changes
rive.on('statechange', (event) => {
  if (event.data.includes('button_press')) {
    // Secondary animations auto-trigger via state machine
  }
});

// Or blend multiple animations
rive.play(['main_action', 'secondary_particles']);

9. 时间掌控

// Fast - snappy feedback
rive.play('click', { speed: 1.5 });

// Normal
rive.play('hover');

// Slow - dramatic reveal
rive.play('reveal', { speed: 0.5 });

在 Rive Editor 中：

• 调整动画时长
• 使用工作区域微调时间
• 使用 Graph Editor 进行精确控制

10. 夸张

在 Rive 中：

• 将骨骼旋转幅度推至超出自然范围
• 夸大缩放变换
• 使用弹性/弹跳插值
• 在 Graph Editor 曲线中添加过冲

11. 扎实绘图

在 Rive 中：

• 使用多个骨骼保持体积
• 应用约束以保持形态
• 使用剪裁营造深度错觉
• 通过形状分层实现 3D 效果

12. 吸引力

在 Rive 中设计：

• 为形状使用平滑的贝塞尔曲线
• 保持描边宽度一致
• 选择协调的配色方案
• 保持骨骼结构简洁

// Smooth hover interactions
const hover = inputs.find(i => i.name === 'isHovering');
element.addEventListener('mouseenter', () => hover.value = true);
element.addEventListener('mouseleave', () => hover.value = false);

React 实现

import { useRive, useStateMachineInput } from '@rive-app/react-canvas';

function AnimatedButton() {
  const { rive, RiveComponent } = useRive({
    src: 'button.riv',
    stateMachines: 'Button',
    autoplay: true
  });

  const hoverInput = useStateMachineInput(rive, 'Button', 'isHovering');

  return (
    <RiveComponent
      onMouseEnter={() => hoverInput.value = true}
      onMouseLeave={() => hoverInput.value = false}
    />
  );
}

Rive 主要功能

• 状态机 - 由逻辑驱动的动画流程
• 输入 - 布尔值、数字、触发器类型
• 混合状态 - 混合多个动画
• 监听器 - 编辑器中的指针事件
• 约束 - IK、路径、距离、旋转
• 骨骼与网格 - 骨骼动画
• 运行时 API - 通过代码全面控制
• 文件体积小 - 经过优化的二进制格式