天猫超市翻牌的转盘经常用,以前做Android,没啥想法,现在尝试微信小程序,看到别人家APP里有啥好玩的,就想去做一个.
上GIF看效果:
简要的说一下.
1.外面一圈闪烁的小球是用js控制的样式.500ms改变一次样式.简单粗暴;2.抽奖的item也是js控制背景,但是怎么样让它优雅的停下来是个问题.动画中有timingFunction可以设置速度.自己用js就没那么简单了.我这里用setInterval(),时间是线性变化的.换个斜率先小后大的函数效果应该会好一些.
CSDN微信小程序开发专栏,欢迎关注!
技术相关:
1.微信小程序之仿微信漂流瓶
2.微信小程序开发之视频播放器 Video 弹幕 弹幕颜色自定义
3.微信小程序开发之录音机 音频播放 动画 (真机可用)
4.微信小程序开发之麦克风动画 帧动画 放大 淡出
注释写了一些,凑合这看吧.有不对的地方,
欢迎批评!
上代码:
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;}.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;}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
3.index.js
Page({ data: { circleList: [], awardList: [], colorCircleFirst: '#FFDF2F', colorCircleSecond: '#FE4D32', colorAwardDefault: '#F5F0FC', colorAwardSelect: '#ffe400', indexSelect: 0, 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) 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; leftAward = leftAward + 166.6666 + 15; } else if (j < 5) { leftAward = leftAward; 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++; 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)) }})
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106
- 107
- 108
- 109
- 110
- 111
- 112
- 113
- 114
- 115
- 116
- 117
- 118
- 119
- 120
- 121
- 122
- 123
- 124
- 125
- 126
- 127
- 128
- 129
- 130
- 131
- 132
- 133
- 134
- 135
- 136
- 137
- 138
- 139
- 140
- 141
- 142
- 143
- 144
- 145
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106
- 107
- 108
- 109
- 110
- 111
- 112
- 113
- 114
- 115
- 116
- 117
- 118
- 119
- 120
- 121
- 122
- 123
- 124
- 125
- 126
- 127
- 128
- 129
- 130
- 131
- 132
- 133
- 134
- 135
- 136
- 137
- 138
- 139
- 140
- 141
- 142
- 143
- 144
- 145
demo代码下载
CSDN微信小程序开发专栏
我的博客,欢迎批评!
0 0