mpvue实现小程序签到金币掉落动画(api实现)

这里使用小程序自带的api来实现，用小程序来写动画的恶心点在于，没有帧，只能用setimeout

这里使用小程序自带的api来实现，用小程序来写动画的恶心点在于，没有帧，只能用setimeout 来作为帧来使用，

下面是实现代码， 下面是简单用div代替了图片，需要什么图片，可以自行替换相应的div即可

需要变成原生小程序，则需要修改一下代码的写法

效果图：

创建金币动画组件 clockAnimation.vue

<template>
 <div class="container" v-if='isShow'>
 <!-- 创建金币对象 -->
 <!-- 大金币 -->
 <div :class="coinShow?'coinShow bgCoin':'bgCoin'" :animation="bgCoinAnimation" ></div>
 <!-- 7个小金币 -->
 <div :class="coinShow?'coinShow coin coin1':' coin coin1'" :animation="coinAnimation1">1</div>
 <div :class="coinShow?'coinShow coin coin2':' coin coin2'" :animation="coinAnimation2">2</div>
 <div :class="coinShow?'coinShow coin coin3':' coin coin3'" :animation="coinAnimation3">3</div>
 <div :class="coinShow?'coinShow coin coin4':' coin coin4'" :animation="coinAnimation4">4</div>
 <div :class="coinShow?'coinShow coin coin5':' coin coin5'" :animation="coinAnimation5">5</div>
 <div :class="coinShow?'coinShow coin coin6':' coin coin6'" :animation="coinAnimation6">6</div>
 <div :class="coinShow?'coinShow coin coin7':' coin coin7'" :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实现),希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！ 如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！