微信小程序之转盘抽奖

1. 实现效果

2. 实现过程

话不多说,直接上代码

javascript 复制代码
/**index.wxml */
<view class="title">旋转大转盘</view>
<view class="rote-box fcc">
    <view class="box fcc">
        <image class="bg" src="/static/bg.png" animation="{{animationRotate}}"/>
        <image class="btn {{isTurnOver2?'':'grayscale'}}" src="/static/btn.png" bindtap="onRotateClick" />
    </view>
</view>
javascript 复制代码
Page({
  /**
   * 页面的初始数据
   */
  data: {
    isTurnOver2: true, //抽奖状态 是否旋转完(旋转大转盘)
    animationRotate: null,
    // 转的总圈数,最后一圈可能不满
    num_total: 20,
  },
  
  onRotateClick() {
    if (this.data.isTurnOver2) {
      this.setData({
        isTurnOver2: false,
      });
      //正常,奖品结果提前从后端接口拿回来,这里模拟获取随机
      // 随机奖品效果
      const rand = (m, n) => {
        return Math.ceil(Math.random() * (n - m + 1) + m - 1);
      };
      let prizeId = rand(1, 6);

      this.onRotate(prizeId);
    } else {
      showTextToast('请勿重复点击');
    }
  },

  onRotate(prizeId) {
    console.log('中奖id', prizeId);
    let _duration = 10000;
    let animationRotate = wx.createAnimation({
      duration: _duration,
      timingFunction: 'ease', //动画以低速开始,然后加快,在结束前变慢
    });

    //解决二次点击不旋转问题
    animationRotate.rotate(0).step({
      duration: 1,
    });

    let num_total = this.data.num_total;
    /*
     * angle 旋转的角度
     * 这转盘有6个奖项,所以一个奖项的度数为:360除以6等于60、
     * 要转完一圈 → 60 * 6
     * 为了让动画看起来舒服我设置了20圈 → 60 * 6 * 20
     * 又因为需要连贯抽取非第一次,所以二次抽奖时会在原来的圈数上自加,
     * 也就成了60 * 6 * num_total,num_total每转完一次都会叠加上自身
     * 又因为转盘是顺时针旋转的,默认指定奖品1
     * 所以需要减去 → 60 * (prize_id - 1) 方可在最后一圈转到对应的位置
     * 可以根据自己的设计稿奖品的个数进行调整
     * */
    let angle = 60 * 6 * num_total - 60 * (prizeId - 1);
    animationRotate.rotate(angle).step();
    this.setData({
      animationRotate: animationRotate.export(),
    });

    setTimeout(() => {
      this.setData({
        isTurnOver2: true,
        num_total: num_total + num_total,
      });
    }, _duration);
  },
});
javascript 复制代码
//index.less
.rote-box {
  padding-bottom: 20rpx;
  .box {
    width: 600rpx;
    height: 600rpx;
    position: relative;
    .bg {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0rpx;
      left: 0rpx;
    }
    .btn {
      position: absolute;
      top: 160rpx;
      width: 200rpx;
      height: 249rpx;
    }
  }
}

.grayscale {
  filter: grayscale(70%);
}

3.资源获取


九宫格抽奖请移步这边

相关推荐
丁总学Java10 小时前
微信小程序,点击bindtap事件后,没有跳转到详情页,有可能是app.json中没有正确配置页面路径
微信小程序·小程序·json
说私域11 小时前
基于开源 AI 智能名片、S2B2C 商城小程序的用户获取成本优化分析
人工智能·小程序
mosen86811 小时前
Uniapp去除顶部导航栏-小程序、H5、APP适用
vue.js·微信小程序·小程序·uni-app·uniapp
qq229511650212 小时前
微信小程序的汽车维修预约管理系统
微信小程序·小程序·汽车
尚梦19 小时前
uni-app 封装刘海状态栏(适用小程序, h5, 头条小程序)
前端·小程序·uni-app
小飞哥liac1 天前
微信小程序的组件
微信小程序
stormjun1 天前
Java基于微信小程序的私家车位共享系统(附源码,文档)
java·微信小程序·共享停车位·私家车共享停车位小程序·停车位共享
paopaokaka_luck1 天前
基于Spring Boot+Vue的助农销售平台(协同过滤算法、限流算法、支付宝沙盒支付、实时聊天、图形化分析)
java·spring boot·小程序·毕业设计·mybatis·1024程序员节
Bessie2341 天前
微信小程序eval无法使用的替代方案
微信小程序·小程序·uni-app
shenweihong1 天前
javascript实现md5算法(支持微信小程序),可分多次计算
javascript·算法·微信小程序