用戶
 找回密碼
 立即注冊

QQ登錄

只需一步,快速開始

掃一掃,登錄網站

小程序社區 首頁 教程 查看內容

02湖人vs国王:微信小程序:扭蛋抽獎機-css3動畫實現

湖人vs爵士季后赛 www.nbgeh.club Rolan 2019-11-26 00:59

最近快速上線一個抽獎活動,又不想用canvas做,思考了很久,還是決定使用css3的動畫來做,只要小球動得快,就沒人發現我這些個小球的運動路徑都是一樣的了。先上動圖。扭蛋機抽獎.gifwxml文件:view class="ball-box ...

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

扭蛋機抽獎.gif

wxml文件:

  1. <view class="ball-box">
  2. <image class="ball ball_1 {{start?'weiyi_1':''}}" src="https://acceleratepic.miniso.com/miniso/ball1.png"></image>
  3. <image class="ball ball_2 {{start?'weiyi_2':''}}" src="https://acceleratepic.miniso.com/miniso/ball1.png"></image>
  4. <image class="ball ball_3 {{start?'weiyi_3':''}}" src="https://acceleratepic.miniso.com/miniso/ball2.png"></image>
  5. <image class="ball ball_4 {{start?'weiyi_4':''}}" src="https://acceleratepic.miniso.com/miniso/ball2.png"></image>
  6. <image class="ball ball_5 {{start?'weiyi_5':''}}" src="https://acceleratepic.miniso.com/miniso/ball1.png"></image>
  7. <image class="ball ball_6 {{start?'weiyi_6':''}}" src="https://acceleratepic.miniso.com/miniso/ball2.png"></image>
  8. <image class="ball ball_7 {{start?'weiyi_7':''}}" src="https://acceleratepic.miniso.com/miniso/ball3.png"></image>
  9. <image class="ball ball_8 {{start?'weiyi_8':''}}" src="https://acceleratepic.miniso.com/miniso/ball3.png"></image>
  10. <image class="ball ball_9 {{start?'weiyi_9':''}}" src="https://acceleratepic.miniso.com/miniso/ball3.png"></image>
  11. <image class="ball ball_10 {{start?'weiyi_10':''}}" src="https://acceleratepic.miniso.com/miniso/ball4.png"></image>
  12. <image class="ball ball_11 {{start?'weiyi_11':''}}" src="https://acceleratepic.miniso.com/miniso/ball4.png"></image>
  13. </view>

這個做得我頭皮發麻,但是寫這篇文章時突然想到,為啥不用個for循環來做呢?!

  1. <view class="ball-box">
  2. <image wx:for="ballList" wx:for-index="i" class="ball ball_{{i}} {{start?'weiyi_{{i}}':''}}" src="https://acceleratepic.miniso.com/miniso/ball{{i}}.png"></image>
  3. </view>

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

wxss文件:

  1. .weiyi_1 {
  2. animation: around1 1.5s linear infinite;
  3. -webkit-animation: around1 1.5s linear infinite;
  4. }

簡單的動畫

  1. /* 位移 */
  2. @-webkit-keyframes around1 {
  3. 0% {
  4. -webkit-transform: translate(0rpx, 0rpx)
  5. }
  6. 20% {
  7. -webkit-transform: translate(100rpx, -250rpx)
  8. }
  9. 40% {
  10. -webkit-transform: translate(200rpx, -100rpx)
  11. }
  12. 60% {
  13. -webkit-transform: translate(50rpx, -230rpx)
  14. }
  15. 80% {
  16. -webkit-transform: translate(300rpx, -50rpx)
  17. }
  18. 100% {
  19. -webkit-transform: translate(0, 0)
  20. }
  21. }
  22. @keyframes around1 {
  23. 0% {
  24. transform: translate(0rpx, 0rpx)
  25. }
  26. 20% {
  27. transform: translate(100rpx, -250rpx)
  28. }
  29. 40% {
  30. transform: translate(200rpx, -100rpx)
  31. }
  32. 60% {
  33. transform: translate(50rpx, -230rpx)
  34. }
  35. 80% {
  36. transform: translate(300rpx, -50rpx)
  37. }
  38. 100% {
  39. transform: translate(0, 0)
  40. }
  41. }

簡單的位移 
其他就不一一列出來了,反正都差不多,改變一下運動軌跡就行了。

js文件:

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

  1. _this.setData({
  2. start: true
  3. })
  4. 控制抽獎開始
  5. setTimeout(() => {
  6. _this.setData({
  7. start: false,
  8. end: true
  9. })
  10. //其他代碼部分
  11. //time是接口請求開始到結束的時間
  12. }, Math.ceil(time / 1500) * 1500 - time)

這里用了一個setTimeout,用于設置動畫結束時間,優化一下動畫,不讓結束看起來太突兀。 
1500是wxss里這是的動畫時間。

總結:

簡單的扭蛋機,有時間用canvas來做做。

分享至 : QQ空間
收藏
原作者: 空箜崆 來自: 簡書
福彩3d和值走势图最近500 投行最赚钱 欢乐生肖官方网站 菜市场买冻品很赚钱 试玩赚钱任务少 澳洲幸运8开奖号码 波克捕鱼千炮版兑换码 湖南幸运赛车直播视频 百家利官方平台777 3d彩票论坛网站 天天彩票苹果 体彩p3试机号查询 利赢彩票安卓 山西泳坛夺金官网 三张牌 11选五复式投注表