Back to Details

rive-animations

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Rive Animation Principles

Rive动画原则

Implement all 12 Disney animation principles using Rive's state machine and interactive animations.
使用Rive的状态机和交互式动画实现全部12条迪士尼动画原则。

1. Squash and Stretch

1. 挤压与拉伸

In Rive Editor:
  • Create shape with bones
  • Animate scale X/Y with inverse relationship
  • Key: 
    scaleX: 1.2
    when 
    scaleY: 0.8
javascript
// Trigger from code
rive.play('squash_stretch');
在Rive编辑器中：
  • 创建带骨骼的形状
  • 为X/Y轴缩放设置反向关联动画
  • 关键设置：当
    scaleY: 0.8
    时，
    scaleX: 1.2
javascript
// Trigger from code
rive.play('squash_stretch');

2. Anticipation

2. 预备动作

State Machine Setup:
  1. Create "Idle" state
  2. Create "Anticipate" state (wind-up pose)
  3. Create "Action" state
  4. Connect: Idle → Anticipate → Action
javascript
const inputs = rive.stateMachineInputs('State Machine');
const trigger = inputs.find(i => i.name === 'jump');
trigger.fire(); // Plays anticipate → action sequence
状态机设置：
  1. 创建“Idle”状态
  2. 创建“Anticipate”状态（蓄力姿势）
  3. 创建“Action”状态
  4. 连接：Idle → Anticipate → Action
javascript
const inputs = rive.stateMachineInputs('State Machine');
const trigger = inputs.find(i => i.name === 'jump');
trigger.fire(); // Plays anticipate → action sequence

3. Staging

3. 构图布局

In Rive:
  • Use artboard layers for depth
  • Apply blur/opacity to background layers
  • Use nested artboards for complex scenes
javascript
// Control visibility
const bgOpacity = inputs.find(i => i.name === 'bgOpacity');
bgOpacity.value = 0.6;
在Rive中：
  • 使用画板图层实现深度感
  • 为背景图层添加模糊/透明度效果
  • 使用嵌套画板构建复杂场景
javascript
// Control visibility
const bgOpacity = inputs.find(i => i.name === 'bgOpacity');
bgOpacity.value = 0.6;

4. Straight Ahead / Pose to Pose

4. 逐帧动画/关键帧动画

Pose to Pose in Rive:
  • Set key poses on timeline
  • Rive interpolates between
  • Use easing curves in Graph Editor
在Rive中实现关键帧动画：
  • 在时间轴上设置关键姿势
  • Rive会自动完成姿势间的插值过渡
  • 在图形编辑器中使用缓动曲线

5. Follow Through and Overlapping Action

5. 跟随动作与重叠动作

In Rive Editor:
  • Use bone hierarchy with constraints
  • Apply "delay" or "lag" to child bones
  • Or offset keyframes by 2-4 frames
  • Use spring constraints for natural follow-through
在Rive编辑器中：
  • 使用带约束的骨骼层级
  • 为子骨骼添加“延迟”或“滞后”效果
  • 或将关键帧偏移2-4帧
  • 使用弹簧约束实现自然的跟随动作

6. Slow In and Slow Out

6. 缓入缓出

In Rive Graph Editor:
  • Select keyframes
  • Apply easing: Cubic, Quad, Bounce
  • Adjust bezier handles for custom curves
javascript
// Runtime speed control
rive.play('animation', { speed: 0.5 });
在Rive图形编辑器中：
  • 选择关键帧
  • 应用缓动效果：Cubic、Quad、Bounce
  • 调整贝塞尔手柄实现自定义曲线
javascript
// Runtime speed control
rive.play('animation', { speed: 0.5 });

7. Arc

7. 弧线运动

In Rive:
  • Use IK (Inverse Kinematics) for natural arcs
  • Apply path constraints
  • Animate position with curved interpolation
在Rive中：
  • 使用IK（反向运动学）实现自然弧线
  • 应用路径约束
  • 为位置设置曲线插值动画

8. Secondary Action

8. 次要动作

State Machine approach:
javascript
// 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']);
状态机实现方式：
javascript
// 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. Timing

9. 时间节奏

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

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

// Slow - dramatic reveal
rive.play('reveal', { speed: 0.5 });
In Rive Editor:
  • Adjust animation duration
  • Use work area to fine-tune timing
  • Graph Editor for precise control
javascript
// Fast - snappy feedback
rive.play('click', { speed: 1.5 });

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

// Slow - dramatic reveal
rive.play('reveal', { speed: 0.5 });
在Rive编辑器中：
  • 调整动画时长
  • 使用工作区微调时间节奏
  • 通过图形编辑器实现精准控制

10. Exaggeration

10. 夸张

In Rive:
  • Push bone rotations beyond natural limits
  • Exaggerate scale transformations
  • Use elastic/bounce interpolation
  • Overshoot in Graph Editor curves
在Rive中：
  • 将骨骼旋转角度设置为超出自然极限的范围
  • 夸张缩放变换效果
  • 使用弹性/弹跳插值
  • 在图形编辑器曲线中设置过冲效果

11. Solid Drawing

11. 造型坚实

In Rive:
  • Use multiple bones for volume preservation
  • Apply constraints to maintain form
  • Use clipping for depth illusion
  • Layer shapes for 3D effect
在Rive中：
  • 使用多骨骼结构保持体积感
  • 应用约束维持造型
  • 使用裁剪效果营造深度错觉
  • 通过图层叠加实现3D效果

12. Appeal

12. 吸引力

Design in Rive:
  • Smooth bezier curves on shapes
  • Consistent stroke weights
  • Pleasing color palette
  • Clean bone structure
javascript
// Smooth hover interactions
const hover = inputs.find(i => i.name === 'isHovering');
element.addEventListener('mouseenter', () => hover.value = true);
element.addEventListener('mouseleave', () => hover.value = false);
在Rive中设计：
  • 为形状使用平滑的贝塞尔曲线
  • 保持统一的描边粗细
  • 采用舒适的配色方案
  • 构建简洁的骨骼结构
javascript
// Smooth hover interactions
const hover = inputs.find(i => i.name === 'isHovering');
element.addEventListener('mouseenter', () => hover.value = true);
element.addEventListener('mouseleave', () => hover.value = false);

React Implementation

React实现

jsx
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}
    />
  );
}
jsx
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}
    />
  );
}

Key Rive Features

Rive核心功能

  • State Machines - Logic-driven animation flow
  • Inputs - Boolean, Number, Trigger types
  • Blend States - Mix multiple animations
  • Listeners - Pointer events in editor
  • Constraints - IK, path, distance, rotation
  • Bones & Meshes - Skeletal animation
  • Runtime API - Full control from code
  • Tiny file size - Optimized binary format
  • State Machines - 由逻辑驱动的动画流程
  • Inputs - 布尔值、数值、触发类型
  • Blend States - 混合多个动画
  • Listeners - 编辑器中的指针事件
  • Constraints - IK、路径、距离、旋转约束
  • Bones & Meshes - 骨骼动画
  • Runtime API - 通过代码实现完全控制
  • 极小文件体积 - 优化的二进制格式