flutter 啓動屏幕使用 Lottie 動畫

貓哥說

由於出差關係來了重慶，很美的一個城市，走在街道上感受就是在登山，生活節奏相對比較慢，但願疫情遠離咱們。前端

感謝羣裏重慶好友能抽時間出來聚會。git

正題開始github

lottie 是一個誇平臺的動畫庫，用這個能夠作出酷炫動畫。web

其實做爲一個前端仍是要稍微會一點點美術、動畫、幾何數學。編程

lottiefiles.com/json

github.com/airbnb/lott…api

老鐵記得轉發，貓哥會呈現更多 Flutter 好文~~~~

微信 flutter 研修羣 ducafecat

原文

mamuseferha.medium.com/how-to-use-…微信

代碼

github.com/debbsefe/Lo…markdown

參考

正文

在構建移動應用程序時，啓動畫面很是常見。它們一般是在應用程序開始時顯示的靜態屏幕。這個屏幕能夠幫助你告訴你的用戶應用程序是關於什麼的，經過顯示你的應用程序標誌或應用程序名稱。less

若是你想更進一步，真正吸引用戶的注意力，能夠考慮在啓動畫面上使用動畫圖片。使用 Lottie 顯示一個動畫圖像就像在你的應用程序中使用 Image 小部件同樣簡單。

開始

首先，建立一個新的 flutter 項目。

flutter pub add lottie
複製代碼

經過粘貼如下代碼建立啓動畫面小部件。

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: Duration(seconds: (5)),
      vsync: this,
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Lottie.asset(
        'assets/splash_lottie.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) => HomePage()),
                ));
        },
      ),
    );
  }
}
複製代碼

Splash screen 小部件是一個有狀態小部件，它在其 build 方法中保存 Lottie 文件。動畫控制器在 initState 中建立，並在控制器屬性中使用。

若要在動畫完成後導航到下一個頁面，請使用帶有 LottieComposition 的 onLoaded 回調。這容許您有更多的信息和控制的 Lottie 文件。

onLoaded: (composition) {
  _controller
  ..duration = composition.duration
  ..forward().whenComplete(() => Navigator.pushReplacement(
    context,
    MaterialPageRoute(builder: (context) => HomePage()),));
    },
複製代碼

動畫完成後，導航到下一頁。

我在代碼中添加了一個啓動畫面導航到的主頁小部件。

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(child: Text('Homepage')),
    );
  }
}
複製代碼

以 scaffold 爲中心的簡單文本小部件。

如今你能夠繼續爲你的用戶建立更具視覺吸引力的應用了。

不要忘記將 Lottie 文件做爲資產添加到 pubspec.yaml 中，不然，動畫將不會顯示。你也能夠在 GitHub 上找到完整的項目。

github.com/debbsefe/Lo…

ducafecat.tech/

github.com/ducafecat