vue项目开发时，总是会想给页面增加一些效果，比如点击后，触发一些动画，常见的比如收藏按钮。点击后，想让按钮有个动画效果。
点击效果
组件使用
<template>
<div class="lottie">
<lottie :status.sync="status" :path="data"></lottie>
</div>
</template>
<script>
import lottie from "../../lottie/star/lottie";
import data from './data.json'
export default {
name: 'lottieWeb3',
components: {lottie},
props: {
id: {
type: String,
default() {
return ''
}
}
},
data() {
return {
data,
status: true
}
},
watch: {},
mounted() {
},
methods: {}
}
</script>
<style lang="scss" scoped>
.lottie {
position: relative;
width: 100%;
height: calc(100% - 0px);
}
</style>
组件封装
/**
* @Author: 858834013@qq.com
* @Name: lottieStar
* @Date: 2022-08-13
* @Desc: 动画播放组件
*/
<template>
<div @click="getChangeStatus" ref="lottie" class="lottie">
</div>
</template>
<script>
import lottie from 'lottie-web'
export default {
props: {
width: {
type: Number,
value: 100
},
canvasId: {
type: String,
default: 'canvasId'
},
status: {
type: Boolean,
value: false
},
height: {
type: Number,
value: 100
},
renderer: {
type: String,
value: 'svg'
},
path: {
type: String | Object,
observer: function observer() {
this.intLottie();
}
}
},
mounted() {
this.intLottie();
},
data() {
return {
lottie: null
}
},
methods: {
intLottie() {
// 渲染主图按钮动画
var that = this;
that.lottie = lottie.loadAnimation({
container: this.$refs.lottie, // 包含动画的dom元素
renderer: this.renderer, // 渲染出来的是什么格式
loop: false, // 循环播放
autoplay: false, // 自动播放
animationData: this.path
});
this.getStatus()
},
getStatus() {
this.lottie.goToAndStop(this.status ? this.lottie.getDuration(true) - 1 : 0, true)
},
getChangeStatus() {
var that = this;
that.lottie.setDirection(this.status ? -1 : 1)
that.$emit('update:status', this.status ? false : true)
that.lottie.play()
},
destory: function destory() {
if (this.lottie) {
this.lottie.destroy();
this.lottie = null;
}
}
},
onUnload() {
this.destory();
}
}
</script>
<style>
.lottie {
width: 100%;
height: 100%;
}
</style>
