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

作者 | 弗拉德
來源 | 弗拉德（公眾號：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"),

只需要一句話即可展示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查看，並且可以下載下來運行並體驗。

---