动画开发之 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());}},);}
}