Flutter中Rive动画加载优化：先加载小动画后台加载大动画可行吗？

一、分步加载切换的实现方法 #

完全可以实现先加载小型.riv文件展示动画，同时后台加载大型文件，完成后无缝切换的需求，具体实现步骤如下：

• 初始化阶段优先加载小型.riv文件，快速渲染首屏动画，避免用户等待。
• 用异步操作在后台加载大型.riv文件，确保不阻塞UI线程。
• 大型文件加载完成后，替换Rive组件的控制器或画板，完成动画切换。

示例代码：

import 'package:flutter/services.dart';
import 'package:rive/rive.dart';

class RiveLoader extends StatefulWidget {
  const RiveLoader({super.key});

  @override
  State<RiveLoader> createState() => _RiveLoaderState();
}

class _RiveLoaderState extends State<RiveLoader> {
  late RiveAnimationController _smallController;
  Artboard? _largeArtboard;
  bool _isLargeLoaded = false;

  @override
  void initState() {
    super.initState();
    // 启动小型动画
    _smallController = SimpleAnimation('loading');
    // 后台异步加载大型动画
    _loadLargeAnimation();
  }

  Future<void> _loadLargeAnimation() async {
    try {
      // 从资源包加载大型Rive文件
      final bytes = await rootBundle.load('assets/large_animation.riv');
      final riveFile = RiveFile.import(bytes);
      // 获取主画板并添加控制器
      final artboard = riveFile.mainArtboard;
      final controller = StateMachineController.fromArtboard(artboard, 'main_state')!;
      artboard.addController(controller);
      
      setState(() {
        _largeArtboard = artboard;
        _isLargeLoaded = true;
      });
    } catch (e) {
      // 处理加载失败情况
      debugPrint('加载大型动画失败: $e');
    }
  }

  @override
  Widget build(BuildContext context) {
    return AnimatedSwitcher(
      duration: const Duration(milliseconds: 300),
      child: _isLargeLoaded && _largeArtboard != null
          ? Rive(artboard: _largeArtboard!)
          : Rive(
              asset: 'assets/small_loading.riv',
              controller: _smallController,
            ),
    );
  }
}

注意：用AnimatedSwitcher包裹可以添加切换过渡效果，让动画切换更自然；加载大型文件时尽量用rootBundle.load的异步方法，避免UI卡顿。

二、其他更合适的实现方案 #

1. 优化单文件多状态机方案（你已尝试的方向） #

如果已经在单个.riv文件内使用多状态机，可以做以下优化：

• 拆分状态逻辑，首屏只激活轻量级状态（比如简单的加载动画），后台预加载复杂状态的资源。Rive会自动预加载状态关联的动画数据，无需额外操作。
• 通过状态机的输入参数控制状态切换，示例：

// 初始化状态机控制器
final controller = StateMachineController.fromArtboard(artboard, 'app_states')!;
artboard.addController(controller);

// 首屏启动轻量加载状态
final loadInput = controller.findInput<bool>('show_loading')!;
loadInput.value = true;

// 后台预加载主动画状态
Future.delayed(Duration.zero, () {
  final preloadInput = controller.findInput<bool>('preload_main')!;
  preloadInput.value = true;
  // 加载完成后切换到主状态
  Future.delayed(const Duration(seconds: 1), () {
    loadInput.value = false;
    final mainInput = controller.findInput<bool>('show_main')!;
    mainInput.value = true;
  });
});

2. Rive资源分块加载 #

把大型动画中的外部资源（如高分辨率图片、音效）单独拆分，使用Rive的资产引用功能关联这些资源。首屏只加载核心动画数据，后台异步加载附属资源，降低初始加载压力。

3. 本地缓存策略 #

将加载完成的大型.riv文件缓存到本地存储（可借助path_provider获取本地路径），下次启动时直接读取缓存文件，避免重复加载，提升二次启动速度。

内容的提问来源于stack exchange，提问作者Jack Jagt