Lottie 是 Airbnb 出的一套跨平台的动画完整解决方案,它能够帮助程序员直接加载 JSON 格式的文件在 iOS、Android 和 React Native之上,实现 100% 与设计稿相同的动画效果,而无需关心中间的实现细节。设计师只需要使用 After Effectes 设计出动画之后,通过使用 Lottic 提供的 Bodymovin 将设计好的动画导出成 JSON 格式的文件交付给开发即可完成。
在Flutter中使用Lottie动画非常简单。
-
pubspec.yaml中引入Lottie库:
dependencies:
lottie: -
引入头:
import ‘package:lottie/lottie.dart’; -
载入动画json:
读取json文件: Lottie.asset(“json/fun_do_like.json”),
从网络读取json文件: Lottie.network(“https://cdn.jsdelivr.net/gh/johnson8888/blog_pages/images/lottie_test.json",),
可以设置获取到网络资源后的回调:
Lottie.network("https://cdn.jsdelivr.net/gh/johnson8888/blog_pages/images/lottie_test.json",
onLoaded: (LottieComposition composition) {
print("onLoaded");
},
),
示例部份代码
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Lottie.network(
"https://m.scwy.net/images/programming.json",
),
),
);
}