仿双色球抽奖大转盘

前言

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

年低了，接到部门需求，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);
  }

4、编译发布

编译发布参考上一篇文章

5、往期回顾

---

— 获取源码接着往下看！—

vue3 + TS + vite 搭建中后台管理系统（完整项目）
vue3 + JS + vant 搭建移动端H5项目（完整项目）
手把手教 Vue3.2+Vite+Echarts 5 绘制3D线条效果中国地图

---

总结：

前端路上 | 所知甚少，唯善学。
各位小伙伴有什么疑问，欢迎留言探讨。

— 关注我：前端路上不迷路 —