仿双色球抽奖大转盘

前言

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

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