微信小程序之转盘抽奖

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.资源获取


九宫格抽奖请移步这边

相关推荐
dccose7 小时前
vue3 uniapp 扫普通链接或二维码打开小程序并获取携带参数
小程序·uni-app
尘浮生13 小时前
Java项目实战II基于微信小程序的校运会管理系统(开发文档+数据库+源码)
java·开发语言·数据库·微信小程序·小程序·maven·intellij-idea
尘浮生17 小时前
Java项目实战II基于微信小程序的电影院买票选座系统(开发文档+数据库+源码)
java·开发语言·数据库·微信小程序·小程序·maven·intellij-idea
HerayChen19 小时前
微信小程序混合 h5 wx.miniProgram是 undefined
微信小程序·小程序·h5
耶啵奶膘1 天前
uniapp+vue2全局监听退出小程序清除缓存
小程序·uni-app
中云DDoS CC防护蔡蔡1 天前
微信小程序被攻击怎么选择高防产品
服务器·网络安全·微信小程序·小程序·ddos
井眼1 天前
微信小程序-prettier 格式化
微信小程序·小程序
qq_17448285751 天前
springboot基于微信小程序的旧衣回收系统的设计与实现
spring boot·后端·微信小程序
wqq_9922502771 天前
springboot基于微信小程序的食堂预约点餐系统
数据库·微信小程序·小程序