(摘) 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",
        ),
      ),
    );
  }

相关文章