vue3中lottie动画的实现

背景
👏最近在工作过程中遇到一些用css3不好实现的动画，gif又满足不了需求，那么就试试lottie动画吧（需要你们的ui小伙伴提供动画的json文件哦~）
🥇文末分享源代码。记得点赞+关注+收藏！

1.实现效果

2.实现原理

2.1 lottie

lottie：
Lottie适用于Android、iOS、Web、React Native和Windows，通过Bodymovin解析Adobe After Effects动画导出的json，并在移动端和Web上原生渲染它们!
前端直接引用lottie-web库即可，默认的渲染方式是svg，前端无需关心动画的过程。

官方文档：http://airbnb.io/lottie/#/
源码地址：https://github.com/airbnb/lottie
lottie-web地址：https://github.com/airbnb/lottie-web
npm地址：npm地址：https://www.npmjs.com/package/lottie-web

2.2 使用

静态CDN引入：https://cdnjs.com/libraries/lottie-web
本地引入：https://github.com/airbnb/lottie-web/tree/master/build/player

NPM安装：

npm install lottie-web

2.3 参数详解

调用lottie.loadAnimation()来启动动画。它接受一个对象作为唯一参数：

参数	含义
container	用于渲染动画的HTML元素，需确保在调用loadAnimation时该元素已存在
renderer	渲染器，可选值为’svg’（默认值）/‘canvas’/‘html’。svg支持的功能最多，但html的性能更好且支持3d图层。各选项值支持的功能列表在此
loop	默认值为true。可传递需要循环的特定次数 true / false / number
autoplay	true/false 是否自动播放 ，一旦准备好，它就会开始播放
path	动画对象的相对路径。与animationData 互斥，传入网络路径，如https://labs.nearpod.com/bodymovin/demo/markus/halloween/markus.json
animationData	带有导出动画数据的JSON数据，与path互斥，优先级更高，animationData为本地路径的json，需要import * as ** from “xx.json”
name	传递该参数后，可在之后通过lottie命令引用该动画实例
rendererSettings	可传递给renderer实例的特定设置，具体可看
assetsPath	Json文件里资源的绝对路径

eg：

lottie.loadAnimation({
  container: element, // the dom element that will contain the animation
  renderer: 'svg',
  loop: true,
  autoplay: true,
  path: 'data.json' // the path to the animation json
});

动画实例有以下主要方法:

• anim.play() :播放
• anim.stop() ：停止
• anim.pause() :暂停
• anim.goToAndStop(value, isFrame) ：第一个参数是一个数值。第二个参数是一个布尔值，为第一个参数定义时间或帧。可控制播放特定帧数。
• anm.setSpeed(speed) ：可调节动画速度
  查看更多内容

Lottie提供了用于监听动画执行情况的事件：

• complete
• loopComplete
• enterFrame
• segmentStart
• config_ready(初始配置完成)
• data_ready（所有动画数据加载完成）
• DOMLoaded（元素已添加到DOM节点）
• destroy

可使用addEventListener监听事件

// 动画播放完成触发
anm.addEventListener('complete', complete);

// 当前循环播放完成触发 
anm.addEventListener('loopComplete', loopComplete);

// 播放一帧动画的时候触发 
anm.addEventListener('enterFrame', enterFrame);

2.4 优缺点分析

lottie优点
Lottie方法方案是由设计师出动画，导出为json，给前端播放。所以，使用Lottie方案的好处在于：

• 动画由设计使用专业的动画制作工具Adobe After Effects来实现，使动画实现更加方便，动画效果也更好；
• 前端可以方便的调用动画，并对动画进行控制，减少前端动画工作量；
• 设计制作动画，前端展现动画，专业人做专业事，分工合理；
• 持跨平台，开发成本较低，一套Lottie动画可以在Android/IOS/Web多端使用；
• 使用lottie方案，性能好，除了解析json，基本没有其他耗性能的操作；并且相比于需要存储较多图片的帧动画，Lottie可以节省比较多的内存空间。

lottie不足
使用Lottie方案有以下不足之处：

• lottie-web文件本身仍然比较大，lottie.js大小为513k，轻量版压缩后也有144k，经过gzip后，大小为39k。所以，需要注意lottie-web的加载。目前H5项目有离线包，PC项目也会上PWA，会对其进行缓存，保证加载速度。
• lottie动画其实可以理解为svg动画/canvas动画，不能给已存在的html添加动画效果；
• 动画json文件的导出，目前是将AE里面的参数一一导出成json内容，如果设计师建了很多的图层，可能仍然有json文件比较大（20kb）的问题。需要设计师遵循一定的规范。
  有很少量的AE动画效果，lottie无法实现，有些是因为性能问题，有些是没有做。比如：描边动画等。

2.5 其他

在线预览JSON动画网站：https://app.lottiefiles.com/preview

codepen在线链接：https://codepen.io/airnan

3.实现步骤

3.1 JSON文件的获取

注意：文中实现动画的json文件来自阿里巴巴矢量图标库

• 可以使用网络路径或本地路径

 path: props.path,//网络路径
 animationData: props.src,//本地路径，当二者同时实现优先级更高

• 文件中静态图片的处理， 将图片转换成base64编码,对json文件进行替换
  图片在线转换base64编码
  

3.2使用lottie-web封装一个动画组件

<template>
  <div ref="lottieBox"></div>
</template>

<script setup>
import lottie from "lottie-web";
import { onMounted, ref } from "vue";
const props = defineProps({
  src: {
    type: Object,
    default: ()=>{},
  },
  path: {
    type: String,
    default: "",
  },
  loop: {
    type: Boolean,
    default: true,
  },
  autoplay: {
    type: Boolean,
    default: true,
  },
});
const lottieBox = ref(null);
onMounted(() => {
  if (lottieBox.value) {
    const animation = lottie.loadAnimation({
      container: lottieBox.value,
      renderer: "svg", // 渲染方式:svg：支持交互、不会失帧、canvas、html：支持3D，支持交互
      loop: props.loop, // 循环播放，默认：true
      autoplay: props.autoplay, // 自动播放 ，默认true
      path: props.path,//网络路径
      animationData: Object.keys(props.src).length == 0 ? "" : props.src,//本地路径，优先级更高
    });
  }
});
</script>

3.3 实现一个lottie动画

• 引入组件与本地json路径：

import dataJson1 from "@/assets/json/data6.json";
import LottieAni from "@/components/lottie.vue";

<div class="ani-box">
 	<LottieAni :src="dataJson1" />
</div>
<div class="ani-box">
	<LottieAni
	   path="https://labs.nearpod.com/bodymovin/demo/markus/halloween/markus.json"
	 />
</div>

• 设置动画的样式

.ani-box {
  width: 200px;
  height: 300px;
  border: 1px solid #ccc;
  border-radius: 20px;
  box-shadow: 0px 2px 2px 1px #abb3cf;
  transition: all 0.5s;
  margin-right: 30px;
  margin-bottom: 30px;
  display: flex;
  align-items: center;
  &:hover {
    transform: scale(1.1);
  }
}

4.写在最后🍒

看完本文如果觉得有用，记得点赞+关注+收藏鸭 🍕

更多相关内容，关注 苏苏的bug，苏苏的github，苏苏的码云~

参考链接：

1.Lottie-前端实现AE动效
2.Lottie—简介
3.在线预览JSON动画网站
4.codepen在线链接