微信小程序之转盘抽奖

1. 实现效果

转盘抽奖

2. 实现过程

话不多说,直接上代码

/**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>
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);
  },
});

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

在这里插入图片描述
在这里插入图片描述

九宫格抽奖请移步这边

相关推荐

  1. 程序

    2024-05-14 07:42:06       30 阅读
  2. 程序

    2024-05-14 07:42:06       10 阅读

最近更新

  1. .Net Core WebAPI参数的传递方式

    2024-05-14 07:42:06       0 阅读
  2. QT--气泡框的实现

    2024-05-14 07:42:06       1 阅读
  3. LeetCode 968.监控二叉树 (hard)

    2024-05-14 07:42:06       0 阅读
  4. leetcode热题100.完全平方数(动态规划进阶)

    2024-05-14 07:42:06       0 阅读
  5. leetcode328-Odd Even Linked List

    2024-05-14 07:42:06       0 阅读
  6. C 语言设计模式(结构型)

    2024-05-14 07:42:06       0 阅读
  7. v-if 与 v-show(vue3条件渲染)

    2024-05-14 07:42:06       0 阅读
  8. kafka防止消息丢失配置

    2024-05-14 07:42:06       0 阅读

热门阅读

  1. Php简易留言

    2024-05-14 07:42:06       4 阅读
  2. MySQL索引设计遵循一系列原则

    2024-05-14 07:42:06       6 阅读
  3. 数据分析思维——数据指标体系、异动分析

    2024-05-14 07:42:06       3 阅读
  4. 【力扣】第397场周赛 A~C

    2024-05-14 07:42:06       5 阅读
  5. 【力扣】164. 最大间距

    2024-05-14 07:42:06       5 阅读
  6. k8s 服务发现

    2024-05-14 07:42:06       4 阅读
  7. react之Reducer和Context的联合使用

    2024-05-14 07:42:06       4 阅读
  8. Python 中的 heapq 模块简介

    2024-05-14 07:42:06       5 阅读