如何使用mpvue实现小程序签到金币掉落动画 - 行业资讯 - 肥雀云

　　介绍

这篇文章给大家分享的是有关如何使用mpvue实现小程序签到金币掉落动画的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。

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

效果图:

创建金币动画组件clockAnimation。vue

& lt; template> 　　,& lt; div 类=癱ontainer", v=& # 39; isShow& # 39;比; 　　& lt; !——,才能创建金币对象,——比; 　　& lt; !——,才能大金币,——比; 　　& lt;才能div :类=癱oinShow ? & # 39; coinShow bgCoin& # 39;: & # 39; bgCoin& # 39;“,:动画=癰gCoinAnimation",祝辞& lt;/div> 　　& lt;才能!——,7个小金币,——比; 　　& lt;才能div :类=癱oinShow ? & # 39; coinShow coin coin1& # 39;: & # 39;, coin coin1& # 39;“,:动画=癱oinAnimation1"在1 & lt;/div> 　　& lt;才能div :类=癱oinShow ? & # 39; coinShow coin coin2& # 39;: & # 39;, coin coin2& # 39;“,:动画=癱oinAnimation2"在2 & lt;/div> 　　& lt;才能div :类=癱oinShow ? & # 39; coinShow coin coin3& # 39;: & # 39;, coin coin3& # 39;“,:动画=癱oinAnimation3"在3 & lt;/div> 　　& lt;才能div :类=癱oinShow ? & # 39; coinShow coin coin4& # 39;: & # 39;, coin coin4& # 39;“,:动画=癱oinAnimation4"在4 & lt;/div> 　　& lt;才能div :类=癱oinShow ? & # 39; coinShow coin coin5& # 39;: & # 39;, coin coin5& # 39;“,:动画=癱oinAnimation5"在5 & lt;/div> 　　& lt;才能div :类=癱oinShow ? & # 39; coinShow coin coin6& # 39;: & # 39;, coin coin6& # 39;“,:动画=癱oinAnimation6"在6 & lt;/div> 　　& lt;才能div :类=癱oinShow ? & # 39; coinShow coin coin7& # 39;: & # 39;, coin coin7& # 39;“,:动画=癱oinAnimation7"在7 & lt;/div> 　　,& lt;/div> 　　& lt;/template> 　　& lt; script> 　　默认,export { 　　数据才能(),{ 　　,,return { 　　,,,coinShow:假的,//金币对象是否显示,用于重置动画时,隐藏对象　　,,,isShow:假的,,//遮罩显示　　,,//大金币动画　　,,bgCoinAnimation: {}, 　　,,//小金币动画　　,,coinAnimation1: {}, 　　,,coinAnimation2: {}, 　　,,coinAnimation3: {}, 　　,,coinAnimation4: {}, 　　,,coinAnimation5: {}, 　　,,coinAnimation6: {}, 　　,,coinAnimation7: {}, 　　,,} 　　,,}, 　　方法:才能,{ 　　,,,,,//动画　　,,动画(){ 　　,,,this.coinShow =false 　　,,,,this.isShow =,真的　　,,,this.bgAnimation () 　　,,,this.smallAnimation () 　　,,},//大才能金币动画　　bgAnimation才能(){ 　　,,,,var animation =, wx.createAnimation ({ 　　,,,时间:1000年　　,,,timingFunction: & # 39; ease-in-out& # 39; 　　})才能　　,,,this.timer =, setTimeout(()=祝辞{ 　　,,,,,animation.translate3d (0 30 0) .step () .translate3d (0, 0, 0) .step () .rotate (80) .step({时间:400}).rotate (0) .step({时间:500}) 　　,,this.bgCoinAnimation =, animation.export () 　　,,,},100) 　　,,,,setTimeout(()=祝辞{ 　　,,animation.opacity (0) .scale (4) .step () 　　,,this.bgCoinAnimation =, animation.export () 　　,,},3000) 　　,,}, 　　,,//小金币动画　　,,smallAnimation () { 　　,,,,,var animation =, wx.createAnimation ({ 　　,,,时间:1000年　　,,,timingFunction: & # 39; ease-in-out& # 39; 　　})才能　　30岁的animation.translate3d才能(0 0).step () .translate3d (0, 0, 0) .step () 　　setTimeout(才能()=祝辞{ 　　,,,this.coinAnimation1 =,动画　　,,},300) 　　setTimeout(才能()=祝辞{ 　　,,,this.coinAnimation2 =,动画　　,,},500) 　　setTimeout(才能()=祝辞{ 　　,,,this.coinAnimation3 =,动画　　,,},600) 　　setTimeout(才能()=祝辞{ 　　,,,this.coinAnimation4 =,动画　　,,},700) 　　setTimeout(才能()=祝辞{ 　　,,,this.coinAnimation5 =,动画　　,,},800) 　　setTimeout(才能()=祝辞{ 　　,,,this.coinAnimation6 =,动画　　,,},900) 　　setTimeout(才能()=祝辞{ 　　,,,this.coinAnimation7 =, animation.export () 　　,,},1000) 　　,//小金币掉落动画　　setTimeout(才能()=祝辞{ 　　,,,animation.translate3d (0 1000 0) .step () 　　,,,this.coinAnimation1 =,动画　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null