Vue2 CSS3 Animation实现红包雨兔子雨交互效果教程

前言

时光飞逝，2022年已悄然离去，2023年也过去了半个月。近期「兔了个兔」活动火热进行，由于本周工作繁忙，未能及时参与。

出于一时兴致，花费一晚时间开发了一个兔年主题的红包雨（或兔子雨）特效。

展示效果

技术栈

Vue2
SCSS：用于实现红包雨（兔子雨）下落及按钮交互等样式效果。

思考与实现

首先明确最终展示效果：屏幕上随机下落多个兔子或红包，点击后弹出详情窗口，用户可获得现金或实物奖励。奖励内容可能是具体金额，也可能是“谢谢参与”等提示，类似支付宝集五福或蚂蚁森林的活动场景。

接下来探讨具体的实现方案。

红包下落效果

首先设计基础的红包样式：

红包元素采用绝对定位，并通过background属性设置渐变色背景。

<div class="bag"></div>
.bag{
  width: 30px;
  height: 50px;
  background: linear-gradient(to bottom, #ff6a00, #ee0979);
  position: absolute;
  top: 0;
  left: 0;
  user-select: none;
  cursor: pointer;
}

若使用定时器不断增加top值以实现下落，当红包数量增多时，需操作的DOM元素过多，且每个红包独立定时器效率低下且不优雅。

经过思考，改用CSS动画实现。初始top值为0，动画结束时为100vh（移出屏幕）。借助CSS3 animation-fill-mode 属性，这里取值是：animation-fill-mode:forwards;。最终红包刚好停留在屏幕下方（视野不可见）。

.bag{
  animation: downBags 3s forwards linear;
}
// 红包的下落动画
@keyframes downBags {
  0% {
    top: 0;
  }
  100% {
    top: 100vh;
  }
}

生成红包雨

这里借助Vue2来渲染和操作DOM。红包雨使用bags变量来维护。交互开始时，触发 init 函数，每间隔 500ms 生成一个红包。当超出规定的数量(bagsNum，这里设置为20)后，停止生成红包。

Vue是操作DOM的利器！这里我们不需要手动创建DOM元素：var el = document.createElement('div'); 然后再添加CSS样式。我们通过操作bags数组，每生成一个红包就添加一个元素，并设置该元素对应的属性，比如top, left, money等等即可。是不是简单了许多?

init() {
  let count = 0
  let countT = setInterval(() => {
    if (count >= this.bagsNum) {
      clearInterval(countT)
      this.gameover = true
      return
    }
    this.createBag(count)
    count++
  }, 500);
},
createBag(i) {
  let ran = Math.random()
  let money = Math.floor(ran * 1001)
  let desc = ''
  if (ran > this.prizeRatio) {
    money = 0
    desc = '谢谢参与！'
  }
  let deg = 0
  if (this.isRabbitBG) {
    deg = Math.floor(ran * 30)
    if (ran > 0.5) {
      deg *= -1
    }
  }
  let param = {
    index: i,
    money,
    desc,
    from: '掘金',
    top: 0,
    left: `${Math.floor(Math.random() * this.maxW)}vw`,
    deg,
    show: true,
  }
  this.bags.push(param)
},

至此，简单的红包雨效果已实现。

打开红包效果

样式和交互比较简单，点击按钮后，我们给按钮添加rotate样式，借助CSS动画去实现交互效果。这里就不赘述了。

.rotate{
  animation: rotateAni linear .3s infinite;
}
@keyframes rotateAni {
  from{
    transform:rotateY(180deg);
  }
  to{
    transform:rotateY(360deg);
  }
}

兔子雨效果

兔年到来，尝试制作“兔子雨”。将红包替换为兔子图片，为使效果更优雅，给兔子图片随机设置一定旋转角度（±30°之间）。

.bagRabbitBG{
  width: 70px;
  background: url(https://clemmensen.top/static/rabbit1.png) center / cover no-repeat;
}
createBag(i) {
  let ran = Math.random()
  // ...
  let deg = 0
  if (this.isRabbitBG) {
    deg = Math.floor(ran * 30)
    if (ran > 0.5) {
      deg *= -1
    }
  }
  // ...
}

实际效果如下：

拓展

设置中奖概率

这里我们可以设置中奖概率为75%。当随机数大于0.75时，中奖金额市值为0，文案设置为"谢谢参与！"。

createBag(i) {
  let ran = Math.random()
  let money = Math.floor(ran * 1001)
  let desc = ''
  if (ran > this.prizeRatio) {
    money = 0
    desc = '谢谢参与！'
  }
  // ...
}

后记

近日工作繁忙，趁今日有空，参与了「兔了个兔」活动。

总体而言，从构思到动手实现“兔子雨”的过程十分有趣。在此预祝各位掘友兔年快乐，前兔似锦！

以上就是JS技巧动手实现红包兔子雨效果示例详解的详细内容，更多关于JS 实现红包兔子雨效果的资料请关注本站其它相关文章！

Vue2实现红包雨与兔子雨动画效果详解

前言