这里使用小程序自带的api来实现，用小程序来写动画的恶心点在于，没有帧，只能用setimeout 来作为帧来使用，
下面是实现代码， 下面是简单用div代替了图片，需要什么图片，可以自行替换相应的div即可
需要变成原生小程序，则需要修改一下代码的写法
效果图：
创建金币动画组件 clockAnimation.vue
<template>
<div class="container" v-if='isShow'>
<!-- 创建金币对象 -->
<!-- 大金币 -->
<div :class="coinShow" :animation="bgCoinAnimation" ></div>
<!-- 7个小金币 -->
<div :class="coinShow" :animation="coinAnimation1">1</div>
<div :class="coinShow" :animation="coinAnimation2">2</div>
<div :class="coinShow" :animation="coinAnimation3">3</div>
<div :class="coinShow" :animation="coinAnimation4">4</div>
<div :class="coinShow" :animation="coinAnimation5">5</div>
<div :class="coinShow" :animation="coinAnimation6">6</div>
<div :class="coinShow" :animation="coinAnimation7">7</div>
</div>
</template>
<script>
export default{
data() {
return {
coinShow:false,//金币对象是否显示，用于重置动画时，隐藏对象
isShow:false, //遮罩显示
//大金币动画
bgCoinAnimation:{},
//小金币动画
coinAnimation1:{},
coinAnimation2:{},
coinAnimation3:{},
coinAnimation4:{},
coinAnimation5:{},
coinAnimation6:{},
coinAnimation7:{},
}
},
methods: {
//动画
animation(){
this.coinShow =false
this.isShow = true
this.bgAnimation()
this.smallAnimation()
},
//大金币动画
bgAnimation(){
var animation = wx.createAnimation({
duration:1000,
timingFunction: 'ease-in-out',
})
this.timer = setTimeout(()=>{
animation.translate3d(0,30,0).step().translate3d(0,0,0).step().rotate(80).step({duration:400}).rotate(0).step({duration:500})
this.bgCoinAnimation = animation.export()
},100)
setTimeout(()=>{
animation.opacity(0).scale(4).step()
this.bgCoinAnimation = animation.export()
},3000)
},
//小金币动画
smallAnimation(){
var animation = wx.createAnimation({
duration:1000,
timingFunction: 'ease-in-out',
})
animation.translate3d(0,30,0).step().translate3d(0,0,0).step()
setTimeout(()=>{
this.coinAnimation1 = animation
},300)
setTimeout(()=>{
this.coinAnimation2 = animation
},500)
setTimeout(()=>{
this.coinAnimation3 = animation
},600)
setTimeout(()=>{
this.coinAnimation4 = animation
},700)
setTimeout(()=>{
this.coinAnimation5 = animation
},800)
setTimeout(()=>{
this.coinAnimation6 = animation
},900)
setTimeout(()=>{
this.coinAnimation7 = animation.export()
},1000)
//小金币掉落动画
setTimeout(()=>{
animation.translate3d(0,1000,0).step()
this.coinAnimation1 = animation
this.coinAnimation2 = animation
this.coinAnimation3 = animation
this.coinAnimation4 = animation
this.coinAnimation5= animation
this.coinAnimation6 = animation
this.coinAnimation7 = animation
},3000)
//动画结束，重置动画初始位置
setTimeout(()=>{
this.coinShow =true
var animation = wx.createAnimation({
duration:300,
timingFunction: 'ease-in-out',
})
var animation2 = wx.createAnimation({
duration:300,
timingFunction: 'ease-in-out',
})
animation.translate3d(0,-1000,0).step()
animation2.translate3d(0,-1000,0).step().scale(1).step()
this.bgCoinAnimation = animation2.export()
this.coinAnimation1 = animation
this.coinAnimation2 = animation
this.coinAnimation3 = animation
this.coinAnimation4 = animation
this.coinAnimation5= animation
this.coinAnimation6 = animation
this.coinAnimation7 = animation
setTimeout(()=>{
this.isShow = false
},500)
},4000)
}
},
mounted () {
},
onShow(){
}
}
</script>
<style lang="scss" scoped>
.container{
position:absolute;
top:0;
left: 0;
width: 100%;
height: 100vh;
// z-index: 999;
background: rgba(5, 5, 5,0.5)
}
.bgCoin{
background: rgb(233, 201, 19);
border-radius: 50%;
width: 100rpx;
height: 100rpx;
position: absolute;
left: 350rpx;
margin-left:-50rpx;
top:600rpx;
text-align: center;
line-height: 100rpx;
color: #ffffff;
transform:rotate(180deg);
transform:translate3d(0,-1000rpx,0);
}
.coinShow{
opacity: 0;
}
.coin{
background: rgb(233, 201, 19);
border-radius: 50%;
width: 50rpx;
height: 50rpx;
position: absolute;
font-size: 24rpx;
text-align: center;
line-height: 40rpx;
color: #ffffff;
transform:translate3d(0,-1000rpx,0);
}
.coin1{
top:40rpx;
left:60rpx;
}
.coin2{
top:90rpx;
left:200rpx;
}
.coin3{
top:860rpx;
left:250rpx;
}
.coin4{
top:150rpx;
left:600rpx;
}
.coin5{
top:270rpx;
left:500rpx;
}
.coin6{
top:490rpx;
left:580rpx;
}
.coin7{
top:350rpx;
left:150rpx;
}
</style>
使用 引入组件
<template>
<view>
<view @click="clockInAnimation">立即签到</view>
<clockAnimation :isShow="clockIsShow" ref="clockAnimation"></clockAnimation>
</view>
</template>
<script>
//引入组件
import clockAnimation from "../../components/clockAnimation.vue";
export default {
components: {
clockAnimation
},
data() {
return {
clockIsShow: false,
}
},
methods: {
clockInAnimation() {
this.clockIsShow = true;
this.$refs.clockAnimation.animation();
},
}
</script>
总结
以上所述是小编给大家介绍的mpvue实现小程序签到金币掉落动画(api实现),希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！