乐趣区

关于flutter:Flutter-35Flutter进阶教程在Flutter中使用Lottie动画

作者 | 弗拉德
起源 | 弗拉德(公众号:fulade_me)

Lottie 动画

在挪动开发中总是须要展现一些动画特效,作为程序员的咱们并不是很善于用代码做动画,即使是有些动画能够实现,在跨平台的过程中也会因为 API 的差异性导致动画在各个平台中展现的有差别。
所以为了开释程序员的双手,不再陷入写动画调参数的苦恼,Airbnb 开源了一款专门用于跨平台的动画解决方案:Lottie
Lottie能够解析应用 Bodymovin 导出为 json 的 Adobe After Effects 动画,并在挪动端和 Web 端展现。这样咱们就能够把做动画的工作交给业余做动画的共事来实现,咱们只须要应用导入 json 文件即可,这样是不是大大减少了程序员的工作量,并且可能:实现业余的人做业余的事。

导入 Lottie 框架

在 Flutter 中曾经存在开源的 Lottie 库,所以咱们只须要在 pubspec.yaml 中的 dependencies 导入相干的依赖即可

dependencies:
  lottie: ^0.7.0              

应用 Lottie 库

在须要展现 Lottie 动画 Widget 导入头文件

import 'package:lottie/lottie.dart';

默认读取本地 json 文件

    Lottie.asset("json/fun_do_like.json"),


只须要一句话即可展现 Lottie 动画,是不是很简略。
咱们来看其余的属性

  • repeat 是否反复执行。默认是 true,如果是 false,动画执行一遍就会进行
  • reverse 是否倒序播放。默认是 false,如果设置为 true,动画会先正序播放一遍,而后再倒序播放一遍
  • animate 是否容许播放动画。默认是 true,如果设置为 false,则不会播放动画

从网络读取 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");
    },
),

好了,对于 Lottie 的应用就总结这些了。

想体验以上的示例的运行成果,能够到我的 Github 仓库我的项目 flutter_app->lib->routes->lottie_demo_page.dart 查看,并且能够下载下来运行并体验。


退出移动版