uniapp 微信小程序开发,增加了一些lottie动效,这些动效需要结合接口请求触发,比如收藏功能,当收藏后,接口返回数据触发lottie动画。这样就实现了一个动画交互功能。
点击实现收藏,再点击取消收藏。
收藏组件代码
<template>
<div class="icon_star" @click="fav">
<operation :status="status" width='100' height='100' canvasId="canvasId3"
path="https://images.wanjunshijie.com/mini/chuban/static/collection/data1.json"></operation>
</div>
</template>
<script>
import {
add_fav,
del_fav
} from '@/config/api.js'
import operation from '@/components/lottie/getOperation.vue'
export default {
components: {operation},
data() {
return {
}
},
props: {
goods_id: {
type: String | Number,
default () {
return '';
}
},
fav_id: {
type: Array,
default () {
return [];
}
},
},
computed: {
status: function() {
var status = false
if (this.fav_id && this.fav_id.length > 0) {
status = true
}
return status
}
},
methods: {
fav() {
if (this.status) {
this.del_fav()
} else {
this.add_fav()
}
},
add_fav() {
var that = this;
add_fav({
goods_id: this.goods_id
}, {
params: {},
custom: {
auth: true
}
}).then(res => {
if (res.code == 1) {
that.$emit('getdata', 0)
}
}).catch(err => {
})
},
del_fav() {
var that = this;
del_fav({
goods_id: this.goods_id
}, {
params: {},
custom: {
auth: true
}
}).then(res => {
if (res.code == 1) {
that.$emit('getdata', 0)
}
}).catch(err => {
})
},
}
}
</script>
<style lang="scss">
.icon_star {
width: 90rpx;
height: 90rpx;
position: relative;
z-index: 100;
margin-right: -20rpx;
margin-top: 140rpx;
}
</style>
动画组件代码
<template>
<div class="lottieBody">
<canvas :id="canvasId" :canvas-id="canvasId" type="2d" class="lottie-canvas"></canvas>
</div>
</template>
<script>
import lottie from 'lottie-miniprogram'
export default {
props: {
width: {
type: Number,
value: 100
},
canvasId: {
type: String,
default: 'canvasId'
},
height: {
type: Number,
value: 100
},
status: {
type: Boolean,
value: false
},
path: {
type: String,
observer: function observer() {
this.init();
}
}
},
onReady() {
// 初始动画
var that = this;
that.init();
},
data() {
return {
show: true,
_inited: false
}
},
watch: {
status() {
var that = this;
that.lottie.setDirection(this.status ? 1 : -1)
that.lottie.play()
},
},
methods: {
getChangeStatus() {
var that = this;
console.log(this.status)
that.lottie.setDirection(this.status ? -1 : 1)
that.$emit('update:status', this.status ? false : true)
that.lottie.play()
},
getStatus() {
this.lottie.goToAndStop(this.status ? this.lottie.getDuration(true) - 1 : 0, true)
},
init() {
if (this._inited) {
return
}
this.createSelectorQuery().selectAll('#' + this.canvasId).node(res => {
console.log(res)
const canvas = res[0].node
const context = canvas.getContext('2d')
canvas.width = this.width
canvas.height = this.height
lottie.setup(canvas)
this.lottie = lottie.loadAnimation({
loop: false,
autoplay: false,
path: this.path,
rendererSettings: {
context,
},
})
this.getStatus()
this._inited = true
}).exec()
},
destory: function destory() {
if (this.lottie) {
this.lottie.destroy();
this.lottie = null;
}
}
},
onUnload() {
this.destory();
}
}
</script>
<style>
.lottie-canvas {
width: 100%;
height: 100%;
}
.lottieBody {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: nowrap;
flex-direction: row;
align-content: flex-start;
position: relative;
}
</style>