Lottie 是 Airbnb 开源的一个支持 Web、Android、iOS 以及 ReactNative等平台的动画库,它可以结合 AE 和 Bodymovin 来快速实现跨平台动画。

官网:airbnb.io/lottie/#/

插件地址:pub.dev/packages/lo…

设计师前期准备

制作教程(生成json文件):

保姆级教程|Lottie动效设计完全指南

面向前端的 Lottie & AE 动画手把手入门教学

开发使用

1、引入插件
lottie: ^2.7.0

引入依赖

import 'package:lottie/lottie.dart';
2、使用lottie动画

加载本地

在你的项目目录下创建一个assets 文件夹,并在那里添加Lottie文件。

assets: - assets/

加载网络

3、动画控制
4、一些展示

lotie动画展示:xvrh.github.io/lottie-flut…

参考文章

1、如何实现Flutter中的Lottie动画

2、Flutter案例日程安排首页效果 Lottie动画与Shimmer实现的微光效果(顺便了解到了Shimmer)

源码:flutter_event_schedule_app

Logo

瓜分20万奖金 获得内推名额 丰厚实物奖励 易参与易上手

更多推荐