mpvue實現(xiàn)小程序簽到金幣掉落動畫(api實現(xiàn))
這里使用小程序自帶的api來實現(xiàn),用小程序來寫動畫的惡心點在于,沒有幀,只能用setimeout 來作為幀來使用,
下面是實現(xiàn)代碼, 下面是簡單用div代替了圖片,需要什么圖片,可以自行替換相應(yīng)的div即可
需要變成原生小程序,則需要修改一下代碼的寫法
效果圖:
創(chuàng)建金幣動畫組件 clockAnimation.vue
<template> <div class="container" v-if='isShow'> <!-- 創(chuàng)建金幣對象 --> <!-- 大金幣 --> <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) //動畫結(jié)束,重置動畫初始位置 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>
總結(jié)
以上所述是小編給大家介紹的mpvue實現(xiàn)小程序簽到金幣掉落動畫(api實現(xiàn)),希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
如果你覺得本文對你有幫助,歡迎轉(zhuǎn)載,煩請注明出處,謝謝!
相關(guān)文章
js從輸入框讀取內(nèi)容,比較兩個數(shù)字的大小方法
下面小編就為大家?guī)硪黄猨s從輸入框讀取內(nèi)容,比較兩個數(shù)字的大小方法。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-03-03js實現(xiàn)動畫特效的文字鏈接鼠標(biāo)懸停提示的方法
這篇文章主要介紹了js實現(xiàn)動畫特效的文字鏈接鼠標(biāo)懸停提示的方法,實例分析了javascript操作css的技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-03-03