flutter Lottie 動畫引導頁的實現

1. 在 pubspec.yaml 中新增依賴庫

dependencies:
    fluttie: ^0.3.2
複製程式碼

2. 在檔案中新增引用庫

import 'package:fluttie/fluttie.dart';
複製程式碼

3. 根據 API 呼叫

1. 通過 loadAnimationFromAsset 非同步載入本地 json 資源，或通過 loadAnimationFromJson 直接載入 json 內容；

void prepareLottie() async {
  var instance = Fluttie();
  var whaleLottie = await instance.loadAnimationFromAsset('images/animation_demo01.json');
}
複製程式碼

1. 設定 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()
);
複製程式碼

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

setState(() { whaleController.start(); });
複製程式碼

1. 將動畫繪製在 Widget 即可初步成功；

@override
Widget build(BuildContext context) {
  return Scaffold(
      body: Center(
          child: Column(mainAxisSize: MainAxisSize.min, children: <Widget>[
    Container( width: 280.0, height: 200.0,
        child: FluttieAnimation(whaleController))
    )
  ])));
}
複製程式碼

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

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

b. pause() 暫停動畫；

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

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

Row(children: <Widget>[
  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<LottieStatePage> {
  FluttieAnimationController whaleController, starController;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Center(
            child: Column(mainAxisSize: MainAxisSize.min, children: <Widget>[
      Container(
          width: 280.0,
          height: 200.0,
          child: FluttieAnimation(whaleController)),
      Container(child: FluttieAnimation(starController)),
      Row(children: <Widget>[
        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 動畫大大降低了我們的開發成本，且記憶體狀態良好，但並非可以替代原生動畫，只是豐富了動畫開發的多樣性；如有錯誤請多多指導！