【Flutter 3-5】Flutter進階教程——在Flutter中使用Lottie動畫

弗拉德發表於2021-04-13
Flutter動畫

作者 | 弗拉德
來源 | 弗拉德（公眾號：fulade_me)

Lottie動畫

在移動開發中總是需要展示一些動畫特效，作為程式設計師的我們並不是很擅長用程式碼做動畫，即便是有些動畫可以實現，在跨平臺的過程中也會因為API的差異性導致動畫在各個平臺中展示的有差異。
所以為了釋放程式設計師的雙手，不再陷入寫動畫調引數的苦惱，Airbnb開源了一款專門用於跨平臺的動畫解決方案：Lottie。
Lottie可以解析使用Bodymovin匯出為json的Adobe After Effects動畫，並在移動端和Web端展示。這樣我們就可以把做動畫的工作交給專業做動畫的同事來完成，我們只需要使用匯入json檔案即可，這樣是不是大大減少了程式設計師的工作量，並且能夠：實現專業的人做專業的事。

匯入Lottie框架

在Flutter中已經存在開源的Lottie庫，所以我們只需要在pubspec.yaml中的dependencies匯入相關的依賴即可

dependencies:
  lottie: ^0.7.0

使用Lottie庫

在需要展示Lottie動畫Widget匯入標頭檔案

import 'package:lottie/lottie.dart';

預設讀取本地json檔案

    Lottie.asset("json/fun_do_like.json"),

2021_04_21_lottie_nomail
只需要一句話即可展示Lottie動畫，是不是很簡單。
我們來看其他的屬性

  • repeat 是否重複執行。預設是true，如果是false，動畫執行一遍就會停止
  • reverse 是否倒序播放。預設是false，如果設定為true，動畫會先正序播放一遍，然後再倒序播放一遍
  • animate 是否允許播放動畫。預設是true，如果設定為false，則不會播放動畫

從網路讀取json檔案

Lottie.network("https://cdn.jsdelivr.net/gh/johnson8888/blog_pages/images/lottie_test.json",),

同樣我們可以設定獲取到網路資源後的回撥

Lottie.network("https://cdn.jsdelivr.net/gh/johnson8888/blog_pages/images/lottie_test.json",
    onLoaded: (LottieComposition composition) {
        print("onLoaded");
    },
),

好了，關於Lottie的使用就總結這些了。

想體驗以上的示例的執行效果，可以到我的Github倉庫專案flutter_app->lib->routes->lottie_demo_page.dart檢視，並且可以下載下來執行並體驗。

公眾號

相關文章