flutter 啟動螢幕使用 Lottie 動畫

會煮咖啡的貓發表於2021-05-28

Flutter動畫

貓哥說

因為出差關係來了重慶，很美的一個城市，走在街道上感覺就是在爬山，生活節奏相對比較慢，希望疫情遠離我們。

感謝群裡重慶好友能抽時間出來聚會。

正題開始

lottie 是一個誇平臺的動畫庫，用這個可以做出酷炫動畫。

其實作為一個前端還是要稍微會一點點美術、動畫、幾何數學。

lottiefiles.com/

github.com/airbnb/lott…

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

微信 flutter 研修群 ducafecat

原文

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

程式碼

github.com/debbsefe/Lo…

參考

正文

在構建移動應用程式時，啟動畫面非常常見。它們通常是在應用程式開始時顯示的靜態螢幕。這個螢幕可以幫助你告訴你的使用者應用程式是關於什麼的，通過顯示你的應用程式標誌或應用程式名稱。

如果你想更進一步，真正吸引使用者的注意力，可以考慮在啟動畫面上使用動畫圖片。使用 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 為中心的簡單文字小部件。

現在你可以繼續為你的使用者建立更具視覺吸引力的應用了。