devbox
我家小花儿
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

前端小程序，手把手教你从零开始做一个酷炫的扭蛋机十连抽动画效果

作者：我家小花儿 | 2024-04-08 03:29:11

赞

踩

前端小程序，手把手教你从零开始做一个酷炫的扭蛋机十连抽动画效果

其实没有做多复杂的效果，连 canvas 都没用上，都是一些简单的平面变换，不过一段看似复杂的动画往往都是几个简单的变换拼接而成，所以我们逐步拆解，很简单的就能得到一个扭蛋机十连抽效果。

语言环境

我这边使用的是 tailwindcss 和 ts，在 uniapp  + vue3 的情况下写的小程序扭蛋机例子，不同框架下的同学可能要转换一下。

为了方便同学们学习，里面的素材都是远程图库的图片，可以直接取用。

先看效果

1.背景

先搭一个背景界面和主框体

  1. <!-- 扭蛋机积分抽奖 -->
  2. <template>
  3.   <view class="page">
  4.     <!-- 扭蛋机背景图片 -->
  5.     <image
  6.       class="absolute top-[24rpx] left-0 h-[1444rpx] w-full"
  7.       src="https://gitee.com/jingkunxu/img/raw/master/note/blog/lottery-bg0.png"
  8.     />
  9.   </view>
  10. </template>
  11.  
  12. <script setup lang="ts">
  13.  
  14. </script>
  15.  
  16. <style lang="scss" scoped>
  17. .page {
  18.   width: 100vw;
  19.   min-height: 100vh;
  20.   overflow: hidden;
  21.   background-color: #ff0027;
  22. }
  23. </style>

就一个主背景，我在小程序上开发，所以单位用的 rpx，如果有用 px 做单位的，一般换算方法是 1px = 2rpx 。

2.弹幕动画：随机高度的左右平移

弹幕动画的本质是五张图片随机在界面上做平移处理，超出小程序界面则隐藏。

1.弹幕template：

        设定一个弹幕显示区域后，为其添加 overflow: hidden 属性，这样弹幕在进出容器边缘时隐藏。

        设置弹幕图片为  mode="heightFix" ，即等高情况下自适应宽度（实际开发情况根据你的素材做调整），由于我这里的素材故意设置的大小不同，因此在以同样的 transform 样式做平移的时候，速度上会有参差感。

2.弹幕scss

        样式中选择平移变换，这里解释一下为什么用 translate3d 而不是 translateX，主要原因是为了利用硬件加速，提高动画的性能和流畅性。尤其是iOS上浏览器在处理3D变换时通常会触发硬件加速，并且最重要的是非 translate3d 效果在ios的小程序上经常被吞（可恶的ios）

        然后动画中采用用百分比平移变换的原因是每个弹幕的长度不一样，导致的平移的速度也会有差别，能起到更加随机的视觉效果

3.弹幕ts

        有两个属性需要用代码做随机设置，一个是弹幕的高度，一个是弹幕出场的时间，即动画延迟时间。每个弹幕对象包含：top（弹幕的顶部位置）、startAnimation（控制动画是否开始）、src（弹幕内容或来源）

        这里弹幕我没有设置随机重新刷新，因为CSS动画已经是循环播放的，如果想要更加随机一点，后面可以再优化。目前的效果是每次进入页面，随机一种弹幕位置效果。

4.弹幕模块完整代码（背景 + 弹幕）

  1. <!-- 扭蛋机积分抽奖 -->
  2. <template>
  3.   <view class="page">
  4.     <!-- 扭蛋机背景图片 -->
  5.     <image
  6.       class="absolute top-[24rpx] left-0 h-[1444rpx] w-full"
  7.       src="https://gitee.com/jingkunxu/img/raw/master/note/blog/lottery-bg0.png"
  8.     />
  9.  
  10.     <!-- 这里给弹幕增加一个外盒子，确保弹幕超出外框隐藏，以应对ios中页面元素超出时页面可以左右滑动的问题 -->
  11.     <view class="w-[750rpx] h-[600rpx] absolute left-0 top-[280rpx] overflow-hidden">
  12.       <!-- 弹幕 -->
  13.       <image
  14.         v-for="(barrage, i) in barrages"
  15.         :key="i"
  16.         mode="heightFix"
  17.         class="absolute left-[760rpx] h-[88rpx] z-[300]"
  18.         :class="{ 'barrage-animation': barrage.startAnimation }"
  19.         :style="{ top: barrage.top + 'px' }"
  20.         :src="'https://gitee.com/jingkunxu/img/raw/master/note/blog/barrage' + (i+1) + '.png'"
  21.       />
  22.     </view>
  23.   </view>
  24. </template>
  25.  
  26. <script setup lang="ts">
  27.  
  28. onLoad(async () => {
  29.   startBarrageAnime() // 初始化静态弹幕效果
  30. })
  31.  
  32. // 弹幕设置
  33. // 每个弹幕对象包含：top（弹幕的顶部位置）、startAnimation（控制动画是否开始）、src（弹幕内容或来源）
  34. const barrages = ref([
  35.   { top: 0, startAnimation: false, src: 'https://gitee.com/jingkunxu/img/raw/master/note/blog/barrage1.png' },
  36.   { top: 0, startAnimation: false, src: 'https://gitee.com/jingkunxu/img/raw/master/note/blog/barrage2.png' },
  37.   { top: 0, startAnimation: false, src: 'https://gitee.com/jingkunxu/img/raw/master/note/blog/barrage3.png' },
  38.   { top: 0, startAnimation: false, src: 'https://gitee.com/jingkunxu/img/raw/master/note/blog/barrage4.png' },
  39.   { top: 0, startAnimation: false, src: 'https://gitee.com/jingkunxu/img/raw/master/note/blog/barrage5.png' }
  40. ])
  41. // 开始弹幕动画的函数
  42. // 这里弹幕我没有设置随机重新刷新，因为CSS动画已经是循环播放的，如果想要更加随机一点，后面可以再优化
  43. const startBarrageAnime = () => {
  44.   // 遍历弹幕数组
  45.   barrages.value.forEach((barrage, index) => {
  46.     // 计算随机顶部位置，使得弹幕垂直方向分布在一定范围内
  47.     const randomTop = Math.floor(Math.random() * 200)
  48.     // 计算随机延迟时间，使得弹幕不是同时出现
  49.     const randomDelay = Math.random() * 10000
  50.     // 设置延时函数，到达随机延迟时间后开始弹幕动画
  51.     setTimeout(() => {
  52.       barrage.top = randomTop // 设置弹幕的顶部位置
  53.       barrage.startAnimation = true // 开始动画
  54.     }, randomDelay)
  55.   })
  56. }
  57.  
  58. </script>
  59.  
  60. <style lang="scss" scoped>
  61. .page {
  62.   width: 100vw;
  63.   min-height: 100vh;
  64.   overflow: hidden;
  65.   background-color: #ff0027;
  66. }
  67.  
  68. /* 弹幕平移动画 */
  69. .barrage-animation {
  70.   animation-name: moveLeft; /* 指定动画名称 */
  71.   animation-duration: 10s; /* 指定动画时长 */
  72.   animation-play-state: running; /* 控制动画播放状态 */
  73.   animation-timing-function: linear; /* 指定动画速度曲线 */
  74.   animation-iteration-count: infinite; /* 指定动画循环次数 */
  75. }
  76.  
  77. /* 这里解释一下为什么用 translate3d 而不是 translateX，主要原因是为了利用硬件加速，提高动画的性能和流畅性。尤其是iOS上浏览器在处理3D变换时通常会触发硬件加速，并且最重要的是非 translate3d 效果在ios的小程序上经常被吞（可恶的ios） */
  78. @keyframes moveLeft {
  79.   /* 这里用百分比平移变换的原因是每个弹幕的长度不一样，导致的平移的速度也会有差别，能起到更加随机的视觉效果 */
  80.   0% { transform: translate3d(100%, 0, 0) }
  81.   100% { transform: translate3d(-500%, 0, 0) }
  82. }
  83. </style>

3.中奖记录：渐隐渐现的上下平移

        中奖记录的实现是通过左侧元素的上下平移再搭配透明度来实现，这里我是通过动态计算 top 的位置以及主动设置中间三项的透明度来实现。其实如果只是做效果，可以只用纯静态css，要简单很多，但是我这里要考虑到实际对接接口，而接口数据的长度是不可控的，因此通过脚本来灵活计算。

1.中奖记录template与scss：

这里没有太多介绍的，核心上面已经说了，通过控制 top 和 opacity 属性来控制动画，记得加上 transition: all 0.4s ease; 否则是没有过渡效果的。ellipsis 单行省略三件套是我喜欢用的样式，在设定宽度的情况下，它能让内部超出范围的文字截取并用省略号代替。

2.中奖记录ts：

通过 showTop 来设定最上面那条显示的中奖记录的高度，这个值越大，中奖记录的显示范围就越靠下；showCount 用来设置显示的条目，我这里是控制其显示三条；intervalId 是轮询任务的id，在这里记录下来是为了离开页面的时候要将其销毁，否则会一直占用内存。

变换方式是，追加一个定时任务，每隔三秒将 recordList 里面每一项的 top 值减去60； 并且判断 在 top >= showTop && top <= showTop + (60 * showCount) 的范围内 设 show 为 true。最下面还有个 clearInterval(intervalId.value) 方法由于图片尺寸问题没有截到，大家直接看后面的源码。

3.中奖记录模块完整代码（背景 + 弹幕 + 中奖记录）

  1. <!-- 扭蛋机积分抽奖 -->
  2. <template>
  3.   <view class="page">
  4.     <!-- 扭蛋机背景图片 -->
  5.     <image
  6.       class="absolute top-[24rpx] left-0 h-[1444rpx] w-full"
  7.       src="https://gitee.com/jingkunxu/img/raw/master/note/blog/lottery-bg0.png"
  8.     />
  9.  
  10.     <!-- 这里给弹幕增加一个外盒子，确保弹幕超出外框隐藏，以应对ios中页面元素超出时页面可以左右滑动的问题 -->
  11.     <view class="w-[750rpx] h-[600rpx] absolute left-0 top-[280rpx] overflow-hidden">
  12.       <!-- 弹幕 -->
  13.       <image
  14.         v-for="(barrage, i) in barrages"
  15.         :key="i"
  16.         mode="heightFix"
  17.         class="absolute left-[760rpx] h-[88rpx] z-[300]"
  18.         :class="{ 'barrage-animation': barrage.startAnimation }"
  19.         :style="{ top: barrage.top + 'px' }"
  20.         :src="'https://gitee.com/jingkunxu/img/raw/master/note/blog/barrage' + (i+1) + '.png'"
  21.       />
  22.     </view>
  23.  
  24.     <!-- 中奖记录 -->
  25.     <view
  26.       v-for="(item,i) in recordList"
  27.       :key="i"
  28.       class="left-bar ellipsis"
  29.       :style="{'top': (item.top > 1624 ? 1624 : item.top) + 'rpx', 'opacity': item.show?1:0, 'z-index': item.show ? 1000: -1 }"
  30.     >
  31.       {{ item.phone + '获得' + item.prizeName }}
  32.     </view>
  33.   </view>
  34. </template>
  35.  
  36. <script setup lang="ts">
  37. onLoad(async () => {
  38.   startBarrageAnime() // 初始化静态弹幕效果
  39.   initActivityrecord() // 初始化中奖记录效果
  40. })
  41.  
  42. // 弹幕设置
  43. // 每个弹幕对象包含：top（弹幕的顶部位置）、startAnimation（控制动画是否开始）、src（弹幕内容或来源）
  44. const barrages = ref([
  45.   { top: 0, startAnimation: false, src: 'https://gitee.com/jingkunxu/img/raw/master/note/blog/barrage1.png' },
  46.   { top: 0, startAnimation: false, src: 'https://gitee.com/jingkunxu/img/raw/master/note/blog/barrage2.png' },
  47.   { top: 0, startAnimation: false, src: 'https://gitee.com/jingkunxu/img/raw/master/note/blog/barrage3.png' },
  48.   { top: 0, startAnimation: false, src: 'https://gitee.com/jingkunxu/img/raw/master/note/blog/barrage4.png' },
  49.   { top: 0, startAnimation: false, src: 'https://gitee.com/jingkunxu/img/raw/master/note/blog/barrage5.png' }
  50. ])
  51. // 开始弹幕动画的函数
  52. // 这里弹幕我没有设置随机重新刷新，因为CSS动画已经是循环播放的，如果想要更加随机一点，后面可以再优化
  53. const startBarrageAnime = () => {
  54.   // 遍历弹幕数组
  55.   barrages.value.forEach((barrage, index) => {
  56.     // 计算随机顶部位置，使得弹幕垂直方向分布在一定范围内
  57.     const randomTop = Math.floor(Math.random() * 200)
  58.     // 计算随机延迟时间，使得弹幕不是同时出现
  59.     const randomDelay = Math.random() * 10000
  60.     // 设置延时函数，到达随机延迟时间后开始弹幕动画
  61.     setTimeout(() => {
  62.       barrage.top = randomTop // 设置弹幕的顶部位置
  63.       barrage.startAnimation = true // 开始动画
  64.     }, randomDelay)
  65.   })
  66. }
  67.  
  68. /** ******** 获取中奖记录及轮播 begin *************/
  69. interface Record {
  70.   phone: string; // 用户的电话号码
  71.   prizeName: string; // 奖品名称
  72.   top: number; // 记录当前的顶部位置（用于动画或滚动）
  73.   defaultTop: number; // 记录的默认顶部位置（初始位置）
  74.   show: boolean; // 是否显示该记录
  75. }
  76. const recordList = ref<Array<Record>>([]) // 扭蛋中奖记录
  77. const showTop = 786 // 最上面那条广告的高度位置
  78. const showCount = 3 // 显示三条左侧广告消息
  79. const intervalId = ref() // 轮询任务的id，便于退出页面时销毁定时任务
  80. const initActivityrecord = async () => {
  81.   // 模拟中奖数据
  82.   const res = Array.from({ length: 15 }, () => ({ phone: '186****1234', prizeName: '锐星优惠券', top: 0, defaultTop: 0, show: false }))
  83.   recordList.value = res.map((item: Record, i:number) => {
  84.     const top = showTop + (60 * i - 1)
  85.     return {
  86.       ...item,
  87.       top,
  88.       defaultTop: top, // 保存初始高度，便于后面对总漂移数做判断
  89.       show: top >= showTop && top <= showTop + (60 * showCount)
  90.     }
  91.   })
  92.   // 如果总获奖记录不超过要显示的数目个，就不要轮播了
  93.   if (recordList.value.length > (showCount + 1)) {
  94.     intervalId.value = setInterval(updateRecordTop, 3000)
  95.   }
  96.   // 追加一个定时任务，每隔三秒将 recordList 里面每一项的 top 值减去60； 并且判断 在 top >= showTop && top <= showTop + (60 * showCount) 的范围内 设 show 为 true
  97.   // 由于下面有个判断 (recordList.value.length - 4)， 所以数组长度小于四的时候就不用追加动画效果了
  98.   function updateRecordTop () {
  99.     recordList.value = recordList.value.map((item: Record, index) => {
  100.       // 更新top值，减去60
  101.       let newTop = item.top - 60
  102.       // 这里做一下判断，如果轮播的高度超出了总个数，就还原高度
  103.       if ((item.defaultTop - item.top) / 60 > (recordList.value.length - 4)) {
  104.         newTop = item.defaultTop
  105.       }
  106.       // 判断新的top值是否在指定范围内，并设置show属性
  107.       const newShow = newTop >= showTop && newTop <= showTop + (60 * showCount)
  108.       return {
  109.         ...item,
  110.         top: newTop, // 更新top属性
  111.         show: newShow // 更新show属性
  112.       }
  113.     })
  114.   }
  115. }
  116.  
  117. // 离开页面时销毁定时任务
  118. onBeforeUnmount(() => {
  119.   clearInterval(intervalId.value)
  120. })
  121. /** ******** 获取中奖记录及轮播 end *************/
  122.  
  123. </script>
  124.  
  125. <style lang="scss" scoped>
  126. .page {
  127.   width: 100vw;
  128.   min-height: 100vh;
  129.   overflow: hidden;
  130.   background-color: #ff0027;
  131. }
  132.  
  133. /* 弹幕平移动画 */
  134. .barrage-animation {
  135.   animation-name: moveLeft; /* 指定动画名称 */
  136.   animation-duration: 10s; /* 指定动画时长 */
  137.   animation-play-state: running; /* 控制动画播放状态 */
  138.   animation-timing-function: linear; /* 指定动画速度曲线 */
  139.   animation-iteration-count: infinite; /* 指定动画循环次数 */
  140. }
  141.  
  142. /* 这里解释一下为什么用 translate3d 而不是 translateX，主要原因是为了利用硬件加速，提高动画的性能和流畅性。尤其是iOS上浏览器在处理3D变换时通常会触发硬件加速，并且最重要的是非 translate3d 效果在ios的小程序上经常被吞（可恶的ios） */
  143. @keyframes moveLeft {
  144.   /* 这里用百分比平移变换的原因是每个弹幕的长度不一样，导致的平移的速度也会有差别，能起到更加随机的视觉效果 */
  145.   0% { transform: translate3d(100%, 0, 0) }
  146.   100% { transform: translate3d(-500%, 0, 0) }
  147. }
  148.  
  149. /* 中奖记录轮播动画 */
  150. .left-bar{
  151.   position: absolute;
  152.   left: 106rpx;
  153.   z-index: 100;
  154.   max-width: 312rpx;
  155.   padding: 8rpx 16rpx;
  156.   color: #fff;
  157.   font-size: 24rpx;
  158.   background: rgb(0 0 0 / 0.3);
  159.   border-radius: 50rpx;
  160.   transition: all 0.4s ease;
  161. }
  162. .ellipsis {
  163.   overflow: hidden;
  164.   white-space: nowrap;
  165.   text-overflow: ellipsis;
  166. }
  167. </style>

4.小球动画：基于定位的平移动画

扭蛋动画就是直接设置小球的 top 和 left 坐标。

重要：这里解释一下为什么小球变换要用定位而不是更省性能的 transform: 因为部分机型对transform支持性不好,会被过滤掉(比如ios上transform2d不生效,1加ace2对transform单项变换不生效)，因此这种核心动画我选用定位来执行。

其实如果大家对机型的适配性要求不高，我是十分推荐使用 transform3d 来执行大量的变换的，会更加节省性能，如果实在无法避免使用定位来执行大量的变换，尽量将元素脱离文档流，比如设置为绝对定位。

这里由于转了gif图被抽帧所以看起来动画不够连贯，但是其实只要小球数量不是特别多，效果还是很丝滑的。

1.小球及容器 template

将扭蛋范围固定在容器 lottery-box-content 中并设置超出隐藏，这样就算小球的定位设置失误，使其超出了框体，也由于被隐藏所以没有违和感。

由于小球素材只有四种球，因此通过序列号 i%4 取余数来分配小球的外观，由于本篇文章重点都放在动画和效果的实现上，所以这里积分数据都是写死固定的，真实情况可以根据每次扭蛋来更新剩余分数。

2.小球及容器 scss

样式代码有很多，一条条来看。

首先是扭蛋机的框体和小球的样式，小球将定位单独抽出，方便后续较为直观的使用动画控制移动。

然后是球的掉落动画，在入场和扭蛋结束后执行，就是做一个竖直方向的来回震动，这个动画不是很重要，即便被ios屏蔽掉也影响不大，因此这里选用了 translateY 来执行。

最后是最为核心的小球移动动画，我这里手动测量出了小球在容器中的移动范围是 水平0-464 像素之间 ;  垂直方向 0-536 像素之间。

这也是我选择使用定位而不是transform来执行小球动画的原因，当我知道了扭蛋机边界的位置的时候，我可以很自然的模拟出更加真实的小球移动的路径（当x或y至少一个值到达了边界，就可以转换方向），而不用担心出现小球越界甚至虚空换向的问题了。

3.小球及容器 ts

ts中用来初始化小球以及衔接上面的小球动画，其实就是通过 animateClass 变量来控制 run_? 样式是否生效。

4.小球模块完整代码（背景 + 弹幕 + 中奖记录 + 小球）

  1. <!-- 扭蛋机积分抽奖 -->
  2. <template>
  3.   <view class="page">
  4.     <!-- 扭蛋机背景图片 -->
  5.     <image
  6.       class="absolute top-[24rpx] left-0 h-[1444rpx] w-full"
  7.       src="https://gitee.com/jingkunxu/img/raw/master/note/blog/lottery-bg0.png"
  8.     />
  9.  
  10.     <!-- 这里给弹幕增加一个外盒子，确保弹幕超出外框隐藏，以应对ios中页面元素超出时页面可以左右滑动的问题 -->
  11.     <view class="w-[750rpx] h-[600rpx] absolute left-0 top-[280rpx] overflow-hidden">
  12.       <!-- 弹幕 -->
  13.       <image
  14.         v-for="(barrage, i) in barrages"
  15.         :key="i"
  16.         mode="heightFix"
  17.         class="absolute left-[760rpx] h-[88rpx] z-[300]"
  18.         :class="{ 'barrage-animation': barrage.startAnimation }"
  19.         :style="{ top: barrage.top + 'px' }"
  20.         :src="'https://gitee.com/jingkunxu/img/raw/master/note/blog/barrage' + (i+1) + '.png'"
  21.       />
  22.     </view>
  23.  
  24.     <!-- 中奖记录 -->
  25.     <view
  26.       v-for="(item,i) in recordList"
  27.       :key="i"
  28.       class="left-bar ellipsis"
  29.       :style="{'top': (item.top > 1624 ? 1624 : item.top) + 'rpx', 'opacity': item.show?1:0, 'z-index': item.show ? 1000: -1 }"
  30.     >
  31.       {{ item.phone + '获得' + item.prizeName }}
  32.     </view>
  33.  
  34.     <!-- 扭蛋机 -->
  35.     <view class="lottery-box">
  36.       <!-- 扭蛋机主框框体 -->
  37.       <view class="lottery-box-content">
  38.         <!-- 扭蛋机小球 -->
  39.         <span
  40.           v-for="(item, i) in balls"
  41.           :key="i"
  42.           ref="balls"
  43.           class="qiu"
  44.           :class="['ball_' + i%4, 'qiu_' + i, 'diaol_' + i, animateClass[i] ? 'run_' + i : '']"
  45.         />
  46.       </view>
  47.       <!-- 扭蛋机左侧按钮 -->
  48.       <view class="absolute rounded-full w-[160rpx] h-[160rpx] left-[176rpx] top-[1060rpx]" @click="handleGameGo(1)">
  49.         <text class="block text-[56rpx] text-[#fff] font-bold mt-[16rpx] flex-center">单抽</text>
  50.         <text class="block text-[22rpx] text-[#fff] mt-[10rpx] flex-center">10</text>
  51.       </view>
  52.       <!-- 扭蛋机右侧按钮 -->
  53.       <view class="absolute rounded-full w-[160rpx] h-[160rpx] left-[418rpx] top-[1060rpx]" @click="handleGameGo(10)">
  54.         <text class="block text-[56rpx] text-[#fff] font-bold mt-[16rpx] flex-center">十连</text>
  55.         <text class="block text-[22rpx] text-[#fff] mt-[10rpx] flex-center">90</text>
  56.       </view>
  57.       <!-- 扭蛋机积分数据 -->
  58.       <view class="absolute left-0 top-[1212rpx] h-[46rpx] w-full text-[24rpx] text-[#A13000] flex-center">
  59.         积分:10000
  60.       </view>
  61.     </view>
  62.   </view>
  63. </template>
  64.  
  65. <script setup lang="ts">
  66. onLoad(async () => {
  67.   startBarrageAnime() // 初始化静态弹幕效果
  68.   initActivityrecord() // 初始化中奖记录效果
  69.   initBall() // 初始化扭蛋机小球
  70. })
  71.  
  72. // 弹幕设置
  73. // 每个弹幕对象包含：top（弹幕的顶部位置）、startAnimation（控制动画是否开始）、src（弹幕内容或来源）
  74. const barrages = ref([
  75.   { top: 0, startAnimation: false, src: 'https://gitee.com/jingkunxu/img/raw/master/note/blog/barrage1.png' },
  76.   { top: 0, startAnimation: false, src: 'https://gitee.com/jingkunxu/img/raw/master/note/blog/barrage2.png' },
  77.   { top: 0, startAnimation: false, src: 'https://gitee.com/jingkunxu/img/raw/master/note/blog/barrage3.png' },
  78.   { top: 0, startAnimation: false, src: 'https://gitee.com/jingkunxu/img/raw/master/note/blog/barrage4.png' },
  79.   { top: 0, startAnimation: false, src: 'https://gitee.com/jingkunxu/img/raw/master/note/blog/barrage5.png' }
  80. ])
  81. // 开始弹幕动画的函数
  82. // 这里弹幕我没有设置随机重新刷新，因为CSS动画已经是循环播放的，如果想要更加随机一点，后面可以再优化
  83. const startBarrageAnime = () => {
  84.   // 遍历弹幕数组
  85.   barrages.value.forEach((barrage, index) => {
  86.     // 计算随机顶部位置，使得弹幕垂直方向分布在一定范围内
  87.     const randomTop = Math.floor(Math.random() * 200)
  88.     // 计算随机延迟时间，使得弹幕不是同时出现
  89.     const randomDelay = Math.random() * 10000
  90.     // 设置延时函数，到达随机延迟时间后开始弹幕动画
  91.     setTimeout(() => {
  92.       barrage.top = randomTop // 设置弹幕的顶部位置
  93.       barrage.startAnimation = true // 开始动画
  94.     }, randomDelay)
  95.   })
  96. }
  97.  
  98. /** ******** 获取中奖记录及轮播 begin *************/
  99. interface Record {
  100.   phone: string; // 用户的电话号码
  101.   prizeName: string; // 奖品名称
  102.   top: number; // 记录当前的顶部位置（用于动画或滚动）
  103.   defaultTop: number; // 记录的默认顶部位置（初始位置）
  104.   show: boolean; // 是否显示该记录
  105. }
  106. const recordList = ref<Array<Record>>([]) // 扭蛋中奖记录
  107. const showTop = 786 // 最上面那条广告的高度位置
  108. const showCount = 3 // 显示三条左侧广告消息
  109. const intervalId = ref() // 轮询任务的id，便于退出页面时销毁定时任务
  110. const initActivityrecord = async () => {
  111.   // 模拟中奖数据
  112.   const res = Array.from({ length: 15 }, () => ({ phone: '186****1234', prizeName: '锐星优惠券', top: 0, defaultTop: 0, show: false }))
  113.   recordList.value = res.map((item: Record, i:number) => {
  114.     const top = showTop + (60 * i - 1)
  115.     return {
  116.       ...item,
  117.       top,
  118.       defaultTop: top, // 保存初始高度，便于后面对总漂移数做判断
  119.       show: top >= showTop && top <= showTop + (60 * showCount)
  120.     }
  121.   })
  122.   // 如果总获奖记录不超过要显示的数目个，就不要轮播了
  123.   if (recordList.value.length > (showCount + 1)) {
  124.     intervalId.value = setInterval(updateRecordTop, 3000)
  125.   }
  126.   // 追加一个定时任务，每隔三秒将 recordList 里面每一项的 top 值减去60； 并且判断 在 top >= showTop && top <= showTop + (60 * showCount) 的范围内 设 show 为 true
  127.   // 由于下面有个判断 (recordList.value.length - 4)， 所以数组长度小于四的时候就不用追加动画效果了
  128.   function updateRecordTop () {
  129.     recordList.value = recordList.value.map((item: Record, index) => {
  130.       // 更新top值，减去60
  131.       let newTop = item.top - 60
  132.       // 这里做一下判断，如果轮播的高度超出了总个数，就还原高度
  133.       if ((item.defaultTop - item.top) / 60 > (recordList.value.length - 4)) {
  134.         newTop = item.defaultTop
  135.       }
  136.       // 判断新的top值是否在指定范围内，并设置show属性
  137.       const newShow = newTop >= showTop && newTop <= showTop + (60 * showCount)
  138.       return {
  139.         ...item,
  140.         top: newTop, // 更新top属性
  141.         show: newShow // 更新show属性
  142.       }
  143.     })
  144.   }
  145. }
  146.  
  147. // 离开页面时销毁定时任务
  148. onBeforeUnmount(() => {
  149.   clearInterval(intervalId.value)
  150. })
  151. /** ******** 获取中奖记录及轮播 end *************/
  152.  
  153. const balls = ref<any[]>([])
  154. const animateClass = ref(Array(11).fill(false))
  155. const initBall = () => {
  156.   // 将 balls 数组填充为 DOM 元素的引用
  157.   balls.value = Array.from({ length: 11 }, (_, i) => i + 1).map(i => uni.createSelectorQuery().select('.qiu_' + i))
  158. }
  159.  
  160. // 开始抽奖
  161. let drawLoading = false
  162. const drawType = ref(1) // 抽奖类型，1单抽 10十抽
  163. const handleGameGo = async (type: number) => {
  164.   if (drawLoading) return
  165.   drawType.value = type
  166.   drawLoading = true
  167.  
  168.   beginDrawAnimation() // 开始小球乱窜动画
  169.  
  170.   // 这里仅关闭小球乱窜动画，接着以小球掉落动画取代
  171.   setTimeout(endDrawAnimation, 1400)
  172.   setTimeout(() => {
  173.     drawLoading = false
  174.   }, 2200)
  175.  
  176.   // 绘制动画
  177.   function beginDrawAnimation () {
  178.     animateClass.value = Array(11).fill(true)
  179.   }
  180.   // 结束动画
  181.   function endDrawAnimation () {
  182.     animateClass.value = Array(11).fill(false)
  183.   }
  184. }
  185.  
  186. </script>
  187.  
  188. <style lang="scss" scoped>
  189. .page {
  190.   width: 100vw;
  191.   min-height: 100vh;
  192.   overflow: hidden;
  193.   background-color: #ff0027;
  194. }
  195.  
  196. /* 弹幕平移动画 */
  197. .barrage-animation {
  198.   animation-name: moveLeft; /* 指定动画名称 */
  199.   animation-duration: 10s; /* 指定动画时长 */
  200.   animation-play-state: running; /* 控制动画播放状态 */
  201.   animation-timing-function: linear; /* 指定动画速度曲线 */
  202.   animation-iteration-count: infinite; /* 指定动画循环次数 */
  203. }
  204.  
  205. /* 这里解释一下为什么用 translate3d 而不是 translateX，主要原因是为了利用硬件加速，提高动画的性能和流畅性。尤其是iOS上浏览器在处理3D变换时通常会触发硬件加速，并且最重要的是非 translate3d 效果在ios的小程序上经常被吞（可恶的ios） */
  206. @keyframes moveLeft {
  207.   /* 这里用百分比平移变换的原因是每个弹幕的长度不一样，导致的平移的速度也会有差别，能起到更加随机的视觉效果 */
  208.   0% { transform: translate3d(100%, 0, 0) }
  209.   100% { transform: translate3d(-500%, 0, 0) }
  210. }
  211.  
  212. /* 中奖记录轮播动画 */
  213. .left-bar{
  214.   position: absolute;
  215.   left: 106rpx;
  216.   z-index: 100;
  217.   max-width: 312rpx;
  218.   padding: 8rpx 16rpx;
  219.   color: #fff;
  220.   font-size: 24rpx;
  221.   background: rgb(0 0 0 / 0.3);
  222.   border-radius: 50rpx;
  223.   transition: all 0.4s ease;
  224. }
  225. .ellipsis {
  226.   overflow: hidden;
  227.   white-space: nowrap;
  228.   text-overflow: ellipsis;
  229. }
  230.  
  231. /* 以下都是扭蛋机相关的动画 */
  232. .lottery-box .lottery-box-content{
  233.   position: absolute;
  234.   top: 390rpx;
  235.   left: 92rpx;
  236.   z-index: 99;
  237.   width: 566rpx;
  238.   height: 680rpx;
  239.   overflow: hidden;
  240.  
  241.   .qiu {
  242.     position: absolute;
  243.     display: block;
  244.     width: 100rpx;
  245.     height: 100rpx;
  246.   }
  247.  
  248.   /* 各个球的定位 */
  249.   .qiu_0 { top: 483rpx; left: 430rpx; }
  250.   .qiu_1 { top: 384rpx; left: 32rpx; }
  251.   .qiu_2 { top: 482rpx; left: 23rpx; }
  252.   .qiu_3 { top: 580rpx; left: 10rpx; }
  253.   .qiu_4 { top: 438rpx; left: 115rpx; }
  254.   .qiu_5 { top: 500rpx; left: 186rpx; }
  255.   .qiu_6 { top: 542rpx; left: 100rpx; }
  256.   .qiu_7 { top: 458rpx; left: 278rpx; }
  257.   .qiu_8 { top: 580rpx; left: 248rpx; }
  258.   .qiu_9 { top: 577rpx; left: 462rpx; }
  259.   .qiu_10 { top: 537rpx; left: 340rpx; }
  260.   .qiu_11 { top: 480rpx; left: 333rpx; }
  261.  
  262.   .diaol_0{animation:dropOut 1s linear 1.4s backwards;}
  263.   .diaol_0::after{animation-delay:1.3s;}
  264.   .diaol_1{animation:dropOut 1s linear 0.9s backwards;}
  265.   .diaol_1::after{animation-delay:0.8s;}
  266.   .diaol_2{animation:dropOut 1s linear 0.6s backwards;}
  267.   .diaol_2::after{animation-delay:0.5s;}
  268.   .diaol_3{animation:dropOut 1s linear  backwards;}
  269.   .diaol_4{animation:dropOut 1s linear 1.1s backwards;}
  270.   .diaol_4::after{animation-delay:1s;}
  271.   .diaol_5{animation:dropOut 1s linear 0.8s backwards;}
  272.   .diaol_5::after{animation-delay:0.7s;}
  273.   .diaol_6{animation:dropOut 1s linear 0.4s backwards;}
  274.   .diaol_6::after{animation-delay:0.3s;}
  275.   .diaol_7{animation:dropOut 1s linear 0.9s backwards;}
  276.   .diaol_7::after{animation-delay:0.8s;}
  277.   .diaol_8{animation:dropOut 1s linear 0.6s backwards;}
  278.   .diaol_8::after{animation-delay:0.5s;}
  279.   .diaol_9{animation:dropOut 1s linear 1.1s backwards;}
  280.   .diaol_9::after{animation-delay:1s;}
  281.   .diaol_10{animation:dropOut 1s linear 0.2s backwards;}
  282.   .diaol_11{animation:dropOut 1s linear 1.4s backwards;}
  283.   .diaol_11::after{animation-delay:1.3s;}
  284.  
  285.   @keyframes dropOut {
  286.     0% { transform: translateY(-200%); opacity: 0; }
  287.     5% { transform: translateY(-200%); }
  288.     15% { transform: translateY(0); }
  289.     30% { transform: translateY(-100%); }
  290.     40% { transform: translateY(0%); }
  291.     50% { transform: translateY(-60%); }
  292.     70% { transform: translateY(0%); }
  293.     80% { transform: translateY(-30%); }
  294.     90% { transform: translateY(0%); }
  295.     95% { transform: translateY(-14%); }
  296.     97% { transform: translateY(0%); }
  297.     99% { transform: translateY(-6%); }
  298.     100% { transform: translateY(0); opacity: 1; }
  299.   }
  300.  
  301.   .run_0 {animation:around0  1.5s linear  infinite;}
  302.   .run_1 {animation:around1  1.5s linear  infinite;}
  303.   .run_2 {animation:around2  1.5s linear  infinite;}
  304.   .run_3 {animation:around3  1.5s linear  infinite;}
  305.   .run_4 {animation:around4  1.5s linear  infinite;}
  306.   .run_5 {animation:around5  1.5s linear  infinite;}
  307.   .run_6 {animation:around6  1.5s linear  infinite;}
  308.   .run_7 {animation:around7  1.5s linear  infinite;}
  309.   .run_8 {animation:around8  1.5s linear  infinite;}
  310.   .run_9 {animation:around9  1.5s linear  infinite;}
  311.   .run_10{animation:around10 1.5s linear  infinite;}
  312.   .run_11{animation:around11 1.5s linear  infinite;}
  313.  
  314.   /* 移动范围 left 0-464 ;  top 0-536 */
  315.   /* 这里解释一下为什么小球变换要用定位而不是更省性能transform: 因为部分机型对transform支持性不好,会被过滤掉(比如ios上transform2d不生效,1加ace2对transform单项变换不生效)因此这种关键动画使用定位来执行 */
  316.   @keyframes around0 {
  317.     0%    { top: 483rpx; left: 430rpx; }
  318.     20%   {   top: 536rpx; left: 0rpx; }
  319.     40%   { top: 0rpx; left: 464rpx;   }
  320.     60%   {   top: 200rpx; left: 0rpx; }
  321.     80%   { top: 3rpx; left: 303rpx;   }
  322.     100%  { top: 483rpx; left: 430rpx; }
  323.   }
  324.   @keyframes around1 {
  325.     0%    {  top: 384rpx; left: 32rpx; }
  326.     16%   { top: 200rpx; left: 450rpx; }
  327.     32%   {   top: 24rpx; left: 8rpx;  }
  328.     48%   { top: 500rpx; left: 106rpx; }
  329.     64%   {   top: 6rpx; left: 0rpx;   }
  330.     82%   { top: 180rpx; left: 464rpx; }
  331.     100%  {  top: 384rpx; left: 32rpx; }
  332.   }
  333.  
  334.   @keyframes around2 {
  335.     0%    {  top: 482rpx; left: 23rpx; }
  336.     20%   { top: 64rpx; left: 448rpx;   }
  337.     40%   {  top: 520rpx; left: 16rpx;  }
  338.     60%   { top: 208rpx; left: 432rpx;  }
  339.     80%   {  top: 8rpx; left: 80rpx;    }
  340.     100%  {  top: 482rpx; left: 23rpx;  }
  341.   }
  342.  
  343.   @keyframes around3 {
  344.     0%    {  top: 580rpx; left: 10rpx; }
  345.     20%   { top: 100rpx; left: 300rpx;  }
  346.     40%   {  top: 20rpx; left: 10rpx;   }
  347.     60%   { top: 400rpx; left: 460rpx;  }
  348.     80%   { top: 68rpx; left: 220rpx;   }
  349.     100%  {  top: 580rpx; left: 10rpx;  }
  350.   }
  351.  
  352.   @keyframes around4 {
  353.     0%    { top: 438rpx; left: 115rpx; }
  354.     16%   { top: 10rpx; left: 300rpx;  }
  355.     32%   {  top: 530rpx; left: 30rpx;  }
  356.     48%   { top: 200rpx; left: 450rpx;  }
  357.     64%   {  top: 300rpx; left: 20rpx;  }
  358.     82%   { top: 560rpx; left: 450rpx;  }
  359.     100%  { top: 438rpx; left: 115rpx;  }
  360.   }
  361.  
  362.   @keyframes around5 {
  363.     0%    { top: 500rpx; left: 186rpx; }
  364.     20%   {  top: 200rpx; left: 50rpx;  }
  365.     40%   { top: 350rpx; left: 400rpx;  }
  366.     60%   { top: 530rpx; left: 100rpx;  }
  367.     80%   { top: 100rpx; left: 380rpx;  }
  368.     100%  { top: 500rpx; left: 186rpx;  }
  369.   }
  370.  
  371.   @keyframes around6 {
  372.     0%    {  top: 542rpx; left: 100rpx; }
  373.     15%   {  top: 300rpx; left: 300rpx;  }
  374.     30%   {  top: 100rpx; left: 100rpx;  }
  375.     45%   {  top: 200rpx; left: 400rpx;  }
  376.     60%   {  top: 400rpx; left: 200rpx;  }
  377.     75%   {  top: 100rpx; left: 450rpx;  }
  378.     100%  {  top: 542rpx; left: 100rpx;  }
  379.   }
  380.  
  381.   @keyframes around7 {
  382.     0%    {  top: 458rpx; left: 278rpx; }
  383.     15%   {   top: 200rpx; left: 50rpx;  }
  384.     35%   {  top: 150rpx; left: 450rpx;  }
  385.     55%   {   top: 520rpx; left: 50rpx;  }
  386.     75%   {  top: 250rpx; left: 450rpx;  }
  387.     90%   {   top: 530rpx; left: 20rpx;  }
  388.     100%  {  top: 458rpx; left: 278rpx;  }
  389.   }
  390.  
  391.   @keyframes around8 {
  392.     0%    {  top: 580rpx; left: 248rpx;  }
  393.     20%   {   top: 350rpx; left: 50rpx;  }
  394.     40%   {  top: 10rpx; left: 460rpx;   }
  395.     60%   {  top: 536rpx; left: 460rpx;  }
  396.     80%   {  top: 20rpx; left: 380rpx;   }
  397.     100%  {  top: 580rpx; left: 248rpx;  }
  398.   }
  399.  
  400.   @keyframes around9 {
  401.     0%    {  top: 577rpx; left: 462rpx; }
  402.     12.5% {  top: 400rpx; left: 300rpx;  }
  403.     25%   {  top: 450rpx; left: 500rpx;  }
  404.     37.5% {  top: 350rpx; left: 200rpx;  }
  405.     50%   {  top: 250rpx; left: 450rpx;  }
  406.     62.5% {  top: 400rpx; left: 150rpx;  }
  407.     75%   {  top: 150rpx; left: 350rpx;  }
  408.     87.5% {  top: 500rpx; left: 250rpx;  }
  409.     100%  {  top: 577rpx; left: 462rpx;  }
  410.   }
  411.  
  412.   @keyframes around10 {
  413.     0%    {  top: 537rpx; left: 340rpx;  }
  414.     15%   {  top: 400rpx; left: 150rpx;  }
  415.     30%   {  top: 350rpx; left: 450rpx;  }
  416.     50%   {   top: 50rpx; left: 50rpx;   }
  417.     70%   {  top: 450rpx; left: 400rpx;  }
  418.     85%   {  top: 550rpx; left: 120rpx;  }
  419.     100%  {  top: 537rpx; left: 340rpx;  }
  420.   }
  421.  
  422.   @keyframes around11 {
  423.     0%   { top: 480rpx; left: 333rpx; }
  424.     16%  { top: 350rpx; left: 464rpx; }
  425.     33%  { top: 400rpx; left: 200rpx; }
  426.     50%  { top: 200rpx; left: 400rpx; }
  427.     66%  { top: 300rpx; left: 100rpx; }
  428.     83%  { top: 100rpx; left: 300rpx; }
  429.     100% { top: 480rpx; left: 333rpx; }
  430.   }
  431.  
  432.   .ball_0{
  433.     background-image: url('https://gitee.com/jingkunxu/img/raw/master/note/blog/ball0.png');
  434.     background-repeat: no-repeat;
  435.     background-size: 100%;
  436.   }
  437.  
  438.   .ball_1{
  439.     background-image: url('https://gitee.com/jingkunxu/img/raw/master/note/blog/ball1.png');
  440.     background-repeat: no-repeat;
  441.     background-size: 100%;
  442.   }
  443.  
  444.   .ball_2{
  445.     background-image: url('https://gitee.com/jingkunxu/img/raw/master/note/blog/ball2.png');
  446.     background-repeat: no-repeat;
  447.     background-size: 100%;
  448.   }
  449.  
  450.   .ball_3{
  451.     background-image: url('https://gitee.com/jingkunxu/img/raw/master/note/blog/ball3.png');
  452.     background-repeat: no-repeat;
  453.     background-size: 100%;
  454.   }
  455. }
  456.  
  457. </style>

5.标题箭头，基于关键帧的叠三角指向效果

这里通过控制两个三角形透明度动画的关键帧的先后顺序，达到一种箭头由外指向内的视觉效果。

这里动画很快，转成gif图看动画也不明显，就不贴图了，可以根据视频里看出这里标题的动画效果。

这一块不是很重要，属于锦上添花的功能，源码就不单独贴出了，放在后面一起给出吧。

6.奖品动画，渐变背景添加扫光

最重要的地方来了，你以为的扭蛋机核心效果：小球乱窜效果；实际的扭蛋机核心效果：奖品弹窗效果。

扭蛋中的小球平移效果其实并不是很重要，因为用户视觉上只会停留很短的时间（一秒左右）就会被奖品弹窗给覆盖，因此奖品弹窗效果才是最重要的模块（用户视觉停留最长）。

这里奖品弹窗使用五层效果叠加，即 遮罩+底图+奖品图+蒙版+扫光层 的效果，因此要注意 z-index 的层级设置。

单抽和十连抽效果不同，先分开讲。

单抽效果比较简单，只需要添加一层扫光效果即可。

扫光的效果是，先绘制一条斜向的渐变div，接着以纵向或横向的方式平移即可。通过渐变让一道白光一闪而过，一开始使用的斜向位移，后来发觉只要背景是斜的，哪怕只做一个维度的平移而形成的视觉效果也像斜向扫描，因此去掉水平渐变。

接下来是十连抽的效果图，有了单抽效果图做铺垫，十连抽就很好理解了，只不过增加了十个扭蛋之间的依次展现的效果。

十连抽的核心在于，灵活设置不同的 animation-delay 属性，让多个商品之间的动画有错落感。

十连抽scss：

十连抽中有个翻转动画，如果是在 h5 端就很容易实现，直接使用 backface-visibility: hidden 让div背部的元素隐藏，可惜这里是小程序，backface-visibility: hidden 不生效，只能通过 opacity 来让翻转到背面的元素隐藏。

在ts中额外设置十连抽商品弹窗的位置，这里单独拿出来的 delay 属性是专门控制扫光动画的，渐现动画和翻转动画都是根据商品下标来按顺序来的，但是扫光动画是从左下角扫到右上角，所以独立设置一下delay属性。

效果如下：

最后的扫光动画一定要加上，它是立体感的灵魂。

7.案例源码

注释写的很详细，可能有些同学没有在 tailwindcss 环境下，不过问题不大，那些模板中的样式都能望文知义，很好理解。

  1. <!-- 扭蛋机积分抽奖 -->
  2. <template>
  3.   <view class="page">
  4.     <!-- 扭蛋机背景图片 -->
  5.     <image
  6.       class="absolute top-[24rpx] left-0 h-[1444rpx] w-full"
  7.       src="https://gitee.com/jingkunxu/img/raw/master/note/blog/lottery-bg0.png"
  8.     />
  9.  
  10.     <!-- 这里给弹幕增加一个外盒子，确保弹幕超出外框隐藏，以应对ios中页面元素超出时页面可以左右滑动的问题 -->
  11.     <view class="w-[750rpx] h-[600rpx] absolute left-0 top-[280rpx] overflow-hidden">
  12.       <!-- 弹幕 -->
  13.       <image
  14.         v-for="(barrage, i) in barrages"
  15.         :key="i"
  16.         mode="heightFix"
  17.         class="absolute left-[760rpx] h-[88rpx] z-[300]"
  18.         :class="{ 'barrage-animation': barrage.startAnimation }"
  19.         :style="{ top: barrage.top + 'px' }"
  20.         :src="'https://gitee.com/jingkunxu/img/raw/master/note/blog/barrage' + (i+1) + '.png'"
  21.       />
  22.     </view>
  23.  
  24.     <!-- 中奖记录 -->
  25.     <view
  26.       v-for="(item,i) in recordList"
  27.       :key="i"
  28.       class="left-bar ellipsis"
  29.       :style="{'top': (item.top > 1624 ? 1624 : item.top) + 'rpx', 'opacity': item.show?1:0, 'z-index': item.show ? 1000: -1 }"
  30.     >
  31.       {{ item.phone + '获得' + item.prizeName }}
  32.     </view>
  33.  
  34.     <!-- 扭蛋机 -->
  35.     <view class="lottery-box">
  36.       <!-- 扭蛋机主框框体 -->
  37.       <view class="lottery-box-content">
  38.         <!-- 扭蛋机小球 -->
  39.         <span
  40.           v-for="(item, i) in balls"
  41.           :key="i"
  42.           ref="balls"
  43.           class="qiu"
  44.           :class="['ball_' + i%4, 'qiu_' + i, 'diaol_' + i, animateClass[i] ? 'run_' + i : '']"
  45.         />
  46.       </view>
  47.       <!-- 扭蛋机左侧按钮 -->
  48.       <view class="absolute rounded-full w-[160rpx] h-[160rpx] left-[176rpx] top-[1060rpx]" @click="handleGameGo(1)">
  49.         <text class="block text-[56rpx] text-[#fff] font-bold mt-[16rpx] flex-center">单抽</text>
  50.         <text class="block text-[22rpx] text-[#fff] mt-[10rpx] flex-center">10</text>
  51.       </view>
  52.       <!-- 扭蛋机右侧按钮 -->
  53.       <view class="absolute rounded-full w-[160rpx] h-[160rpx] left-[418rpx] top-[1060rpx]" @click="handleGameGo(10)">
  54.         <text class="block text-[56rpx] text-[#fff] font-bold mt-[16rpx] flex-center">十连</text>
  55.         <text class="block text-[22rpx] text-[#fff] mt-[10rpx] flex-center">90</text>
  56.       </view>
  57.       <!-- 扭蛋机积分数据 -->
  58.       <view class="absolute left-0 top-[1212rpx] h-[46rpx] w-full text-[24rpx] text-[#A13000] flex-center">
  59.         积分:10000
  60.       </view>
  61.     </view>
  62.  
  63.     <view class="h-[1342rpx]" /><!-- 占位至扭蛋机末端,恢复文档流 -->
  64.  
  65.     <!-- 奖品展示标题，这里有个比较弱的动画效果，两边的箭头会往中间的文字部分指向 -->
  66.     <view class="my-[24rpx] flex-center">
  67.       <!-- 左外侧箭头，会先亮起 -->
  68.       <view class="triangle outside" style="transform: rotate(90deg);" />
  69.       <!-- 左内侧箭头，稍微后亮 -->
  70.       <view class="triangle inside" style="transform: rotate(90deg);" />
  71.       <view class="mx-[16rpx] text-[36rpx] text-[#ffffff] font-medium z-10">
  72.         奖品展示
  73.       </view>
  74.       <!-- 右内侧箭头，后亮 -->
  75.       <view class="triangle inside" style="transform: rotate(-90deg);" />
  76.       <!-- 右外侧箭头，先亮起来 -->
  77.       <view class="triangle outside" style="transform: rotate(-90deg);" />
  78.     </view>
  79.  
  80.     <!-- 奖品展示区 -->
  81.     <view class="relative w-[702rpx] mx-[24rpx] py-[36rpx] pl-[42rpx] flex flex-wrap bg-[#fff] z-10 rounded-[16rpx]">
  82.       <view v-for="item in [1,2,3,4,5,6,7,8,9]" :key="item" class="mb-[24rpx] w-[190rpx] mr-[24rpx] h-[234rpx]">
  83.         <!-- 奖品封面 -->
  84.         <image class="rounded-[16rpx] bg-[#FF0000] w-[190rpx] h-[162rpx]" mode="aspectFill" src="https://gitee.com/jingkunxu/img/raw/master/note/blog/goods.jpg" />
  85.         <!-- 奖品名称 -->
  86.         <view class="my-[8rpx] ellipsis w-[190rpx] break-all text-[#333] text-[24rpx]">
  87.           锐星优惠券
  88.         </view>
  89.         <view class="text-[24rpx] text-[#FF0000] line-through">
  90.           ￥5.5
  91.         </view>
  92.       </view>
  93.     </view>
  94.  
  95.     <!-- 占位盒，避免最底部贴紧边缘，一般都是用padding-bottom占位，这里单独用一个盒子是为了显眼，因为本页绝对定位的元素较多 -->
  96.     <view class="w-full h-[64rpx]" />
  97.  
  98.     <!-- 遮罩与弹窗 -->
  99.     <view v-if="dialogObj.show" class="loaded fixed top-0 left-0 w-full h-[100vh] bg-[rgba(0,0,0,0.7)] z-[9999]">
  100.       <!-- 关闭按钮 -->
  101.       <!-- 给关闭按钮加上一个更广的事件触发范围，不然用户不容易点到 -->
  102.       <view class="absolute w-[80rpx] h-[80rpx] top-[330rpx] right-[62rpx] z-[10020] flex-center" @click="closeDialog">
  103.         <image class="w-[42rpx] h-[42rpx]" src="https://gitee.com/jingkunxu/img/raw/master/note/blog/closed.png" />
  104.       </view>
  105.  
  106.       <!-- 单抽显示奖品 -->
  107.       <template v-if="drawType===1">
  108.         <!-- 商品名称 -->
  109.         <view class="absolute flicker w-full h-[40rpx] px-[32rpx] flex-center top-[500rpx] text-[26rpx] text-[#fff] font-semibold">
  110.           —— 锐星优惠券 ——
  111.         </view>
  112.         <!-- 底部背景 -->
  113.         <image class="absolute w-[750rpx] h-[605rpx] top-[400rpx] left-0 z-[10000]" src="https://gitee.com/jingkunxu/img/raw/master/note/blog/result1.png" />
  114.  
  115.         <!-- 奖品图片 -->
  116.         <image v-if="dialogObj.show" class="absolute rounded-full w-[430rpx] h-[430rpx] left-[160rpx] top-[568rpx] z-[10005]" mode="aspectFill" src="https://gitee.com/jingkunxu/img/raw/master/note/blog/goods.jpg" />
  117.  
  118.         <!-- 上层遮罩 -->
  119.         <image class="absolute w-[750rpx] h-[444rpx] top-[560rpx] left-0 z-[10010]" src="https://gitee.com/jingkunxu/img/raw/master/note/blog/result2.png" />
  120.  
  121.         <!-- 白光扫描层，增加一道扫描动画使商品效果更为立体 -->
  122.         <view v-if="dialogObj.show" class="rounded-full overflow-hidden absolute  w-[430rpx] h-[430rpx] left-[160rpx] top-[568rpx] z-[10020]">
  123.           <!-- 扫描主体 -->
  124.           <view class="scan-overlay" />
  125.         </view>
  126.       </template>
  127.  
  128.       <!-- 十连展示商品 -->
  129.       <template v-if="drawType===10">
  130.         <!-- 顶部恭喜获得 -->
  131.         <image class="absolute w-[443rpx] h-[98rpx] top-[400rpx] left-[153rpx] z-[10000]" src="https://gitee.com/jingkunxu/img/raw/master/note/blog/result3.png" />
  132.         <!-- 每一个中奖盒子 -->
  133.         <view
  134.           v-for="(item,i) in tenMap"
  135.           :key="i"
  136.           :style="{'left': item.left, 'top': item.top, 'animation-delay': (i*0.05+0.2) + 's'}"
  137.           class="absolute w-[172rpx] h-[172rpx] loaded"
  138.         >
  139.           <!-- 扭蛋内容，正面底图，背面商品 -->
  140.           <view class="toy-box toy" :style="{'animation-delay': (i*0.05+0.6) + 's'}">
  141.             <!-- 商品图 -->
  142.             <div class="front" :style="{'animation-delay': (i*0.05+0.6) + 's'}">
  143.               <image src="https://gitee.com/jingkunxu/img/raw/master/note/blog/goods.jpg" alt="Back" />
  144.             </div>
  145.             <!-- 背景图 -->
  146.             <div class="back" :style="{'animation-delay': (i*0.05+0.6) + 's'}">
  147.               <image src="https://gitee.com/jingkunxu/img/raw/master/note/blog/result5.png" alt="Front" />
  148.             </div>
  149.           </view>
  150.  
  151.           <!-- 白光扫描层，增加一道扫描动画使商品效果更为立体 -->
  152.           <view class="toy-box absolute z-[10020]">
  153.             <!-- 扫描主体 -->
  154.             <view class="scan-overlay-ten" :style="{'animation-delay': (item.delay*0.1 + 1.6) + 's'}" />
  155.           </view>
  156.           <!-- 商品遮罩 -->
  157.           <image class="absolute w-full h-[142rpx] top-0 left-0 z-[10010]" src="https://gitee.com/jingkunxu/img/raw/master/note/blog/result4.png" />
  158.           <view class="mt-[12rpx] w-full h-[60rpx] text-[22rpx] text-[#fff] text-line-2 font-semibold text-center">
  159.             锐星优惠券
  160.           </view>
  161.         </view>
  162.       </template>
  163.  
  164.       <!-- 左侧按钮 -->
  165.       <button class="absolute w-[226rpx] h-[84.0rpx] left-[116rpx] z-[10020] flex-center plain" :style="{top: drawType===10? '1170rpx': '958rpx'}" plain open-type="share">
  166.         <!-- 左侧按钮背景图 -->
  167.         <image class="absolute w-full h-full insert-0 z-[10020]" src="https://gitee.com/jingkunxu/img/raw/master/note/blog/left.png" />
  168.         <!-- 左侧按钮名 -->
  169.         <text class="text-[40rpx] text-[#fff] font-bold z-[10030]">分享</text>
  170.       </button>
  171.       <!-- 右侧按钮 -->
  172.       <view class="absolute w-[226rpx] h-[84.0rpx] left-[408rpx] z-[10020] flex-center" :style="{top: drawType===10? '1170rpx': '958rpx'}" @click="onceAgain">
  173.         <!-- 右侧按钮背景图 -->
  174.         <image class="absolute w-full h-full insert-0 z-[10020]" src="https://gitee.com/jingkunxu/img/raw/master/note/blog/right.png" />
  175.         <!-- 右侧按钮名 -->
  176.         <text class="text-[40rpx] text-[#fff] font-bold z-[10030]">{{ drawType===1 ? '再抽一次':'再抽十次' }}</text>
  177.       </view>
  178.     </view>
  179.   </view>
  180. </template>
  181.  
  182. <script setup lang="ts">
  183. onLoad(async () => {
  184.   startBarrageAnime() // 初始化静态弹幕效果
  185.   initActivityrecord() // 初始化中奖记录效果
  186.   initBall() // 初始化扭蛋机小球
  187. })
  188.  
  189. // 弹幕设置
  190. // 每个弹幕对象包含：top（弹幕的顶部位置）、startAnimation（控制动画是否开始）、src（弹幕内容或来源）
  191. const barrages = ref([
  192.   { top: 0, startAnimation: false, src: 'https://gitee.com/jingkunxu/img/raw/master/note/blog/barrage1.png' },
  193.   { top: 0, startAnimation: false, src: 'https://gitee.com/jingkunxu/img/raw/master/note/blog/barrage2.png' },
  194.   { top: 0, startAnimation: false, src: 'https://gitee.com/jingkunxu/img/raw/master/note/blog/barrage3.png' },
  195.   { top: 0, startAnimation: false, src: 'https://gitee.com/jingkunxu/img/raw/master/note/blog/barrage4.png' },
  196.   { top: 0, startAnimation: false, src: 'https://gitee.com/jingkunxu/img/raw/master/note/blog/barrage5.png' }
  197. ])
  198. // 开始弹幕动画的函数
  199. // 这里弹幕我没有设置随机重新刷新，因为CSS动画已经是循环播放的，如果想要更加随机一点，后面可以再优化
  200. const startBarrageAnime = () => {
  201.   // 遍历弹幕数组
  202.   barrages.value.forEach((barrage, index) => {
  203.     // 计算随机顶部位置，使得弹幕垂直方向分布在一定范围内
  204.     const randomTop = Math.floor(Math.random() * 200)
  205.     // 计算随机延迟时间，使得弹幕不是同时出现
  206.     const randomDelay = Math.random() * 10000
  207.     // 设置延时函数，到达随机延迟时间后开始弹幕动画
  208.     setTimeout(() => {
  209.       barrage.top = randomTop // 设置弹幕的顶部位置
  210.       barrage.startAnimation = true // 开始动画
  211.     }, randomDelay)
  212.   })
  213. }
  214.  
  215. /** ******** 获取中奖记录及轮播 begin *************/
  216. interface Record {
  217.   phone: string; // 用户的电话号码
  218.   prizeName: string; // 奖品名称
  219.   top: number; // 记录当前的顶部位置（用于动画或滚动）
  220.   defaultTop: number; // 记录的默认顶部位置（初始位置）
  221.   show: boolean; // 是否显示该记录
  222. }
  223. const recordList = ref<Array<Record>>([]) // 扭蛋中奖记录
  224. const showTop = 786 // 最上面那条广告的高度位置
  225. const showCount = 3 // 显示三条左侧广告消息
  226. const intervalId = ref() // 轮询任务的id，便于退出页面时销毁定时任务
  227. const initActivityrecord = async () => {
  228.   // 模拟中奖数据
  229.   const res = Array.from({ length: 15 }, () => ({ phone: '186****1234', prizeName: '锐星优惠券', top: 0, defaultTop: 0, show: false }))
  230.   recordList.value = res.map((item: Record, i:number) => {
  231.     const top = showTop + (60 * i - 1)
  232.     return {
  233.       ...item,
  234.       top,
  235.       defaultTop: top, // 保存初始高度，便于后面对总漂移数做判断
  236.       show: top >= showTop && top <= showTop + (60 * showCount)
  237.     }
  238.   })
  239.   // 如果总获奖记录不超过要显示的数目个，就不要轮播了
  240.   if (recordList.value.length > (showCount + 1)) {
  241.     intervalId.value = setInterval(updateRecordTop, 3000)
  242.   }
  243.   // 追加一个定时任务，每隔三秒将 recordList 里面每一项的 top 值减去60； 并且判断 在 top >= showTop && top <= showTop + (60 * showCount) 的范围内 设 show 为 true
  244.   // 由于下面有个判断 (recordList.value.length - 4)， 所以数组长度小于四的时候就不用追加动画效果了
  245.   function updateRecordTop () {
  246.     recordList.value = recordList.value.map((item: Record, index) => {
  247.       // 更新top值，减去60
  248.       let newTop = item.top - 60
  249.       // 这里做一下判断，如果轮播的高度超出了总个数，就还原高度
  250.       if ((item.defaultTop - item.top) / 60 > (recordList.value.length - 4)) {
  251.         newTop = item.defaultTop
  252.       }
  253.       // 判断新的top值是否在指定范围内，并设置show属性
  254.       const newShow = newTop >= showTop && newTop <= showTop + (60 * showCount)
  255.       return {
  256.         ...item,
  257.         top: newTop, // 更新top属性
  258.         show: newShow // 更新show属性
  259.       }
  260.     })
  261.   }
  262. }
  263.  
  264. // 离开页面时销毁定时任务
  265. onBeforeUnmount(() => {
  266.   clearInterval(intervalId.value)
  267. })
  268. /** ******** 获取中奖记录及轮播 end *************/
  269.  
  270. const balls = ref<any[]>([])
  271. const animateClass = ref(Array(11).fill(false))
  272. const initBall = () => {
  273.   // 将 balls 数组填充为 DOM 元素的引用
  274.   balls.value = Array.from({ length: 11 }, (_, i) => i + 1).map(i => uni.createSelectorQuery().select('.qiu_' + i))
  275. }
  276.  
  277. // 开始抽奖
  278. let drawLoading = false
  279. const drawType = ref(1) // 抽奖类型，1单抽 10十抽
  280. const handleGameGo = async (type: number) => {
  281.   if (drawLoading) return
  282.   drawType.value = type
  283.   drawLoading = true
  284.  
  285.   beginDrawAnimation() // 开始小球乱窜动画
  286.  
  287.   // 这里仅关闭小球乱窜动画，接着以小球掉落动画取代
  288.   setTimeout(endDrawAnimation, 1400)
  289.   setTimeout(() => {
  290.     drawLoading = false
  291.     dialogObj.show = true // 显示遮罩层
  292.   }, 2200)
  293.  
  294.   // 绘制动画
  295.   function beginDrawAnimation () {
  296.     animateClass.value = Array(11).fill(true)
  297.   }
  298.   // 结束动画
  299.   function endDrawAnimation () {
  300.     animateClass.value = Array(11).fill(false)
  301.   }
  302. }
  303.  
  304. // 弹窗对象
  305. const dialogObj = reactive({
  306.   show: false, // 是否显示弹窗
  307.   awardList: [{ prizeName: '', images: [{ narrowUrl: '' }] }] // 弹窗内容
  308. })
  309. const closeDialog = () => {
  310.   dialogObj.show = false
  311. }
  312.  
  313. // 十连弹窗的位置设置
  314. const tenMap = [
  315.   { left: '106rpx', top: '500rpx', delay: 2 },
  316.   { left: '289rpx', top: '500rpx', delay: 3 },
  317.   { left: '470rpx', top: '500rpx', delay: 4 },
  318.  
  319.   { left: '25rpx', top: '710rpx', delay: 1 },
  320.   { left: '208rpx', top: '710rpx', delay: 2 },
  321.   { left: '391rpx', top: '710rpx', delay: 3 },
  322.   { left: '574rpx', top: '710rpx', delay: 4 },
  323.  
  324.   { left: '106rpx', top: '920rpx', delay: 1 },
  325.   { left: '289rpx', top: '920rpx', delay: 2 },
  326.   { left: '470rpx', top: '920rpx', delay: 3 }
  327. ]
  328.  
  329. // 抽奖结束，再抽一次
  330. const onceAgain = () => {
  331.   closeDialog()
  332.   handleGameGo(drawType.value)
  333. }
  334.  
  335. </script>
  336.  
  337. <style lang="scss" scoped>
  338. .page {
  339.   width: 100vw;
  340.   min-height: 100vh;
  341.   overflow: hidden;
  342.   background-color: #ff0027;
  343. }
  344.  
  345. /* 弹幕平移动画 */
  346. .barrage-animation {
  347.   animation-name: moveLeft; /* 指定动画名称 */
  348.   animation-duration: 10s; /* 指定动画时长 */
  349.   animation-play-state: running; /* 控制动画播放状态 */
  350.   animation-timing-function: linear; /* 指定动画速度曲线 */
  351.   animation-iteration-count: infinite; /* 指定动画循环次数 */
  352. }
  353.  
  354. /* 这里解释一下为什么用 translate3d 而不是 translateX，主要原因是为了利用硬件加速，提高动画的性能和流畅性。尤其是iOS上浏览器在处理3D变换时通常会触发硬件加速，并且最重要的是非 translate3d 效果在ios的小程序上经常被吞（可恶的ios） */
  355. @keyframes moveLeft {
  356.   /* 这里用百分比平移变换的原因是每个弹幕的长度不一样，导致的平移的速度也会有差别，能起到更加随机的视觉效果 */
  357.   0% { transform: translate3d(100%, 0, 0) }
  358.   100% { transform: translate3d(-500%, 0, 0) }
  359. }
  360.  
  361. /* 中奖记录轮播动画 */
  362. .left-bar{
  363.   position: absolute;
  364.   left: 106rpx;
  365.   z-index: 100;
  366.   max-width: 312rpx;
  367.   padding: 8rpx 16rpx;
  368.   color: #fff;
  369.   font-size: 24rpx;
  370.   background: rgb(0 0 0 / 0.3);
  371.   border-radius: 50rpx;
  372.   transition: all 0.4s ease;
  373. }
  374. .ellipsis {
  375.   overflow: hidden;
  376.   white-space: nowrap;
  377.   text-overflow: ellipsis;
  378. }
  379.  
  380. /* 缓入动画，百搭 */
  381. .loaded{
  382.   opacity: 0;
  383.   animation: show .5s ease forwards;
  384.   @keyframes show{
  385.     from{ opacity: 0; }
  386.     to{ opacity: 1; }
  387.   }
  388. }
  389.  
  390. /**
  391.  * 三角标题动画
  392.  * 动画核心是让外侧的三角形先开始亮，极短的时间内内侧三角形再亮，造成一种箭头指向的视觉效果
  393.  */
  394.  .triangle {
  395.   position: relative;
  396.   width: 0;
  397.   height: 0;
  398.   border-color: transparent transparent #fff;
  399.   border-style: solid;
  400.   border-width: 0 16rpx 28rpx;
  401.  
  402.   &.inside  {
  403.     animation: Inside 2s infinite;
  404.     @keyframes Inside {
  405.       0% { opacity: 0.7; }
  406.       27% { opacity: 0.7; }
  407.       57% { opacity: 1; }
  408.       80% { opacity: 1; }
  409.       100% { opacity: 0.7; }
  410.     }
  411.   }
  412.  
  413.   &.outside {
  414.     animation: Outside 2s infinite;
  415.     @keyframes Outside {
  416.       0% { opacity: 0.7; }
  417.       20% { opacity: 0.7; }
  418.       50% { opacity: 1; }
  419.       80% { opacity: 1; }
  420.       100% { opacity: 0.7; }
  421.     }
  422.   }
  423. }
  424.  
  425. /**
  426.  * 商品扫描动画
  427.  * 通过渐变让一道白光一闪而过
  428.  * 一开始使用的斜向位移，后来发觉只要背景是斜的，哪怕只做一个维度的平移而形成的视觉效果也像斜向扫描，因此去掉水平渐变
  429.  */
  430.  .scan-overlay {
  431.   position: absolute;
  432.   top: -400rpx;
  433.   left: -100rpx;
  434.   width: 550rpx;
  435.   height: 550rpx;
  436.   background: linear-gradient(
  437.     to right top,
  438.     transparent 0%,
  439.     transparent 40%, /* 开始渐变前的透明区域 */
  440.     rgb(255 255 255 / 0.1) 50%, /* 渐变开始，较低的透明度 */
  441.     rgb(255 255 255 / 0.6) 60%, /* 渐变中间，较高的透明度 */
  442.     rgb(255 255 255 / 0.1) 70%, /* 渐变结束，较低的透明度 */
  443.     transparent 80%, /* 结束渐变后的透明区域 */
  444.     transparent 100%
  445.   );
  446.  
  447.   /* 设置足够长的时间让效果看起来是轮次执行的感觉 */
  448.   animation: scan 6s 0.6s linear infinite;
  449.  
  450.   /* 下面这个关键帧的时间不要改广了，不然像是乱窜 */
  451.   @keyframes scan{
  452.     0%{ top: 600rpx; }
  453.     10%{ top: -400rpx; }
  454.     100%{ top: -400rpx; }
  455.   }
  456. }
  457.  
  458. // 给商品名称一个扫描同步的闪动动画
  459. .flicker{
  460.   opacity: 0.8;
  461.  
  462.   // 注意如果要改这里的时间，上面扫描的时间最好也要同步更改
  463.   animation: flicker 6s 1s linear infinite;
  464.   @keyframes flicker{
  465.     0%{ opacity: 0.8; }
  466.     14%{ opacity: 0.8; }
  467.     20%{ opacity: 1; }
  468.     36%{ opacity: 1; }
  469.     42%{ opacity: 0.8; }
  470.     100%{ opacity: 0.8 }
  471.   }
  472. }
  473.  
  474. // 十连扫光动画
  475. .scan-overlay-ten {
  476.   position: absolute;
  477.   top: 200rpx;
  478.   left: -70rpx;
  479.   width: 300rpx;
  480.   height: 330rpx;
  481.   background: linear-gradient(
  482.     to right top,
  483.     transparent 0%,
  484.     transparent 40%, /* 开始渐变前的透明区域 */
  485.     rgb(255 255 255 / 0.1) 50%, /* 渐变开始，较低的透明度 */
  486.     rgb(255 255 255 / 0.6) 60%, /* 渐变中间，较高的透明度 */
  487.     rgb(255 255 255 / 0.1) 70%, /* 渐变结束，较低的透明度 */
  488.     transparent 80%, /* 结束渐变后的透明区域 */
  489.     transparent 100%
  490.   );
  491.  
  492.   /* 设置足够长的时间让效果看起来是轮次执行的感觉 */
  493.   animation: scan-ten 6s linear infinite;
  494.  
  495.   /* 下面这个关键帧的时间不要改广了，不然像是乱窜 */
  496.   @keyframes scan-ten{
  497.     0%{ top: 200rpx; }
  498.     15%{ top: -300rpx; }
  499.     100%{ top: -300rpx; }
  500.   }
  501. }
  502.  
  503. /* 十连扭蛋的奖品 */
  504. .toy-box{
  505.   left: 22rpx;
  506.   top: 4rpx;
  507.   width: 136rpx;
  508.   height: 136rpx;
  509.   border-radius: 200rpx;
  510.   overflow: hidden;
  511. }
  512. .toy{
  513.   position: relative;
  514.   perspective: 1000px;
  515.   transform: rotateY(180deg);
  516.   animation: flipAnimation 1s 1s forwards; /* 动画名称，持续时间，延迟时间，填充模式 */
  517.  
  518.   .front, .back {
  519.     position: absolute;
  520.     width: 100%;
  521.     height: 100%;
  522.   }
  523.  
  524.   .front image, .back image {
  525.     width: 100%;
  526.     height: 100%;
  527.   }
  528.  
  529.   /* 小程序中大部分机型不支持 backface-visibility: hidden，所以这使用opacity来控制显隐 */
  530.   .front {
  531.     opacity: 0;
  532.     animation: o-1 1s 1s forwards;
  533.     @keyframes o-1 {
  534.       from {opacity: 0;}
  535.       to { opacity: 1; }
  536.     }
  537.   }
  538.   .back {
  539.     animation: o-0 1s 1s forwards;
  540.  
  541.     /* transform: rotateY(360deg); */
  542.     @keyframes o-0 {
  543.       from {opacity: 1;}
  544.       to { opacity: 0; }
  545.     }
  546.   }
  547.  
  548.   @keyframes flipAnimation {
  549.     from {transform: rotateY(180deg);}
  550.     to {transform: rotateY(360deg);}
  551.   }
  552. }
  553.  
  554. /* 以下都是扭蛋机相关的动画 */
  555. .lottery-box .lottery-box-content{
  556.   position: absolute;
  557.   top: 390rpx;
  558.   left: 92rpx;
  559.   z-index: 99;
  560.   width: 566rpx;
  561.   height: 680rpx;
  562.   overflow: hidden;
  563.  
  564.   .qiu {
  565.     position: absolute;
  566.     display: block;
  567.     width: 100rpx;
  568.     height: 100rpx;
  569.   }
  570.  
  571.   /* 各个球的定位 */
  572.   .qiu_0 { top: 483rpx; left: 430rpx; }
  573.   .qiu_1 { top: 384rpx; left: 32rpx; }
  574.   .qiu_2 { top: 482rpx; left: 23rpx; }
  575.   .qiu_3 { top: 580rpx; left: 10rpx; }
  576.   .qiu_4 { top: 438rpx; left: 115rpx; }
  577.   .qiu_5 { top: 500rpx; left: 186rpx; }
  578.   .qiu_6 { top: 542rpx; left: 100rpx; }
  579.   .qiu_7 { top: 458rpx; left: 278rpx; }
  580.   .qiu_8 { top: 580rpx; left: 248rpx; }
  581.   .qiu_9 { top: 577rpx; left: 462rpx; }
  582.   .qiu_10 { top: 537rpx; left: 340rpx; }
  583.   .qiu_11 { top: 480rpx; left: 333rpx; }
  584.  
  585.   .diaol_0{animation:dropOut 1s linear 1.4s backwards;}
  586.   .diaol_0::after{animation-delay:1.3s;}
  587.   .diaol_1{animation:dropOut 1s linear 0.9s backwards;}
  588.   .diaol_1::after{animation-delay:0.8s;}
  589.   .diaol_2{animation:dropOut 1s linear 0.6s backwards;}
  590.   .diaol_2::after{animation-delay:0.5s;}
  591.   .diaol_3{animation:dropOut 1s linear  backwards;}
  592.   .diaol_4{animation:dropOut 1s linear 1.1s backwards;}
  593.   .diaol_4::after{animation-delay:1s;}
  594.   .diaol_5{animation:dropOut 1s linear 0.8s backwards;}
  595.   .diaol_5::after{animation-delay:0.7s;}
  596.   .diaol_6{animation:dropOut 1s linear 0.4s backwards;}
  597.   .diaol_6::after{animation-delay:0.3s;}
  598.   .diaol_7{animation:dropOut 1s linear 0.9s backwards;}
  599.   .diaol_7::after{animation-delay:0.8s;}
  600.   .diaol_8{animation:dropOut 1s linear 0.6s backwards;}
  601.   .diaol_8::after{animation-delay:0.5s;}
  602.   .diaol_9{animation:dropOut 1s linear 1.1s backwards;}
  603.   .diaol_9::after{animation-delay:1s;}
  604.   .diaol_10{animation:dropOut 1s linear 0.2s backwards;}
  605.   .diaol_11{animation:dropOut 1s linear 1.4s backwards;}
  606.   .diaol_11::after{animation-delay:1.3s;}
  607.  
  608.   @keyframes dropOut {
  609.     0% { transform: translateY(-200%); opacity: 0; }
  610.     5% { transform: translateY(-200%); }
  611.     15% { transform: translateY(0); }
  612.     30% { transform: translateY(-100%); }
  613.     40% { transform: translateY(0%); }
  614.     50% { transform: translateY(-60%); }
  615.     70% { transform: translateY(0%); }
  616.     80% { transform: translateY(-30%); }
  617.     90% { transform: translateY(0%); }
  618.     95% { transform: translateY(-14%); }
  619.     97% { transform: translateY(0%); }
  620.     99% { transform: translateY(-6%); }
  621.     100% { transform: translateY(0); opacity: 1; }
  622.   }
  623.  
  624.   .run_0 {animation:around0  1.5s linear  infinite;}
  625.   .run_1 {animation:around1  1.5s linear  infinite;}
  626.   .run_2 {animation:around2  1.5s linear  infinite;}
  627.   .run_3 {animation:around3  1.5s linear  infinite;}
  628.   .run_4 {animation:around4  1.5s linear  infinite;}
  629.   .run_5 {animation:around5  1.5s linear  infinite;}
  630.   .run_6 {animation:around6  1.5s linear  infinite;}
  631.   .run_7 {animation:around7  1.5s linear  infinite;}
  632.   .run_8 {animation:around8  1.5s linear  infinite;}
  633.   .run_9 {animation:around9  1.5s linear  infinite;}
  634.   .run_10{animation:around10 1.5s linear  infinite;}
  635.   .run_11{animation:around11 1.5s linear  infinite;}
  636.  
  637.   /* 移动范围 left 0-464 ;  top 0-536 */
  638.   /* 这里解释一下为什么小球变换要用定位而不是更省性能transform: 因为部分机型对transform支持性不好,会被过滤掉(比如ios上transform2d不生效,1加ace2对transform单项变换不生效)因此这种关键动画使用定位来执行 */
  639.   @keyframes around0 {
  640.     0%    { top: 483rpx; left: 430rpx; }
  641.     20%   {   top: 536rpx; left: 0rpx; }
  642.     40%   { top: 0rpx; left: 464rpx;   }
  643.     60%   {   top: 200rpx; left: 0rpx; }
  644.     80%   { top: 3rpx; left: 303rpx;   }
  645.     100%  { top: 483rpx; left: 430rpx; }
  646.   }
  647.   @keyframes around1 {
  648.     0%    {  top: 384rpx; left: 32rpx; }
  649.     16%   { top: 200rpx; left: 450rpx; }
  650.     32%   {   top: 24rpx; left: 8rpx;  }
  651.     48%   { top: 500rpx; left: 106rpx; }
  652.     64%   {   top: 6rpx; left: 0rpx;   }
  653.     82%   { top: 180rpx; left: 464rpx; }
  654.     100%  {  top: 384rpx; left: 32rpx; }
  655.   }
  656.  
  657.   @keyframes around2 {
  658.     0%    {  top: 482rpx; left: 23rpx; }
  659.     20%   { top: 64rpx; left: 448rpx;   }
  660.     40%   {  top: 520rpx; left: 16rpx;  }
  661.     60%   { top: 208rpx; left: 432rpx;  }
  662.     80%   {  top: 8rpx; left: 80rpx;    }
  663.     100%  {  top: 482rpx; left: 23rpx;  }
  664.   }
  665.  
  666.   @keyframes around3 {
  667.     0%    {  top: 580rpx; left: 10rpx; }
  668.     20%   { top: 100rpx; left: 300rpx;  }
  669.     40%   {  top: 20rpx; left: 10rpx;   }
  670.     60%   { top: 400rpx; left: 460rpx;  }
  671.     80%   { top: 68rpx; left: 220rpx;   }
  672.     100%  {  top: 580rpx; left: 10rpx;  }
  673.   }
  674.  
  675.   @keyframes around4 {
  676.     0%    { top: 438rpx; left: 115rpx; }
  677.     16%   { top: 10rpx; left: 300rpx;  }
  678.     32%   {  top: 530rpx; left: 30rpx;  }
  679.     48%   { top: 200rpx; left: 450rpx;  }
  680.     64%   {  top: 300rpx; left: 20rpx;  }
  681.     82%   { top: 560rpx; left: 450rpx;  }
  682.     100%  { top: 438rpx; left: 115rpx;  }
  683.   }
  684.  
  685.   @keyframes around5 {
  686.     0%    { top: 500rpx; left: 186rpx; }
  687.     20%   {  top: 200rpx; left: 50rpx;  }
  688.     40%   { top: 350rpx; left: 400rpx;  }
  689.     60%   { top: 530rpx; left: 100rpx;  }
  690.     80%   { top: 100rpx; left: 380rpx;  }
  691.     100%  { top: 500rpx; left: 186rpx;  }
  692.   }
  693.  
  694.   @keyframes around6 {
  695.     0%    {  top: 542rpx; left: 100rpx; }
  696.     15%   {  top: 300rpx; left: 300rpx;  }
  697.     30%   {  top: 100rpx; left: 100rpx;  }
  698.     45%   {  top: 200rpx; left: 400rpx;  }
  699.     60%   {  top: 400rpx; left: 200rpx;  }
  700.     75%   {  top: 100rpx; left: 450rpx;  }
  701.     100%  {  top: 542rpx; left: 100rpx;  }
  702.   }
  703.  
  704.   @keyframes around7 {
  705.     0%    {  top: 458rpx; left: 278rpx; }
  706.     15%   {   top: 200rpx; left: 50rpx;  }
  707.     35%   {  top: 150rpx; left: 450rpx;  }
  708.     55%   {   top: 520rpx; left: 50rpx;  }
  709.     75%   {  top: 250rpx; left: 450rpx;  }
  710.     90%   {   top: 530rpx; left: 20rpx;  }
  711.     100%  {  top: 458rpx; left: 278rpx;  }
  712.   }
  713.  
  714.   @keyframes around8 {
  715.     0%    {  top: 580rpx; left: 248rpx;  }
  716.     20%   {   top: 350rpx; left: 50rpx;  }
  717.     40%   {  top: 10rpx; left: 460rpx;   }
  718.     60%   {  top: 536rpx; left: 460rpx;  }
  719.     80%   {  top: 20rpx; left: 380rpx;   }
  720.     100%  {  top: 580rpx; left: 248rpx;  }
  721.   }
  722.  
  723.   @keyframes around9 {
  724.     0%    {  top: 577rpx; left: 462rpx; }
  725.     12.5% {  top: 400rpx; left: 300rpx;  }
  726.     25%   {  top: 450rpx; left: 500rpx;  }
  727.     37.5% {  top: 350rpx; left: 200rpx;  }
  728.     50%   {  top: 250rpx; left: 450rpx;  }
  729.     62.5% {  top: 400rpx; left: 150rpx;  }
  730.     75%   {  top: 150rpx; left: 350rpx;  }
  731.     87.5% {  top: 500rpx; left: 250rpx;  }
  732.     100%  {  top: 577rpx; left: 462rpx;  }
  733.   }
  734.  
  735.   @keyframes around10 {
  736.     0%    {  top: 537rpx; left: 340rpx;  }
  737.     15%   {  top: 400rpx; left: 150rpx;  }
  738.     30%   {  top: 350rpx; left: 450rpx;  }
  739.     50%   {   top: 50rpx; left: 50rpx;   }
  740.     70%   {  top: 450rpx; left: 400rpx;  }
  741.     85%   {  top: 550rpx; left: 120rpx;  }
  742.     100%  {  top: 537rpx; left: 340rpx;  }
  743.   }
  744.  
  745.   @keyframes around11 {
  746.     0%   { top: 480rpx; left: 333rpx; }
  747.     16%  { top: 350rpx; left: 464rpx; }
  748.     33%  { top: 400rpx; left: 200rpx; }
  749.     50%  { top: 200rpx; left: 400rpx; }
  750.     66%  { top: 300rpx; left: 100rpx; }
  751.     83%  { top: 100rpx; left: 300rpx; }
  752.     100% { top: 480rpx; left: 333rpx; }
  753.   }
  754.  
  755.   .ball_0{
  756.     background-image: url('https://gitee.com/jingkunxu/img/raw/master/note/blog/ball0.png');
  757.     background-repeat: no-repeat;
  758.     background-size: 100%;
  759.   }
  760.  
  761.   .ball_1{
  762.     background-image: url('https://gitee.com/jingkunxu/img/raw/master/note/blog/ball1.png');
  763.     background-repeat: no-repeat;
  764.     background-size: 100%;
  765.   }
  766.  
  767.   .ball_2{
  768.     background-image: url('https://gitee.com/jingkunxu/img/raw/master/note/blog/ball2.png');
  769.     background-repeat: no-repeat;
  770.     background-size: 100%;
  771.   }
  772.  
  773.   .ball_3{
  774.     background-image: url('https://gitee.com/jingkunxu/img/raw/master/note/blog/ball3.png');
  775.     background-repeat: no-repeat;
  776.     background-size: 100%;
  777.   }
  778. }
  779.  
  780. </style>

本文内容由网友自发贡献，转载请注明出处：https://www.wpsshop.cn/w/我家小花儿/article/detail/382640
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号