天貓超市翻牌的轉盤經常用,以前做Android,沒啥想法,現在嘗試微信小程序,看到別人家APP裡有啥好玩的,就想去做一個.
上GIF看效果:
簡要的說一下.
1.外面一圈閃爍的小球是用js控制的樣式.500ms改變一次樣式.簡單粗暴;
2.抽獎的item也是js控制背景,但是怎麼樣讓它優雅的停下來是個問題.動畫中有timingFunction可以設置速度.自己用js就沒那麼簡單了.我這裡用setInterval(),時間是線性變化的.換個斜率先小後大的函數效果應該會好一些.
注釋寫了一些,湊合這看吧.有不對的地方,
歡迎批評!
上代碼:
1.index.wxml
<view class="container-out"> <view class="circle" wx:for="{{circleList}}" style="top:{{item.topCircle}}rpx;left:{{item.leftCircle}}rpx;background-color: {{(index%2==0)?colorCircleFirst:colorCircleSecond}};"></view> <view class="container-in"> <view class="content-out" wx:for="{{awardList}}" style="top:{{item.topAward}}rpx;left:{{item.leftAward}}rpx;background-color: {{(index==indexSelect)?colorAwardSelect:colorAwardDefault}};"> <image class="award-image" src="{{item.imageAward}}"></image> </view> <view class="start-btn" bindtap="startGame" style=" background-color:{{isRunning?'#e7930a':'#ffe400'}}">START</view> </view> </view>
2.index.wxss
.container-out { height: 600rpx; width: 650rpx; background-color: #b136b9; margin: 100rpx auto; border-radius: 40rpx; box-shadow: 0 10px 0 #871a8e; position: relative; } .container-in { width: 580rpx; height: 530rpx; background-color: #871a8e; border-radius: 40rpx; position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; } /**小圓球 box-shadow: inset 3px 3px 3px #fff2af;*/ .circle { position: absolute; display: block; border-radius: 50%; height: 20rpx; width: 20rpx; } .content-out { position: absolute; height: 150rpx; width: 166.6666rpx; background-color: #f5f0fc; border-radius: 15rpx; box-shadow: 0 5px 0 #d87fde; } /**居中 加粗*/ .start-btn { position: absolute; margin: auto; top: 0; left: 0; bottom: 0; right: 0; border-radius: 15rpx; height: 150rpx; width: 166.6666rpx; background-color: #ffe400; box-shadow: 0 5px 0 #e7930a; color: #f6251e; text-align: center; font-size: 55rpx; font-weight: bolder; line-height: 150rpx; } .award-image { position: absolute; margin: auto; top: 0; left: 0; bottom: 0; right: 0; height: 140rpx; width: 130rpx; }
3.index.js
Page({ data: { circleList: [],//圓點數組 awardList: [],//獎品數組 colorCircleFirst: '#FFDF2F',//圓點顏色1 colorCircleSecond: '#FE4D32',//圓點顏色2 colorAwardDefault: '#F5F0FC',//獎品默認顏色 colorAwardSelect: '#ffe400',//獎品選中顏色 indexSelect: 0,//被選中的獎品index isRunning: false,//是否正在抽獎 imageAward: [ '../../images/1.jpg', '../../images/2.jpg', '../../images/3.jpg', '../../images/4.jpg', '../../images/5.jpg', '../../images/6.jpg', '../../images/7.jpg', '../../images/8.jpg', ],//獎品圖片數組 }, onLoad: function () { var _this = this; //圓點設置 var leftCircle = 7.5; var topCircle = 7.5; var circleList = []; for (var i = 0; i < 24; i++) { if (i == 0) { topCircle = 15; leftCircle = 15; } else if (i < 6) { topCircle = 7.5; leftCircle = leftCircle + 102.5; } else if (i == 6) { topCircle = 15 leftCircle = 620; } else if (i < 12) { topCircle = topCircle + 94; leftCircle = 620; } else if (i == 12) { topCircle = 565; leftCircle = 620; } else if (i < 18) { topCircle = 570; leftCircle = leftCircle - 102.5; } else if (i == 18) { topCircle = 565; leftCircle = 15; } else if (i < 24) { topCircle = topCircle - 94; leftCircle = 7.5; } else { return } circleList.push({ topCircle: topCircle, leftCircle: leftCircle }); } this.setData({ circleList: circleList }) //圓點閃爍 setInterval(function () { if (_this.data.colorCircleFirst == '#FFDF2F') { _this.setData({ colorCircleFirst: '#FE4D32', colorCircleSecond: '#FFDF2F', }) } else { _this.setData({ colorCircleFirst: '#FFDF2F', colorCircleSecond: '#FE4D32', }) } }, 500) //獎品item設置 var awardList = []; //間距,怎麼順眼怎麼設置吧. var topAward = 25; var leftAward = 25; for (var j = 0; j < 8; j++) { if (j == 0) { topAward = 25; leftAward = 25; } else if (j < 3) { topAward = topAward; //166.6666是寬.15是間距.下同 leftAward = leftAward + 166.6666 + 15; } else if (j < 5) { leftAward = leftAward; //150是高,15是間距,下同 topAward = topAward + 150 + 15; } else if (j < 7) { leftAward = leftAward - 166.6666 - 15; topAward = topAward; } else if (j < 8) { leftAward = leftAward; topAward = topAward - 150 - 15; } var imageAward = this.data.imageAward[j]; awardList.push({ topAward: topAward, leftAward: leftAward, imageAward: imageAward }); } this.setData({ awardList: awardList }) }, //開始游戲 startGame: function () { if (this.data.isRunning) return this.setData({ isRunning: true }) var _this = this; var indexSelect = 0 var i = 0; var timer = setInterval(function () { indexSelect++; //這裡我只是簡單粗暴用y=30*x+200函數做的處理.可根據自己的需求改變轉盤速度 i += 30; if (i > 1000) { //去除循環 clearInterval(timer) //獲獎提示 wx.showModal({ title: '恭喜您', content: '獲得了第' + (_this.data.indexSelect + 1) + "個優惠券", showCancel: false,//去掉取消按鈕 success: function (res) { if (res.confirm) { _this.setData({ isRunning: false }) } } }) } indexSelect = indexSelect % 8; _this.setData({ indexSelect: indexSelect }) }, (200 + i)) } })
demo代碼下載
demo
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持。