(摘) Flutter使用Lottie动画

Lottie 是 Airbnb 出的一套跨平台的动画完整解决方案，它能够帮助程序员直接加载 JSON 格式的文件在 iOS、Android 和 React Native之上，实现 100% 与设计稿相同的动画效果，而无需关心中间的实现细节。设计师只需要使用 After Effectes 设计出动画之后，通过使用 Lottic 提供的 Bodymovin 将设计好的动画导出成 JSON 格式的文件交付给开发即可完成。

在Flutter中使用Lottie动画非常简单。

1. pubspec.yaml中引入Lottie库:
   dependencies:
   lottie:

2. 引入头:
   import ‘package:lottie/lottie.dart’;

3. 载入动画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",
        ),
      ),
    );
  }