跳到主要内容
中文系列课

动画播放（Animation Playback）

警告（Warning）：本页是旧版“直接播放线性动画”能力。新项目请用 State Machines。

旧体系概览​

过去可以直接指定动画并调用：

  • play
  • pause
  • stop
  • reset

也可在实例化阶段指定起始动画（animations / animationName 等）。

启动时指定动画（legacy）​

Web​

new rive.Rive({
  src: 'https://cdn.rive.app/animations/vehicles.riv',
  animations: 'idle',
  autoplay: true,
});

React​

<Rive src="https://cdn.rive.app/animations/vehicles.riv" animations="idle" />

React Native​

  • 新版：不支持“直接线性动画播放”，以状态机为主
  • Legacy：可用 animationName

运行时控制（legacy）​

Web / React​

rive.play('idle');
rive.pause('idle');
rive.stop('idle');

React Native（新版）​

新版 ref 控制的是状态机播放语义：

riveViewRef?.play();
riveViewRef?.pause();
riveViewRef?.reset();

Android / Apple（legacy）​

都提供 play/pause/stop/reset 及部分 loop/direction 控制。

为什么迁移到 State Machines​

直接动画控制的典型问题：

  1. 状态协同复杂，容易冲突
  2. 动画名耦合业务代码，改稿风险高
  3. 多动画混播可维护性差

State Machine + Data Binding 更适合长期维护。

迁移建议​

  • 线性动画入口 → 状态机状态
  • 播放条件 → 状态机过渡条件
  • 外部控制参数 → Data Binding 属性

相关：