ae导出h5（前端使用lottie-web，使用AE导出的JSON动画贴心教程）
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
使用vite跑vue npm init @vitejs/app <project-name> 复制代码 安装lottie-web npm install lottie-web 复制代码 封装一个基础的组件lottie.vue, 主要就是初始化好lottie对象 ，然后把对象传递出去给其他组件用 <template> <div :style="style" ref="lavContainer"></div> </template><script> import lottie from ‘lottie-web’
export default
{
name: ‘lottie’,
props: {
options: {
type: Object,
required: true,
},
height: Number,
width: Number,
},computed
: {
style() {
return{
width: this.width ? <span class="hljs-subst">${<span class="hljs-variable language_">this</span>.width}</span>px : ‘100%’,
height: this.height ? <span class="hljs-subst">${<span class="hljs-variable language_">this</span>.height}</span>px : ‘100%’,
}
},
},mounted
() {
this.anim = lottie.loadAnimation({
container: this.KaTeX parse error: Expected EOF, got } at position 798: …ta</span>, }̲) <span cla…emit(‘animCreated’, this.anim)
},unmounted () {
this.anim && this.anim.destroy()
}
}
</script>复制代码
基于上面的组件 ，我们封装一个更具象一点的组件clickIcon,这个组件也是通用组件 ，增加了点击后 ，动画交互需要怎么走向等逻辑. <template> <div class="clickIcon"> <div class="iconBox" :style="{ width: width + px, height: height + px }" > <slot name="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 ”
;
import Lottie from “./lottie.vue ”;
let anim = null /**点击icon然后播放一段动画的组件 适合收藏 、点赞等小功能
*/export default defineComponent
({
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><style scoped> .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> <lottie class="like" :options="defaultOptions" :height="height" :defaultSlot="false" :width="width" @init="init" :toggleFun="toggle" ref="lottie" > </lottie> </template><script> import Lottie from “…/common/clickIcon.vue ”
;
import animationData from “/public/like.json ”;export default
{
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><style scoped> .hidden
{
display: none;
}
</style>复制代码
上边的效果之所以这样做 ，是因为我们下载的‘喜欢’动画的json文件 ，它是由两个状态组成的, 0-50帧是由未选中到选中状态的动画 ，50->90帧是选中状态->未选中状态的动画. 具体多少帧到多少帧可以从网站下载json文件那个窗口下面的进度去看到的.
使用喜欢组件 <template> <div id="app"> <like></like> </div> </template>import { defineComponent } from “vue ”
;
import like from “./components/like/index.vue ”;export default defineComponent
({
components: {
like,
},
});
复制代码具体效果如下
结语
以上就是利用Lottie在vue中实现一个喜欢组件了 。 其实目前只是写了这么一个demo而已 ，大家有兴趣的话 ，可以把它再实现完一下 ，现在组件还没有去记录一下组件的默认状态 ， 它可能默认就是被选中的状态. 另外我们这一次拿到的动画组件刚好是有选中和未选中两种状态的 ，在之前给大家介绍的免费下载动画json文件的网站里边还有一些动画是只给到一个选中的动画效果 ，并没有未选中的状态 ，这时候我们可以自己去找一个类似的svg图标 ，然后作为默认的图标 ，点击后 ，触发选中的动画效果. 这种场景碰到的极少 ，如果是公司项目的话 ，可以要求美工去做两个状态的动画效果 ，如果是自己的个人项目 ，然后碰到了很喜欢的免费动画 ，然而它只提供了一个状态的话 ，这时候才有用 。 我在组件其实也把这种情况考虑进去了 ，就是defaultSlot把这个属性设置成true, 然后在写组件的时候 ，添加一个插槽作为一个默认组件.
写在最后
大家可以给个点赞鼓励一下萌新嘛? 哈哈哈, 先谢过了~
创心域SEO版权声明：以上内容作者已申请原创保护，未经允许不得转载，侵权必究！授权事宜、对本内容有异议或投诉，敬请联系网站管理员，我们将尽快回复您，谢谢合作！