Web动画（lottie篇）
https://i-blog.csdnimg.cn/blog_migrate/a4eb553c097c697ac719fdef6badabae.gif一、Lottie简介
Lottie是一个库，可以解析利用AE制作的动画（需要用bodymovin导出为json格式），支持web、ios、android和react native。在web侧，lottie-web库可以解析导出的动画json文件，并将其以svg或者canvas的方式将动画绘制到我们页面中
总的来说，
[*]Lottie通过读取json文件信息实现动画效果。
[*]json信息包括动画长度、宽度、动画资源、图层信息等，这些属性阐述了动画该做什么、该怎么做。
1.1 lottie的长处
Lottie方法方案是由计划师出动画，导出为json，给前端播放。以是，利用Lottie方案的利益在于：
[*]动画由计划利用专业的动画制作工具Adobe After Effects来实现，使动画实现更加方便，动画效果也更好；
[*]前端可以方便的调用动画，并对动画进行控制，减少前端动画工作量；
[*]计划制作动画，前端显现动画，专业人做专业事，分工合理；
[*]卖家秀即买家秀，还原水平百分之百；
[*]利用lottie方案，json文件巨细会比gif文件小很多，性能也会更好。
[*]支持跨平台，开辟成本较低，一套Lottie动画可以在Android/IOS/Web多端利用。
[*]性能好，端上除了解析json，根本没有其他耗性能的利用；并且相比于需要存储较多图片的帧动画，Lottie可以节省比较多的内存空间。
二、利用方法（附根本代码）
2.1 前期准备
[*]下载安装** After Effects **
https://i-blog.csdnimg.cn/blog_migrate/ae5b3bcef2651c3f4cb5bbdb7b61f40e.png
[*]在AE上制作动画
[*]安装插件Bodymovin，并利用插件导出，导出的是json格式的文件结构
https://i-blog.csdnimg.cn/blog_migrate/c08dab483404d0d12d92fe0e45f73174.pnghttps://i-blog.csdnimg.cn/blog_migrate/442e3e77a97c6702cd571a4f4e746251.png
[*]利用【lottie-web】依赖读取该文件导出的json 格式的内容 便引入了该lottie动画
2.2 根本代码
<template>
<div class="lottie_page">
<div id="lottie"></div>
</div>
</template>
<script>
import lottie from 'lottie-web';// 引入lottie 库
import * as animationData from '@/assets/lottie/data.json'; // 引入素材文件
export default {
data() {
return {
};
},
mounted() {
this.lot = lottie.loadAnimation({
container: document.getElementById('lottie'),
renderer: 'svg',
loop: false,
autoplay: false,
animationData: animationData.default
});
},
};
</script>
以是，在网页上制作动画就是这么简单，只需少量的代码便可以实现！！
三、效果
https://i-blog.csdnimg.cn/blog_migrate/79dd0157049c5d4d10c9cbc9f66a16d3.gif
四、参考
[*]原生插件 用AE导出json | LottieFiles plugin | 原生插件
[*]bodymovie插件 https://pan.baidu.com/s/1vcM86DyoZjefwCN5_-GqIA?pwd=2301&at=1711347005762
[*]利用 如安在vue中利用Lottie - 掘金
附加：进阶玩法
第一阶段
团体元素的简单的播放，暂停，设置播放进度等
第二阶段
多个元素各自有本身的播放的规律
[*]AE中有一个总合成，不同元素之间有一个单独的合成
[*]导出多个不同元素的json文件
[*]在vue中为每个json文件定义一个标签，并挂载事件
[*]单独控制元素的播放规律
第三阶段
多个元素有个本身动态的播放规律
由于 lottie是用过 json 来控制动画的，而前端与后端交互最常见的格式是什么？
JSON！！
因此，可以从后端获取数据之后，在前端重新拼接到json中，就可以实现动态的动画。
举个栗子
页:
[1]