Lottie是一个库，可以解析使用AE制作的动画（需要用bodymovie导出为json格式）,支持web、ios、android、flutter和react native。
在web端，lottie-web库可以解析导出的动画json文件，并将其以svg或者canvas的方式将动画绘制在我们的页面上
Lottie优点
1、动画由设计使用专业的动画制作工具AE来实现，使动画实现更加方便，且效果更好
2、前端可以方便的调用动画，并对动画进行控制，减少前端动画工作量
3、设计制作动画，前端展现动画，分工明确
4、使用lottie方案，json文件大小比gif文件小很多，性能也会更好 ------ 根据实际情况来定，有的场景下lottie方案需要用到大量图片，还不如使用gif
1、安装lottie-web
npm install lottie-web
2、处理资源文件
1、将所有图片文件压缩一遍
2、在根目录下的public文件夹下创建static文件，存放图片文件，如果有多个不同动画，可以根据情况进行分文件存放
3、在src目录中assets创建animation文件夹，存放json文件`
3、封装Lottie.vue组件
<template>
<div v-if="show_up" class="lottie-up" ref="showUpContainer"></div>
</template>
<script setup lang="ts">
import lottie from 'lottie-web'
import { ref, watch, nextTick } from 'vue'
import show_up from '../assets/animation/data_6.json'
const showUpContainer = ref<any>(null)
const anim_up = ref<any>(null)
const props = defineProps({
show_up: {
type: Boolean,
default: false
watch(
() => props.show_up,
(val) => {
if (val) {
anim_up.value = lottie.loadAnimation({
container: showUpContainer.value,
renderer: 'svg',
loop: true,
autoplay: true,
animationData: show_up,
assetsPath: 'https://xxx.xxx.com/static-h5-pro/202212/vacation/static/images_6/'
immediate: true,
deep: true
</script>
4、使用动画组件
<template>
<Lottie
:show_up="show_up"
ref="refLottie_up"
</template>
<script lang="ts" setup>
const perviewLoadImg = (): void => {
const path = `https://xxx.xxx.com/static-h5-pro/202212/vacation/static/images_${props.rabbit_level}/`
const count = 89
const cur_image = new Image()
cur_image.src = `${path}img_${img_num.value}.png`
cur_image.onload = () => {
if (img_num.value < count) {
img_num.value++
perviewLoadImg()
} else {
allLoad.value = true
</script>
5、构造条件，即可在页面中显示动画了
1、图片过多情况下，合理规划图片加载情况，保证用户首次进入页面体验，例如：五个等级兔子动画特效，每个动画90张大小100K左右的图片，
首次进入页面最好不要全部加载完成，这样的话时间会很长才能显示动画，所以只加载当前等级的兔子动画图片，既能保证动画效果，又能快速展示动画，保证用户体验
2、需要使用预加载，预加载过程中可以使用菊花图，必须保证当前动画所有图片都加载完成后再显示动画效果，要不然会有卡顿的现象
3、动画渲染完成后，不能动态切换其他动画，所以如果有多个动画的情况下，需要初始化不同的lottie实例
4、尽量避免动画效果图片过多，可以使用别的方案代替，例如：gif图
其他同类型方案对比
优点：简单
缺点：掉帧严重，体验不流畅，对于小icon可以接受，对于大面积动画效果不行
Video：
优点：兼容性好，体积小
缺点：很多平台（微信、部分安卓浏览器）禁止自动播放问题，隐藏视频控制条，IOS 视频自动全屏播放，oppo 机视频播放自动悬浮置顶，PC端有色差等
移动端 web 对于 video 自动播放的兼容性是在太差，尤其安卓，一些浏览器对 video 标签进行拦截，并以自己的方式实现，或是悬浮置顶播放，或是两个视屏播放冲突，或是控制条无法隐藏，或是播放默认全屏，如果用其它方式可以实现动画尽量还是用其它方式
对于 video 的自动播放，考虑一些浏览器限制必须通过用户交互才能使用，如果视屏是在第一屏则有点难度，还是需要用户通过点击才能播放，如果不是第一屏则可通过 touch 事件来触发，毕竟用户下拉滚动还是会触发 touch 事件
video 的 play 方法返回的 promise 存在华为荣耀8 微信里返回 play 成功，但是却没有播放视频
APNG：
基于 PNG 格式扩展的一种动画格式，增加了对动画图像的支持，为了替代老旧的 GIF 格式，但部分浏览器不支持，兼容性严重，需要考虑兼容
Lottie：
颜色、数字倾斜度、虚线的透视都不到预期
