钱币掉落动画android,mpvue实现小程序签到金币掉落动画(api实现)
這里使用小程序自帶的api來實現，用小程序來寫動畫的惡心點在于，沒有幀，只能用setimeout 來作為幀來使用，
下面是實現代碼， 下面是簡單用div代替了圖片，需要什么圖片，可以自行替換相應的div即可
需要變成原生小程序，則需要修改一下代碼的寫法
效果圖：
創建金幣動畫組件 clockAnimation.vue
1234567export 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(){
}
}
.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;
}
使用 引入組件
立即簽到
//引入組件
import clockAnimation from "../../components/clockAnimation.vue";
export default {
components: {
clockAnimation
},
data() {
return {
clockIsShow: false,
}
},
methods: {
clockInAnimation() {
this.clockIsShow = true;
this.$refs.clockAnimation.animation();
},
}
總結
以上所述是小編給大家介紹的mpvue實現小程序簽到金幣掉落動畫(api實現),希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！
如果你覺得本文對你有幫助，歡迎轉載，煩請注明出處，謝謝！
總結
以上是生活随笔為你收集整理的钱币掉落动画android,mpvue实现小程序签到金币掉落动画(api实现)的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： R软件中调用windows字体二
- 下一篇： html5倒计时秒杀怎么做,vue 设