JS技巧動手實現(xiàn)紅包兔子雨效果示例詳解

更新時間：2023年01月16日 16:03:45 作者：覓跡

這篇文章主要為大家介紹了JS技巧動手實現(xiàn)紅包兔子雨效果示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

前言

人生天地之間，若白駒過隙，忽然而已。不知不覺中，2022年已然逝去，2023年也過去了半個月了。看到「兔了個兔」這個活動幾天了，不過這周比較忙，沒時間參與。

心血來潮，搗鼓了一晚上，實現(xiàn)一個兔年的紅包雨（兔子雨）效果~ ??

展示效果

技術(shù)棧

Vue2
SCSS：實現(xiàn)紅包雨（兔子雨）效果、按鈕交互效果等。

思考與實現(xiàn)

首先，思考一下最終的展示效果：在屏幕上會有很多隨機(jī)下落的兔子（紅包），點擊兔子彈出一個詳情彈窗，會獲得一定的現(xiàn)金或?qū)嵨铼剟?。?dāng)然，獲得的紅包可能是一定金額，也可能是“謝謝參與”或者其他。類似的有支付寶的集五?；顒?、螞蟻森林等場景。

接著，考慮如何實現(xiàn)這個場景。

紅包下落效果

我們先設(shè)計一個簡單的紅包效果：

這里對于紅包，使用的是絕對定位，并使用background屬性設(shè)置漸變色。

<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;
}

為了實現(xiàn)下落效果，我們可以使用定時器不斷增加top屬性的值，直到超出屏幕為止。然而，當(dāng)紅包數(shù)量越來越多時，我們需要操作的DOM元素太多了，而且每個紅包都加上一個定時器，并不優(yōu)雅！！

思考了很久，后來想到可以借助CSS動畫去實現(xiàn)！也就是，初始位置的top值是0，動畫結(jié)束時是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變量來維護(hù)。交互開始時，觸發(fā) init 函數(shù)，每間隔 500ms 生成一個紅包。當(dāng)超出規(guī)定的數(shù)量(bagsNum，這里設(shè)置為20)后，停止生成紅包。

Vue是操作DOM的利器！這里我們不需要手動創(chuàng)建DOM元素：var el = document.createElement('div'); 然后再添加CSS樣式。我們通過操作bags數(shù)組，每生成一個紅包就添加一個元素，并設(shè)置該元素對應(yīng)的屬性，比如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)
},

到這里，簡單的紅包雨效果實現(xiàn)了。

打開紅包效果

樣式和交互比較簡單，點擊按鈕后，我們給按鈕添加rotate樣式，借助CSS動畫去實現(xiàn)交互效果。這里就不贅述了。

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

兔子雨效果

兔年到了，當(dāng)然要嘗試下“兔子雨”了... 這里我們把紅包換成兔子，為了使得“兔子雨”效果看上去更優(yōu)雅一些，我們給兔子圖片隨機(jī)設(shè)置了一定的旋轉(zhuǎn)角度（±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
    }
  }
  // ...
}

實際效果如下：

拓展

設(shè)置中獎概率

這里我們可以設(shè)置中獎概率為75%。當(dāng)隨機(jī)數(shù)大于0.75時，中獎金額市值為0，文案設(shè)置為"謝謝參與！"。

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