微信小程序 扭蛋抽獎機css3動畫實現(xiàn)詳解

第微信小程序扭蛋抽獎機css3動畫實現(xiàn)詳解前言

最近快速上線一個抽獎活動，又不想用canvas做，思考了很久，還是決定使用css3的動畫來做，只要小球動得快，就沒人發(fā)現(xiàn)我這些個小球的運動路徑都是一樣的了。先上動圖

wxml文件：

view

imageclass="ballball_1{{start'weiyi_1':''}}"src="/miniso/ball1.png"/image

imageclass="ballball_2{{start'weiyi_2':''}}"src="/miniso/ball1.png"/image

imageclass="ballball_3{{start'weiyi_3':''}}"src="/miniso/ball2.png"/image

imageclass="ballball_4{{start'weiyi_4':''}}"src="/miniso/ball2.png"/image

imageclass="ballball_5{{start'weiyi_5':''}}"src="/miniso/ball1.png"/image

imageclass="ballball_6{{start'weiyi_6':''}}"src="/miniso/ball2.png"/image

imageclass="ballball_7{{start'weiyi_7':''}}"src="/miniso/ball3.png"/image

imageclass="ballball_8{{start'weiyi_8':''}}"src="/miniso/ball3.png"/image

imageclass="ballball_9{{start'weiyi_9':''}}"src="/miniso/ball3.png"/image

imageclass="ballball_10{{start'weiyi_10':''}}"src="/miniso/ball4.png"/image

imageclass="ballball_11{{start'weiyi_11':''}}"src="/miniso/ball4.png"/image

/view

這個做得我頭皮發(fā)麻，但是寫這篇文章時突然想到，為啥不用個for循環(huán)來做呢？！

view

imagewx:for="ballList"wx:for-index="i"class="ballball_{{i}}{{start'weiyi_{{i}}':''}}"src="/miniso/ball{{i}}.png"/image

/view

這樣看起來是不是舒服多了，因為是這段代碼現(xiàn)場手寫，如果有啥bug也不好說。

wxss文件：

.weiyi_1{

animation:around11.5slinearinfinite;

-webkit-animation:around11.5slinearinfinite;

}

簡單的動畫

/*位移*/

@-webkit-keyframesaround1{

0%{

-webkit-transform:translate(0rpx,0rpx)

20%{

-webkit-transform:translate(100rpx,-250rpx)

40%{

-webkit-transform:translate(200rpx,-100rpx)

60%{

-webkit-transform:translate(50rpx,-230rpx)

80%{

-webkit-transform:translate(300rpx,-50rpx)

100%{

-webkit-transform:translate(0,0)

@keyframesaround1{

0%{

transform:translate(0rpx,0rpx)

20%{

transform:translate(100rpx,-250rpx)

40%{

transform:translate(200rpx,-100rpx)

60%{

transform:translate(50rpx,-230rpx)

80%{

transform:translate(300rpx,-50rpx)

100%{

transform:translate(0,0)

}

簡單的位移

其他就不一一列出來了，反正都差不多，改變一下運動軌跡就行了。

js文件：

相比喪病的樣式，js文件就簡單多了。

_this.setData({

start:true

})

控制抽獎開始

setTimeout(()={

_this.setData({

start:false,

end:true

//其他代碼部分

//time是接口請求開始到結束的時間

},Math.ceil(time/1500)*1500-time)

這里用了一個setTimeout，用于設置動畫結束時