背景
👏最近在工作过程中遇到一些用css3不好实现的动画，gif又满足不了需求，那么就试试lottie动画吧（需要你们的ui小伙伴提供动画的json文件哦~）
🥇文末分享源代码。记得点赞+关注+收藏！
1.实现效果
GIF.gif
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
image.png
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
image.png
codepen在线链接：https://codepen.io/airnan
image.png
3.实现步骤
3.1 JSON文件的获取
注意：文中实现动画的json文件来自阿里巴巴矢量图标库
- 可以使用网络路径或本地路径
path: props.path,//网络路径
animationData: props.src,//本地路径，当二者同时实现优先级更高
- 文件中静态图片的处理， 将图片转换成base64编码,对json文件进行替换
图片在线转换base64编码
image.png
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);
}
}
网友评论