和尚在一年前整理過一點 Lottie 在 Android 中的應用，現在 Flutter 也有相關的插件幫助我們快速簡單的應用場景復雜的 Lottie 動畫；

和尚在官網查詢之后發現官網推薦了兩個開源的 Lottie 插件，和尚對其中的

和尚首先在 lottiefiles 中下載了兩個酷炫的動畫 json，我們也可以選擇合適的動畫進行編輯調整；跟原生一樣，可以隨心設計，當然這項重任還是要交給視覺設計的小姐姐比較好；

集成方式

集成方式都是統一的三大步驟；再此之前可以將下載的 json 文件添加到本地 images 資源文件夾中；

1. 在 pubspec.yaml 中添加依賴庫

dependencies:

fluttie: ^0.3.2

2. 在文件中添加引用庫

import 'package:fluttie/fluttie.dart';

3. 根據 API 調用

通過 loadAnimationFromAsset 異步加載本地 json 資源，或通過 loadAnimationFromJson 直接加載 json 內容；

void prepareLottie() async {

var instance = Fluttie();

var whaleLottie = await instance.loadAnimationFromAsset('images/animation_demo01.json');

}

設置 FluttieAnimationController 控制器，綁定動畫資源，并設置動畫的基本屬性；

a. prepareAnimation 的固定參數是動畫資源，不可缺少；

b. repeatCount 可設置動畫重復的頻率；RepeatCount.nTimes(n) 重復 n+1 次；RepeatCount.infinite() 無限循環播放；RepeatCount.dontRepeat() 僅一次，播放完停止；

c. repeatMode 可設置動畫播放模式，START_OVER 播放完從頭再次播放，REVERSE 從無到有從有到無；

d. duration 可設置動畫播放時長；當設置無限重復時不生效；其余根據重復頻率使單次動畫時長均分；

e. preferredSize 可設置動畫預加載大小，并不直接控制 Widget 大小；

whaleController = await instance.prepareAnimation(

whaleLottie,

repeatCount: const RepeatCount.infinite()

);

開啟動畫即可準備好動畫的基本要素；

setState(() { whaleController.start(); });

將動畫繪制在 Widget 即可初步成功；

@override

Widget build(BuildContext context) {

return Scaffold(

body: Center(

child: Column(mainAxisSize: MainAxisSize.min, children: [

Container( width: 280.0, height: 200.0,

child: FluttieAnimation(whaleController))

)

])));

}

5. 我們也可以動態監聽動畫狀態并進行處理；

a. start() 從頭開啟動畫；

b. pause() 暫停動畫；

c. unpause() 從暫停處繼續播放動畫；

d. stopAndReset() 停止動畫，rewind 為 true 時結束動畫并到動畫開始時第一幀；false 為技術動畫并到動畫最后一幀；

Row(children: [

Expanded( flex: 1,

child: FlatButton(

onPressed: () { starController.start(); },

child: Text('start'))),

Expanded( flex: 1,

child: FlatButton(

onPressed: () { starController.pause(); },

child: Text('pause'))),

Expanded( flex: 1,

child: FlatButton(

onPressed: () { starController.unpause(); },

child: Text('resume'))),

Expanded( flex: 1,

child: FlatButton(

onPressed: () { starController.stopAndReset(rewind: true); },

child: Text('stop')))

])

注意事項

1. dispose() 動畫

動畫對應用內存占用較大，建議在頁面銷毀或關閉時將動畫銷毀；

@override

void dispose() {

super.dispose();

whaleController?.dispose();

starController?.dispose();

}

2. dispose() 與 stopAndReset() 區別

stopAndReset() 方法用來控制動畫的停止狀態，資源依然存在內存中，之后可繼續操作動畫的狀態；

dispose() 方法用來停止動畫并釋放資源，之后不能再操作動畫狀態；

class _LottieStatePage extends State {

FluttieAnimationController whaleController, starController;

@override

Widget build(BuildContext context) {

return Scaffold(

body: Center(

child: Column(mainAxisSize: MainAxisSize.min, children: [

Container(

width: 280.0,

height: 200.0,

child: FluttieAnimation(whaleController)),

Container(child: FluttieAnimation(starController)),

Row(children: [

Expanded(

flex: 1,

child: FlatButton(

onPressed: () {

starController.start();

},

child: Text('start'))),

Expanded(

flex: 1,

child: FlatButton(

onPressed: () {

starController.pause();

},

child: Text('pause'))),

Expanded(

flex: 1,

child: FlatButton(

onPressed: () {

starController.unpause();

},

child: Text('resume'))),

Expanded(

flex: 1,

child: FlatButton(

onPressed: () {

starController.stopAndReset(rewind: false);

},

child: Text('stop')))

])

])));

}

@override

void dispose() {

super.dispose();

whaleController?.dispose();

starController?.dispose();

}

@override

void initState() {

super.initState();

prepareLottie();

}

void prepareLottie() async {

var instance = Fluttie();

var whaleLottie =

await instance.loadAnimationFromAsset('images/animation_demo01.json');

whaleController = await instance.prepareAnimation(

whaleLottie,

repeatCount: const RepeatCount.nTimes(2));

var starLottie = await instance.loadAnimationFromAsset('images/star.json');

starController = await instance.prepareAnimation(starLottie,

repeatCount: const RepeatCount.infinite(),

repeatMode: RepeatMode.START_OVER);

setState(() {

whaleController.start();

starController.start();

});

}

}

Lottie 動畫大大降低了我們的開發成本，且內存狀態良好，但并非可以替代原生動畫，只是豐富了動畫開發的多樣性；如有錯誤請多多指導！

來源：阿策小和尚

總結

以上是生活随笔為你收集整理的flutter 动画json_Flutter 50: 图解动画小插曲之 Lottie 动画的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。