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’);
}

2. 设置 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()
);

3. 开启动画即可准备好动画的基本要素；

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

4. 将动画绘制在 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(() {
tionFromAsset(‘images/star.json’);
starController = await instance.prepareAnimation(starLottie,
repeatCount: const RepeatCount.infinite(),
repeatMode: RepeatMode.START_OVER);

setState(() {