动画播放

⚠️ 弃用通知： 本页面全部内容记录的是旧版动画播放系统。对于新项目： 请改用状态机。对于现有项目： 请尽快规划从直接动画控制迁移到状态机。此内容仅供旧版支持参考。

Rive 允许您指定要混合播放哪些动画和状态机，并控制每个动画的播放/暂停状态。

术语「动画」可能同时指动画和状态机。在本节中，我们探讨如何处理特定的动画播放，而非状态机。

如果您想在运行时协调多个动画的播放，请考虑使用状态机来替您完成！

选择起始动画

起始动画也可以在 Rive 实例化时选择。如果未提供动画，则可能播放画板上的第一个动画，或者如果设置了状态机则不播放动画。

新版运行时（推荐）

新版运行时仅支持状态机播放，不支持直接动画播放。

旧版运行时

目前，在 React Native 运行时中，您可以设置一个动画在开始时自动播放。尽管如此，请参见下面的播放控制部分，了解如何在播放函数中混合多个动画。

export default function App() {
  return (
    <View>
      <Rive
        resourceName="truck_v7"
        artboardName="Jeep"
        autoplay
        animationName="idle"
      />
    </View>
  );
}

控制播放

每个动画和状态机的播放可以单独控制。您可以使用 play、pause 和 stop 方法播放和暂停播放，可以传入要影响的动画名称，也可以不传参数（将影响所有实例化的动画）。

新版运行时（推荐）

调用播放控制

新版运行时使用 useRive hook 访问 Rive 实例来控制播放：play、pause、reset。

export default function PlaybackExample() {
  const { riveViewRef, setHybridRef } = useRive();
  const { riveFile } = useRiveFile(require('../../assets/rive/rewards.riv'));

  const play = () => {
    riveViewRef?.play();
  };

  const pause = () => {
    riveViewRef?.pause();
  };

  const reset = () => {
    riveViewRef?.reset();
  };

  return (
    <View style={styles.container}>
      <View style={styles.riveContainer}>
        {riveFile ? (
          <RiveView
            file={riveFile}
            hybridRef={setHybridRef}
            autoPlay={true} // 自动启动状态机
            style={styles.rive}
          />
        ) : null}
      </View>
      <Button onPress={play} title="Play" />
      <Button onPress={pause} title="Pause" />
      <Button onPress={reset} title="Reset" />
    </View>
  );
}

旧版运行时

调用播放控制

要触发动画播放控制，请在渲染的 Rive 组件上设置 ref。一旦 ref 被填充，您就可以触发诸如 play、pause 等函数。参见 React Native 的 ref 方法文档：Rive Ref 方法。

import Rive, { RiveRef } from 'rive-react-native'

export default function App() {
  const riveRef = React.useRef<RiveRef>(null);

  const handlePlayPress = () => {
    riveRef?.current?.play();
  };

  const handlePausePress = () => {
    riveRef?.current?.pause();
  };

  return (
    <View>
      <Rive
        resourceName="truck_v7"
        animationName="idle"
        ref={riveRef}
      />
      <Button onPress={handlePlayPress} title="play" />
      <Button onPress={handlePausePress} title="pause" />
    </View>
  );
}