动画开发之 Lottie

什么是Lottie

Lottie是Airbnb开源的一个动画渲染库，支持多平台，包括iOS、Android、React Native以及Flutter,还有其他平台的 React、Vue、Angular 等等
效果展示：

动画开发过程

在AE 中设计动画

打开AE 设计动画

通过 bodymovin 插件导出 json

AE制作这里不做具体描述，具体学习下AE Lottie 动画教程
可以在这个网站预览
bodymovin json 动画预览

没问题在代码中引用
我们以flutter 说明

flutter 中 Lottie 的使用

导入flutter插件
flutter-Lottie 插件地址
找到对应的版本

dependencies:lottie: ^1.3.0

在终端执行

flutter pub add lottie

在项目中引用

import 'package:lottie/lottie.dart';

下载资源本地引用

  assets:- assets/kills-corona.json- assets/lottiefiles/angel.zip

完整代码

import 'package:flutter/material.dart';
import 'package:lottie/lottie.dart';void main() => runApp(const MyApp());class MyApp extends StatelessWidget {const MyApp({Key? key}) : super(key: key);@overrideWidget build(BuildContext context) {return MaterialApp(home: Scaffold(body: ListView(children: [// Load a Lottie file from your assetsLottie.asset('assets/kills-corona.json'),// Load a Lottie file from a remote urlLottie.network('https://rawgit.flutter-io.cn/xvrh/lottie-flutter/master/example/assets/Mobilo/A.json'),// Load an animation and its images from a zip fileLottie.asset('assets/lottiefiles/angel.zip'),],),),);}
}

指定自定义AnimationController，控制动画

import 'package:flutter/material.dart';
import 'package:lottie/lottie.dart';/// This example show how to play the Lottie animation in various way:
/// - Start and stop the animation on event callback
/// - Play the animation forward and backward
/// - Loop between two specific frames
///
/// This works by creating an AnimationController instance and passing it
/// to the Lottie widget.
/// The AnimationController class has a rich API to run the animation in various ways.
void main() => runApp(const MyApp());class MyApp extends StatefulWidget {const MyApp({Key? key}) : super(key: key);@override_MyAppState createState() => _MyAppState();
}class _MyAppState extends State<MyApp> with TickerProviderStateMixin {late final AnimationController _controller;@overridevoid initState() {super.initState();_controller = AnimationController(vsync: this)..value = 0.5..addListener(() {setState(() {// Rebuild the widget at each frame to update the "progress" label.});});}@overridevoid dispose() {_controller.dispose();super.dispose();}@overrideWidget build(BuildContext context) {return MaterialApp(home: Scaffold(appBar: AppBar(title: const Text('Animation control'),),body: Column(children: <Widget>[const SizedBox(height: 20),Lottie.asset('assets/kills-corona.json',controller: _controller,height: 300,//控制大小onLoaded: (composition) {setState(() {_controller.duration = composition.duration;});},),Text(_controller.value.toStringAsFixed(2)),Row(mainAxisAlignment: MainAxisAlignment.center,children: [// Play backwardIconButton(icon: const Icon(Icons.arrow_left),onPressed: () {_controller.reverse();},),// PauseIconButton(icon: const Icon(Icons.pause),onPressed: () {_controller.stop();},),// Play forwardIconButton(icon: const Icon(Icons.arrow_right),onPressed: () {_controller.forward();},),],),const SizedBox(height: 30),ElevatedButton(onPressed: () {// Loop between 2 specifics framesvar start = 0.1;var stop = 0.5;_controller.repeat(min: start,max: stop,reverse: true,period: _controller.duration! * (stop - start),);},child: const Text('Loop between frames'),),],),),);}
}

自定义加载
小Lottie部件有几个方便的构造函数（Lottie.asset, Lottie.network, Lottie.memory）来自动加载、解析和缓存 json 文件。

有时您可能更喜欢完全控制文件的加载。用于LottieComposition.fromByteData从字节列表中解析文件。

此示例说明如何从 json 文件加载和解析 Lottie 组合。

class MyWidget extends StatefulWidget {const MyWidget({Key? key}) : super(key: key);@override_MyWidgetState createState() => _MyWidgetState();
}class _MyWidgetState extends State<MyWidget> {late final Future<LottieComposition> _composition;@overridevoid initState() {super.initState();_composition = _loadComposition();}Future<LottieComposition> _loadComposition() async {var assetData = await rootBundle.load('assets/kills-corona.json');return await LottieComposition.fromByteData(assetData);}@overrideWidget build(BuildContext context) {return FutureBuilder<LottieComposition>(future: _composition,builder: (context, snapshot) {var composition = snapshot.data;if (composition != null) {return Lottie(composition: composition);} else {return const Center(child: CircularProgressIndicator());}},);}
}

动画开发之 Lottie相关推荐

ae导出json_关于AE转json动画开发避坑指南
本篇文章是给一定基础的UI设计写的 Lottie 是Airbnb开源的一个面向Android. iOS.React Native .Web的动画库,能分析 Adobe After Effects 导出 ...
从UI设计到开发，Lottie使用全流程
从UI设计到开发,Lottie使用全流程使用lottie Lottie 是一个 iOS.Android 和 React Native 库,可以实时渲染 After Effects 动画,让应用程序可 ...
Android动画开发思路
Android动画开发思路传统动画实现高级动画开发对接动效设计师传统动画实现 1.不建议使用,性能差:帧动画采用播放序列帧图实现,容易造成OOM并且APK过大: GIF,Gif大小是bodym ...
iOS动画开发之五——炫酷的粒子效果
iOS动画开发之五--炫酷的粒子效果在上几篇博客中,我们对UIView层的动画以及iOS的核心动画做了介绍,基本已经可以满足iOS应用项目中所有的动画需求,如果你觉得那些都还不够炫酷,亦或是你灵光一 ...
Unity Pro 2019 for mac(3D游戏动画开发工具) v2019.2.21f1
想要一款功能强大的3D游戏动画开发工具?Unity 2019能够轻松创建诸如三维视频游戏.建筑可视化.实时三维动画等类型互动内容的多平台的综合型游戏开发工具,以及一个全面整合的专业游戏引擎,用于创建诸 ...
vue+css3动画开发发牌、翻牌效果
css动画开发发牌效果,纸牌从页面中部发出(更改animation动画,添加延迟可以更换为逐张发出), 点击卡片时,反转卡片,使用 backface-visibility: hidden;属性,使卡片 ...
Android动画开发
转自:http://blog.csdn.net/teasub/article/details/6755228 在做Android开发时,UI往往是最费时间,但一个效果炫丽的UI也往往是一款应用吸引人的 ...
iOS 动画实战之Lottie动画
如果把iOS动画分为两类: 交互式动画, 播放式动画, 那么其中的播放动画完全可以使用Lottie来完成, 例如: 1.作为收藏按钮, 是不是很活泼? 2.返回与菜单之间的切换, 生动有趣! 3.还有 ...
html5做动画视频教程,基于HTML5的Flash动画开发视频教程
(xuehui@TLF) Lynda.com 出品的时长3小时16分的基于HTML5的Flash动画开发视频教程.由Lee Brimelow演示了Flash开发人员在浏览器中利用HTML5,CSS或其 ...

动画开发之 Lottie

什么是Lottie

动画开发过程

在AE 中设计动画

flutter 中 Lottie 的使用

动画开发之 Lottie相关推荐

最新文章

热门文章

动画开发 之 Lottie

什么是Lottie

动画开发过程

在AE 中设计动画

flutter 中 Lottie 的使用

动画开发 之 Lottie相关推荐

最新文章

热门文章

动画开发之 Lottie

动画开发之 Lottie相关推荐