从零开始用flutter写一个完整应用⑵：Lottie启动动画

Lottie相关说明

Lottie官网地址：https://lottiefiles.com/

Lottie可以去官网上下载一下免费的用于学习，也可以下载工具自己制作Lottie动画；不过正式用的时候一般UI设计人员会导出对于的文件给你，直接用就好了。这里我用的是下载的免费资源。lottie动画目前在移动端开发应用是十分广泛的，但也不是万能，需根据其特点选择是否合适。用作应用启动动画，Lottie是很理想的一个选项，因此选用了它。

优点：

1，支持跨平台，开发成本较低，一套Lottie动画可以在Android/IOS/Web多端使用。
2，性能好，端上除了解析json，基本没有其他耗性能的操作；并且相比于需要存储较多图片的帧动画，Lottie可以节省比较多的内存空间。
3，可以从服务端配置URL实现，不需要APP发版就可以实现更新。

不足点：

1，Lottie动画不能进行交互。
2，Lottie动画端上也无法进行编辑。Lottie不支持加载文字。
3，Lottie不支持压缩位图，如果使用png等位图，需要自行在tiny等压缩平台进行图片压缩、降低包体积。,
4，Lottie存在mask、matters 时，性能会受到较大影响。

代码地址：

https://github.com/liuyewu101/flutter_demo

开始

1，在pubspec.lock文件中添加依赖及资源配置：

dependencies: lottie: ^1.3.0

flutter:
assets:- assets/water-drop.json

2，在主目录下创建assets文件夹并把Lottie的json文件放入其中

3，加入如下代码：

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

  @override
  _SplashScreenState createState() => _SplashScreenState();
}

class _SplashScreenState extends State
    with TickerProviderStateMixin {
  AnimationController? _controller;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: const Duration(seconds: (5)),
      vsync: this,
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Lottie.asset(
        'assets/water-drop.json',
        controller: _controller,
        height: MediaQuery.of(context).size.height * 1,
        animate: true,
        onLoaded: (composition) {
          _controller
            ?..duration = composition.duration
            ..forward().whenComplete(() => Navigator.pushReplacement(
              context,
              MaterialPageRoute(builder: (context) => const MyHomePage(title:"the home page")),
            ));
        },
      ),
    );
  }
}

onLoaded回调，是动画加载完后的处理，这里通常跳主页面

简单的启动动画就这么轻松搞定；附上lottie_flutter插件地址：https://github.com/xvrh/lottie-flutter

ps:如果安装失败，可参考：https://blog.csdn.net/m0_38013946/article/details/121561591