小程序 实现老虎机抽奖 – 可以点击N次,试用各种机型,不会产生误差

时间:2020-8-29 作者:admin


先看效果图:
点击抽奖,就滚动到后端返回对应的数字,试用各种机型
小程序 实现老虎机抽奖 - 可以点击N次,试用各种机型,不会产生误差
之前试用了background-position的方式去改变数字的背景位置,发奖在小程序使用rpx单位的情况下,会产生误差,且不适配各种机型,于是经过大佬的请教下,改成使用transform: rotateX的方试,话不多说,先上代码

axml:

<view class="content">
  <view class="num-scroll">
    <view class="animationImg">
      <view class="num num1">
        <view class="item-wrap" style=" transform: rotateX({{animation0}}deg);  transition-duration:5s;transition-delay:0s;">
          <view class="item" a:for="{{[0,1,2,3,4,5,6,7,8,9]}}" style="background-image: url(../../img/{{item}}.png);
                transform:rotateX({{36*item - 100}}deg) translateZ({{125}}px);">
          </view>
        </view>
      </view>
      <view class="num num2">
        <view class="item-wrap" style=" transform: rotateX({{animation1}}deg);  transition-duration:6s;transition-delay:0.4;">
          <view class="item" a:for="{{[0,1,2,3,4,5,6,7,8,9]}}" style="background-image: url(../../img/{{item}}.png);
                transform:rotateX({{36*item - 100}}deg) translateZ({{125}}px);">
          </view>
        </view>
      </view>
      <view class="num num3">
        <view class="item-wrap" style=" transform: rotateX({{animation2}}deg);  transition-duration:7s;transition-delay:0.8s;">
          <view class="item" a:for="{{[0,1,2,3,4,5,6,7,8,9]}}" style="background-image: url(../../img/{{item}}.png);
                transform:rotateX({{36*item - 100}}deg) translateZ({{125}}px);">
          </view>
        </view>
      </view>
    </view>
    <view class="btn">
      <button onTap="startAnimation" class="getAuthorize" hover-class="btn-hover"></button>
    </view>
  </view>
</view>

js:

var drawCnt = 0; // 计数器,每抽一次奖自增1
Page({
  data: {
    animation0: 172,
    animation1: 172,
    animation2: 172
  },
  //点击开始按钮,开始滚动
  async startAnimation() {
    var str = '123';
    var num1 = str.slice(0, 1);
    var num2 = str.slice(1, 2);
    var num3 = str.slice(2, 3);
    this.setData({
      animation0: 720 * (drawCnt + 1) + 172 + (8 - num1) * 36,
      animation1: 720 * (drawCnt + 1) + 172 + (8 - num2) * 36,
      animation2: 720 * (drawCnt + 1) + 172 + (8 - num3) * 36,
    })
    drawCnt++;
  },
});

acss:

.content {
  width: 100%;
  height: 100%;
  padding-bottom: 60rpx;
  background: linear-gradient(0deg, rgba(254, 146, 56, 1) 0%, rgba(238, 44, 40, 1) 99%);
  overflow: hidden;
}

.content .num-scroll {
  width: 670rpx;
  height: 630rpx;
  background: url(https://phwealth.phfund.com.cn/phwealth-stg/upload/images/1598601015135.png) no-repeat;
  background-size: 100% 100%;
  box-shadow: 0px 2rpx 0px 0px rgba(255, 208, 127, 1);
  border-radius: 40rpx;
  margin: 70rpx auto 0;
  overflow: hidden;
  position: relative;
}

.num-scroll .animationImg {
  width: 520rpx;
  height: 92rpx;
  display: flex;
  margin: 180rpx auto 0;
}

.animationImg .num {
  width: 60rpx;
  height: 80rpx;
  background-size: 100%;
  background-color: transparent;
  transition-property: background-position-y;
  transition-timing-function: cubic-bezier(0.6, 0.1, 0.15, .9);
  overflow: hidden;
}

.item-wrap{
  width: 60rpx;
  height: 80rpx;
  background-color: transparent;
  transform-style: preserve-3d;
  transform-origin: 50% 50%;
  animation-timing-function: ease;
  backface-visibility:hidden;
}

.item{
  width: 60rpx;
  height: 80rpx;
  background: url(https://phwealth.phfund.com.cn/phwealth-stg/upload/images/1598601045235.png);
  background-color: transparent;
  overflow: hidden;
  background-size: 100%;
  position: absolute;
  transform-origin: center;
  backface-visibility:hidden;
}

.num1 {
  transition-delay: 0s;
  transition-duration: 5s;
  margin-left: 60rpx;
}

.num2 {
  transition-delay: 0.5s;
  transition-duration: 5s;
  margin-left: 109rpx;
}

.num3 {
  transition-delay: 1s;
  transition-duration: 5s;
  margin-left: 113rpx;
}

.num-scroll .btn {
  width: 630rpx;
  height: 119rpx;
  background: url(https://phwealth.phfund.com.cn/phwealth-stg/upload/images/1598601029084.png) no-repeat;
  background-size: 100% 100%;
  position: absolute;
  top: 470rpx;
  left: 30rpx;
}
.num-scroll .getAuthorize {
  width: 100%;
  height: 100%;
  background: transparent;
  border: none;
}

数字图片,下载下来放文件路径即可
小程序 实现老虎机抽奖 - 可以点击N次,试用各种机型,不会产生误差
小程序 实现老虎机抽奖 - 可以点击N次,试用各种机型,不会产生误差
小程序 实现老虎机抽奖 - 可以点击N次,试用各种机型,不会产生误差
小程序 实现老虎机抽奖 - 可以点击N次,试用各种机型,不会产生误差
小程序 实现老虎机抽奖 - 可以点击N次,试用各种机型,不会产生误差
小程序 实现老虎机抽奖 - 可以点击N次,试用各种机型,不会产生误差
小程序 实现老虎机抽奖 - 可以点击N次,试用各种机型,不会产生误差
小程序 实现老虎机抽奖 - 可以点击N次,试用各种机型,不会产生误差
小程序 实现老虎机抽奖 - 可以点击N次,试用各种机型,不会产生误差
小程序 实现老虎机抽奖 - 可以点击N次,试用各种机型,不会产生误差

以上就是完整是实现小程序老虎机抽奖功能,如有更好的方法,欢迎留言评论
本文章纯属原创,转载请注明出处

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。