前端使用lottie-web，使用AE导出的JSON动画贴心教程

Lottie简介

官方介绍：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-web 在前端的使用

1. 安装lottie-web

npm install lottie-web
复制代码

1. lottie-web的基本用法

import lottie from'lottie-web'const animation = lottie.loadAnimation({container: document.getElementById('domId'),// 绑定dom节点renderer:'svg',// 渲染方式:svg、canvasloop:true,// 是否循环播放，默认：falseautoplay:true,// 是否自动播放, 默认trueanimationData:// AE动画使用bodymovie导出为json数据})

1. json简单解释

{"v":"5.1.13",// bodymovin 版本"fr":30,// 帧率"ip":0,// 起始关键帧"op":20,// 结束关键帧"w":150,// 视图宽"h":130,// 视图高"nm":"鹅头收起动画",// 名称"ddd":0,// 3d"assets":[],// 资源集合 "layers":[],// 图层集合"masker":[]// 蒙层集合}

1. lottie-web 常用方法 前面我们就初始化了一个lottie对象了. 然后我们介绍它的一些常用方法

animation.play();// 播放，从当前帧开始播放

animation.stop();// 停止，并回到第0帧

animation.pause();// 暂停，并保持当前帧

animation.goToAndStop(value, isFrame);// 跳到某个时刻/帧并停止isFrame(默认false)指示value表示帧还是时间(毫秒)

animation.goToAndPlay(value, isFrame);// 跳到某个时刻/帧并进行播放

animation.goToAndStop(30,true);// 跳转到第30帧并停止

animation.goToAndPlay(300);// 跳转到第300毫秒并播放

animation.playSegments(arr, forceFlag);// arr可以包含两个数字或者两个数字组成的数组，forceFlag表示是否立即强制播放该片段

animation.playSegments([10,20],false);// 播放完之前的片段，播放10-20帧

animation.playSegments([[0,5],[10,18]],true);// 直接播放0-5帧和10-18帧

animation.setSpeed(speed);// 设置播放速度，speed为1表示正常速度

animation.setDirection(direction);// 设置播放方向，1表示正向播放，-1表示反向播放

animation.destroy();// 删除该动画，移除相应的元素标签等。

Lottie-web 常用的事件

animation.addEventListener('data_ready',()=>{})// 动画数据加载完毕
animation.addEventListener('config_ready',()=>{})// 完成初始配置后
animation.addEventListener('data_failed',()=>{})// 加载动画数据失败
animation.addEventListener('loaded_images',()=>{})// 所有图片加载成功或者失败
animation.addEventListener('DOMLoaded',()=>{})// 将元素添加到DOM后* complete: 播放完成（循环播放下不会触发）
* loopComplete: 当前循环下播放（循环播放/非循环播放）结束时触发
* enterFrame: 每进入一帧就会触发，播放时每一帧都会触发一次，stop方法也会触发
* segmentStart: 播放指定片段时触发，playSegments、resetSegments等方法刚开始播放指定片段时会发出，如果playSegments播放多个片段，多个片段最开始都会触发。
* data_ready: 动画json文件加载完毕触发
* DOMLoaded: 动画相关的dom已经被添加到html后触发
* destroy: 将在动画删除时触发

Lottie的免费资源

之前我们说过

Lottie

的动画是通过AE制作好了动画后，再使用bodymovie导出为json格式。其实有一个网站，它提供了一些免费的动画(当然也有付费的)直接有我们需要的动画json数据.

如下面的动图, 我们找到我们想要的动画，然后点击后，弹出窗口，点击下载，格式为JSON。然后就能把这个动画的json数据用到我们自己的项目里边去了.

好了介绍完了它的用法后，我们现在就去

vue

中去做一个实战

在vue中使用lottie

1. 使用vite跑vue

npm init @vitejs/app <project-name>
复制代码

1. 安装lottie-web

npm install lottie-web
复制代码

1. 封装一个基础的组件lottie.vue, 主要就是初始化好lottie对象，然后把对象传递出去给其他组件用

<template>
  <div:style="style"ref="lavContainer"></div>
</template>

<script> import lottie from‘lottie-web’ exportdefault { name: ‘lottie’, props: { options: { type: Object, required: true, }, height: Number, width: Number, }, computed: { style() { return { width: this.width ? ``` ${this.width}px ``` : ‘100%’, height: this.height ? ``` ${this.height}px ``` : ‘100%’, } }, }, mounted() { this.anim = lottie.loadAnimation({ container: this.KaTeX parse error: Expected 'EOF', got '}' at position 798: …ta, }̲) <span cla…emit(‘animCreated’, this.anim) }, unmounted () { this.anim && this.anim.destroy() } } </script>

复制代码

1. 基于上面的组件，我们封装一个更具象一点的组件clickIcon,这个组件也是通用组件，增加了点击后，动画交互需要怎么走向等逻辑.

<template>
  <divclass="clickIcon"><divclass="iconBox":style="{ width: width + 'px', height: height + 'px' }"
    ><slotname="svg"v-bind:data="{ toggle, flag, iconWidth, iconHeight }"></slot><lottie
        @click="toggle":class="{ show: flag === true || !defaultSlot }"class="like"style="display: none;":options="options":height="height":width="width"v-on:animCreated="handleAnimation"
      /></div></div>
</template>

<script> import { computed, ref, defineComponent } from“vue”; importLottiefrom“./lottie.vue”; let anim = null /** - 点击icon然后播放一段动画的组件 - 适合收藏、点赞等小功能 */ exportdefaultdefineComponent({ name: “clickIcon”, props: { // 宽度 width: { type: Number, default: 100, }, // 高度 height: { type: Number, default: 100, }, // 初始化Lottie需要的参数 options: { type: Object, default: () => {}, }, // 是否需要一个插槽，显示一个默认的图标 defaultSlot: { type: Boolean, default: true }, // 从外面传递的一个点击后需要的交互效果 toggleFun: { type: Function, default: null } }, components: { lottie: Lottie, }, emits: [‘init’], setup(props, { emit }) { // 动画速度 const animationSpeed = 2 // 点击交互标识 let flag = ref(false); // 图标高度 const iconWidth = computed(() => { return props.width; }); // 图标宽度 const iconHeight = computed(() => { return props.height; }); // 点击图标交互 const toggle = function() { if (!props.defaultSlot) { props.toggleFun && props.toggleFun(anim) } else { flag.value = !flag.value; if (flag.value) { anim.play(); } else { anim.stop(); } } }; // 获取anim对象 const handleAnimation = function(animated) { anim = animated; onSpeedChange() emit(‘init’, animated) } // 停止动画 const stop = function() { anim.stop(); } // 播放动画 const play = function() { anim.play(); } // 暂停动画 const pause = function() { anim.pause(); } // 控制播放速度 const onSpeedChange = function() { anim.setSpeed(animationSpeed); } return { iconWidth, iconHeight, handleAnimation, flag, toggle, stop, play, pause }; }, }); </script>

<stylescoped>
.iconBox {
position: relative;
}
.show {
display: inline-block !important;
}
.hidden {
display: none !important;
}
.like {
cursor: pointer;
}
.icon {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
</style>
复制代码

接下来我们就写一个

喜欢

组件

like.vue

，如之前我们看到的效果 先把下载的动画json文件，放到资源文件目录,然后我们再用代码调用它使用.

<template>
  <lottieclass="like":options="defaultOptions":height="height":defaultSlot="false":width="width"
    @init="init":toggleFun="toggle"ref="lottie"
  ></lottie>
</template>

<script> importLottiefrom“…/common/clickIcon.vue”; import animationData from“/public/like.json”; exportdefault { name: “app”, components: { lottie: Lottie, }, props: { width: { type: Number, default: 60, }, height: { type: Number, default: 60, }, }, methods: { init (animation) { animation && animation.goToAndStop(0, true) }, toggle (animation) { if (this.toggleFlag) { animation.playSegments([50, 90], true); // 从50帧播放到最后 } else { animation && animation.playSegments([0, 50], true); // 从第0帧播放到50帧 } this.toggleFlag = !this.toggleFlag } }, data() { return { toggleFlag: false, defaultOptions: { name: “like”, animationData: animationData, autoplay: false, loop: false, } }; } }; </script>

<stylescoped>
.hidden {
display: none;
}
</style>

复制代码

上边的效果之所以这样做，是因为我们下载的‘喜欢’动画的json文件，它是由两个状态组成的, 0-50帧是由未选中到选中状态的动画，50->90帧是选中状态->未选中状态的动画. 具体多少帧到多少帧可以从网站下载json文件那个窗口下面的进度去看到的.

1. 使用喜欢组件

<template>
  <divid="app"><like></like></div>
</template>

<script> import { defineComponent } from“vue”; import like from“./components/like/index.vue”; exportdefaultdefineComponent({ components: { like, }, }); 复制代码 具体效果如下  ### 结语 以上就是利用Lottie在vue中实现一个 ``` 喜欢 ``` 组件了。 其实目前只是写了这么一个demo而已，大家有兴趣的话，可以把它再实现完一下，现在组件还没有去记录一下组件的默认状态， 它可能默认就是被选中的状态. 另外我们这一次拿到的动画组件刚好是有选中和未选中两种状态的，在之前给大家介绍的免费下载动画json文件的网站里边还有一些动画是只给到一个选中的动画效果，并没有未选中的状态，这时候我们可以自己去找一个类似的svg图标，然后作为默认的图标，点击后，触发选中的动画效果. 这种场景碰到的极少，如果是公司项目的话，可以要求美工去做两个状态的动画效果，如果是自己的个人项目，然后碰到了很喜欢的免费动画，然而它只提供了一个状态的话，这时候才有用。 我在组件其实也把这种情况考虑进去了，就是 ``` defaultSlot ``` 把这个属性设置成true, 然后在写组件的时候，添加一个插槽作为一个默认组件. ### 写在最后 大家可以给个点赞鼓励一下萌新嘛? 哈哈哈, 先谢过了~