微信小程序|抽奖大转盘实战

欢迎点击「算法与编程之美」↑关注我们!

本文首发于微信公众号:"算法与编程之美",欢迎关注,及时了解更多此系列文章。

欢迎加入团队圈子!与作者面对面!直接点击!

问题描述

在抽奖的应用或小程序中,大多会采用一种常见的大转盘抽奖方式,这种方式能直观展现出这个抽奖活动的形式和内容,且能直接吸引人参与。那么这个功能是如何实现的呢?

效果图:


解决方案

1)首先要实现这个大转盘的样式设计,通过canvas画布和animation动画来实现。(这两个api的用法小编在前面的实战文章有过讲解,感兴趣可以去看一看。)

wxml代码示例:

<view>

         <view>

                   <view>

                            <view  animation="{{animationData}}" >

                                     <canvas  style="width: 300px; height: 300px;"  canvas-id="lotteryCanvas"></canvas>

                                     <view>

                                               <view wx:for="{{awardsList}}"  wx:key="unique" style="-webkit-transform:  rotate({{item.lineTurn}});transform:  rotate({{item.lineTurn}})"></view>

                                     </view>

                                     <view>

                                               <view wx:for="{{awardsList}}"  wx:key="unique">

                                                     <view style="-webkit-transform:  rotate({{item.turn}});transform:  rotate({{item.turn}})">{{item.award}}</view>

                                               </view>

                                     </view>

                            </view>

                            <view  bindtap="getLottery" class="canvas-btn  {{btnDisabled}}">抽奖</view>            

                   </view>

         </view>

</view>

2wxss中需要实现的则是几种不同颜色效果以及这个圆盘样式的效果。

这其中需要实现一个圆的效果,和圆上的平分六条分割线的样式。中间的抽奖样式,实际上是由下面一个圆上面一个三角形进行重合来展现的,当然,这里也可以直接换成一张类似抽奖样式的图片更方便。

部分代码示例:

//转盘

.canvas-container{

   margin: 0 auto;

   position: relative;

   width: 300px;

   height: 300px; 

   border-radius: 50%;

}

 

.canvas-content{

   position: absolute;

   left: 0;

   top: 0;

   z-index: 1;

   display: block;

   width: 300px;

   height: 300px;

   border-radius: inherit;

   background-clip: padding-box;

   background-color: #ffcb3f;

}

.canvas-element{

   position: relative;

   z-index: 1;

   width: inherit;

   height: inherit;

   border-radius: 50%;

}

.canvas-list{

   position: absolute;

   left: 0;

   top: 0;

   width: inherit;

   height: inherit;

   z-index: 9999;

}

.canvas-item{

   position: absolute;

   left: 0;

   top: 0;

   width: 100%;

   height: 100%;

   color: #e4370e;

   font-weight: bold;

   text-shadow: 0 1px 1px rgba(255,255,255,.6);

}

3js中需要实现转盘转动的六个分区,需要用Math的相关属性,其用法类似于时钟(小编前面的《动态时钟》的文章中也有相关介绍,可以去了解一下);然后转盘旋转需要调用wx.createAnimation,设置旋转参数,包括转速和频率等;中奖提示调用wx.showModal,在里面设置中奖内容即可。

// 旋转抽奖

     app.runDegs = app.runDegs || 0

     console.log('deg', app.runDegs)

     app.runDegs = app.runDegs + (360 - app.runDegs % 360) + (360 * runNum  - awardIndex * (360 / 6))

     console.log('deg', app.runDegs)

     var animationRun = wx.createAnimation({

       duration: 4000,

       timingFunction: 'ease'

     })

     that.animationRun = animationRun

     animationRun.rotate(app.runDegs).step()

     that.setData({

       animationData: animationRun.export(),

      btnDisabled: 'disabled'

     })

     // 中奖提示

     setTimeout(function() {

       wx.showModal({

         title: '恭喜',

         content: '获得' +  (awardsConfig.awards[awardIndex].name),

         showCancel: false

       })

       if (awardsConfig.chance) {

         that.setData({

           btnDisabled: ''

         }) 

       }

     }, 4000);

   },

   onReady: function (e) {

     var that = this;

     // getAwardsConfig

     app.awardsConfig = {

       chance: true,

       awards:[

         {'index': 0, 'name': '1元红包'},

         {'index': 1, 'name': '5元话费'},

         {'index': 2, 'name': '6元红包'},

         {'index': 3, 'name': '8元红包'},

         {'index': 4, 'name': '10元话费'},

         {'index': 5, 'name': '10元红包'}

       ]

     }

     // 绘制转盘

     var awardsConfig = app.awardsConfig.awards,

         len = awardsConfig.length,

         rotateDeg = 360 / len / 2 + 90,

         html = [],

         turnNum = 1 / len  // 文字旋转 turn

     that.setData({

       btnDisabled: app.awardsConfig.chance ? '' : 'disabled' 

     })

     var ctx = wx.createContext()

     for (var i = 0; i < len; i++) {

       // 保存当前状态

       ctx.save();

       // 开始一条新路径

       ctx.beginPath();

       // 位移到圆心,下面需要围绕圆心旋转

       ctx.translate(150, 150);

       // (0, 0)坐标开始定义一条新的子路径

       ctx.moveTo(0, 0);

       // 旋转弧度,需将角度转换为弧度,使用 degrees * Math.PI/180 公式进行计算。

       ctx.rotate((360 / len * i - rotateDeg) * Math.PI/180);

       // 绘制圆弧

       ctx.arc(0, 0, 150, 0,  2 *  Math.PI / len, false);

       // 颜色间隔

       if (i % 2 == 0) {

           ctx.setFillStyle('rgba(255,184,32,.1)');

       }else{

           ctx.setFillStyle('rgba(255,203,63,.1)');

       }

 

END

编  辑   |   王楠岚

责  编   |   吴怡辰

 where2go 团队


   

微信号:算法与编程之美          

长按识别二维码关注我们!

温馨提示:点击页面右下角“写留言”发表评论,期待您的参与!期待您的转发!

展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 终极编程指南 设计师: CSDN官方博客
应支付0元
点击重新获取
扫码支付

支付成功即可阅读