Flutter开发之——动画-Lottie

发表于 分类于 ， ， 阅读时长 ≈ 2 分钟

一 概述

  • 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选项卡，按照步骤依次执行如下操作

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

三 Lottie素材

https://lottiefiles.com/featured

四 示例-1 简单动画

4.1 下载Lottie文件并添加依赖

1
2
3
assets:
   - assets/kills-corona.json
   - assets/jumping.zip

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

1
2
3
4
5
6
7
8
9
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文件并添加依赖

1
2
assets:
   - assets/heart-icon.json

5.2 代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
class _MyHomePageState extends State<MyHomePage> 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 效果图