仿双色球抽奖大转盘

news2024/10/7 18:20:25

仿双色球抽奖大转盘

- 前言
- 1、页面搭建
- 2、JS逻辑编写
- 3、Css样式编写
- 4、编译发布
- 5、往期回顾
- - 总结：

前言

需求来时奋笔疾书，需求变时追风逐电！

年低了，接到部门需求，2天时间要开发一个仿双色球抽奖大转盘，于是，就加班加点的赶工期…
框架vue+uni-app–开发编译小程序
就此项目分享一下开发过程

抽奖活动视频

1、页面搭建

页面搭建主要分为以下步骤：

整体布局搭建
背景音乐
抽奖按钮声音
抽奖摇号声音
球的落地和滚动轨迹
中奖弹窗动画特效
发布上线

2、JS逻辑编写

使用api处理底层声音：uni.createInnerAudioContext()
- 事件方法采用：播放：play()、销毁：destroy()
- 文档传送门 uni.createInnerAudioContext
动态添加class属性
控制摇号时间
抽中中奖号码：
- 1、中奖号码可更加后端返回的中奖号码出结果（优先选择）
- 2、生成随机数，通过每个号码的设置概率大小出结果（本地测试用）

3、Css样式编写

首次出现使用球的落地轨迹

.diaol_1 {
	animation: dialuodn 1s linear 0.9s backwards;
}
@keyframes dialuodn {
  0% {
    transform: translateY(-200%);
    opacity: 0;
  }
  5% {
    transform: translateY(-200%);
  }
  15% {
    transform: translateY(0);
  }
  30% {
    transform: translateY(-100%);
  }
  40% {
    transform: translateY(0%);
  }
  50% {
    transform: translateY(-60%);
  }
  70% {
    transform: translateY(0%);
  }
  80% {
    transform: translateY(-30%);
  }
  90% {
    transform: translateY(0%);
  }
  95% {
    transform: translateY(-14%);
  }
  97% {
    transform: translateY(0%);
  }
  99% {
    transform: translateY(-6%);
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

摇号时球滚动的轨迹

.li_1 {
   animation: ballMove1 .6s ease-in-out infinite;
 }
 @keyframes ballMove1 {
  	0%,to {-webkit-transform:translate(0) rotate(70deg);transform:translate(0) rotate(70deg)}
    20% {-webkit-transform:translate(115rpx,-134rpx) rotate(140deg);transform:translate(115rpx,-134rpx) rotate(140deg)}
    40% {-webkit-transform:translate(-2rpx,-135rpx) rotate(210deg);transform:translate(-2rpx,-135rpx) rotate(210deg)}
    60% {-webkit-transform:translate(151rpx,0rpx) rotate(280deg);transform:translate(151rpx,0rpx) rotate(280deg)}
    80% {-webkit-transform:translate(11rpx,0rpx) rotate(350deg);transform: translate(11rpx,0rpx) rotate(350deg)}
  }

中奖弹窗动画特效

属性：pointer-events: none;
属性：pointer-events: auto;
// 整体弹窗使用淡入淡出处理
.amie {
   transition: all 1s ease-in-out; // 新增到全局
 }
// 上面的图片使用定位溢出处理
.img-top {
	position: relative;
 	top: -400rpx; // 默认溢出
 }
 .img-top {
    top: 146rpx; // 正常显示
 }
 
// 中间的图片使用旋转处理
.img-active {
   transform: rotateY(0deg);
   animation: rotate-ani 1s linear;
   @keyframes rotate-ani {
     0% {
       transform: rotateY(0deg);
       opacity: 0;
     }
     100% {
       transform: rotateY(360deg);
       opacity: 1;
     }
   }
 }
// 下面的图片使用定位溢出处理
.img-bottom {
	position: relative;
 	bottom: 400rpx; // 默认溢出
 }
 .img-bottom {
    bottom: 30rpx; // 正常显示
 }

按钮缩放动画

// 缩放动画
  .transform-scale {
    transform:scale(1,1);
    transition: transform 0.1s ease 0s;
  }
  .transform-scale:active {
    transform:scale(0.5,0.5);
  }