Flutter开发之——动画-Lottie

一 概述

• Lottie是Aribnb开源的面向Android，iOS等的高性能动画库
• Flutter原生库不支持Lottie，但是可以通过第三方插件实现Lottie的动画效果

二 导入lottie_flutter插件

2.1 插件地址

Lottie for Flutter：https://github.com/xvrh/lottie-flutter

2.2 如何导入

• 点击pubv1.0.1，跳转到flutter package lottie页面
  

• 打开flutter package lottie后，切换到install选项卡，按照步骤依次执行如下操作
  

  //cmd终端执行
  flutter pub add lottie
  //pubspec.yaml添加依赖
  dependencies:
    lottie: ^1.0.1
  

三 Lottie素材

https://lottiefiles.com/featured

四 示例-1 简单动画

4.1 下载Lottie文件并添加依赖

  assets:
     - assets/kills-corona.json
     - assets/jumping.zip

4.2 代码(json文件/网络文件/zip文件)

body:ListView(
    children: [
            Lottie.asset('assets/kills-corona.json',width: 150,height: 150),
            Divider(thickness: 2,color: Colors.red,),
            Lottie.network('https://assets2.lottiefiles.com/packages/lf20_pqdnvhfb.json',width: 150,height: 150),
            Divider(thickness: 2,color: Colors.red,),
            Lottie.asset('assets/jumping.zip',width: 150,height: 150),
          ],
        )

4.3 效果图

五 示例-2 控制Lottie动画

5.1 下载Lottie文件并添加依赖

  assets:
     - assets/heart-icon.json

5.2 代码

class _MyHomePageState extends State with TickerProviderStateMixin {

  //lottie动画控制器
  AnimationController _controller;
  
  @override
  void initState() {
    super.initState();
    _controller = AnimationController(vsync: this);
  }
 @override
  void dispose() {
    super.dispose();
    _controller.dispose();
  }
   @override
  Widget build(BuildContext context) {
    _getLocalFile();
    return Scaffold(
        appBar: AppBar(title: Text(widget.title), backgroundColor: Colors.orange, centerTitle: true,),
          body:ListView(
          children: [
            Lottie.asset('assets/heart-icon.json',controller:_controller,onLoaded:(composition){
              _controller..duration=composition.duration;
            } ,width: 150,height: 150),
            Divider(thickness: 3,color: Colors.red,),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                RaisedButton(onPressed: (){_controller.reverse();},child: Text("反向"),),
                RaisedButton(onPressed: (){_controller.stop();},child: Text("暂停"),),
                RaisedButton(onPressed: (){_controller.forward();},child: Text("正向"),),
                RaisedButton(onPressed: (){lottieRepeat();},child: Text("重复"))
              ],
            )
          ],
        )
      );
}

5.3 效果图