Flutter中Lottie动画首次加载耗时3-4秒问题咨询

一、优化Lottie JSON文件体积 #

2MB的JSON文件是加载慢的核心诱因，先从文件本身压缩优化：

• 用Lottie官方编辑器打开动画，删除冗余元素：隐藏图层、未使用的关键帧、多余资源
• 压缩JSON结构：移除注释、空格，用JSON压缩工具处理，通常能把2MB文件压缩到500KB以内
• 调整帧率：如果不需要FrameRate.max，改为FrameRate.composition使用动画原帧率，降低渲染压力

二、提前预加载动画资源 #

在页面初始化阶段提前加载资源，避免首次渲染时的等待：

import 'package:flutter/material.dart';
import 'package:lottie/lottie.dart';
import 'package:prm/constants/size_config.dart';

class TestScreen extends StatefulWidget {
  const TestScreen({Key? key}) : super(key: key);

  @override
  State<TestScreen> createState() => _TestScreenState();
}

class _TestScreenState extends State<TestScreen> {
  LottieComposition? _composition;

  @override
  void initState() {
    super.initState();
    // 页面初始化时预加载动画
    _preloadAnimation();
  }

  Future<void> _preloadAnimation() async {
    final composition = await LottieComposition.asset("assets/animation/flightLoader.json");
    if (mounted) {
      setState(() {
        _composition = composition;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: Center(
        child: _composition != null
            ? Lottie(
                composition: _composition!,
                height: SizeConfig.blockSizeVertical! * 30,
              )
            : const CircularProgressIndicator(), // 加载时显示轻量占位符
      ),
    );
  }
}

三、利用缓存减少重复加载 #

Lottie.asset默认会缓存加载后的LottieComposition，确保同一动画不会重复加载：

• 保持cache参数默认的true即可，无需额外配置
• 全局频繁使用的动画，可在应用启动时统一预加载缓存，后续页面直接复用

四、优化加载体验 #

在动画加载完成前，用轻量占位组件（如圆形进度条、静态缩略图）替代空白，降低用户对加载延迟的感知

内容的提问来源于stack exchange，提问作者18Ashelar