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<SplashScreen>
    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