React中Rive动画循环的更简洁实现方案咨询

你当前通过onStop回调判断URL再调用play()实现循环的方式虽可行，但存在硬编码URL、手动控制循环的冗余问题，这里提供两个更简洁的优化方案：

方案一：利用Rive内置循环配置 #

Rive的React库useRive本身支持通过loop参数设置动画循环模式，无需手动在onStop里处理循环逻辑，这是最推荐的方案。

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

const { RiveComponent } = useRive({
  src: Cabin,
  autoplay: true,
  loop: Loop.Loop // 设置为循环模式，Rive会自动重复播放
});

优势 #

• 完全省去手动循环的代码，逻辑更简洁
• 组件卸载时（切换页面）Rive会自动停止动画，不会出现报错问题
• 支持其他循环模式：Loop.PingPong（往返循环）、Loop.OneShot（单次播放，默认）

方案二：优化页面判断逻辑（针对需自定义循环条件的场景） #

如果确实需要在特定页面才循环，不要硬编码完整URL，改用React Router的useLocation获取当前路径，适配不同环境（开发/生产）。

import { useRive } from '@rive-app/react';
import { useLocation } from 'react-router-dom';

const location = useLocation();

const { rive, RiveComponent } = useRive({
  src: Cabin,
  autoplay: true,
  onStop: () => {
    // 判断当前路由路径，而非完整URL
    if (location.pathname === '/profile') {
      rive.play();
    }
  }
});

优势 #

• 避免硬编码URL，适配不同部署环境
• 利用React Router的路由状态判断，更符合React项目的路由管理规范

内容的提问来源于stack exchange，提问作者Weber Chang