JS如何實現(xiàn)紅包兔子雨效果

本篇內(nèi)容介紹了“JS如何實現(xiàn)紅包兔子雨效果”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠?qū)W有所成！

思考與實現(xiàn)

首先，思考一下最終的展示效果：在屏幕上會有很多隨機下落的兔子（紅包），點擊兔子彈出一個詳情彈窗，會獲得一定的現(xiàn)金或?qū)嵨铼剟睢．斎?，獲得的紅包可能是一定金額，也可能是“謝謝參與”或者其他。類似的有支付寶的集五?；顒印⑽浵伾值葓鼍?。接著，考慮如何實現(xiàn)這個場景。

紅包下落效果

我們先設計一個簡單的紅包效果：

這里對于紅包，使用的是絕對定位，并使用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;
}

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

思考了很久，后來想到可以借助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變量來維護。交互開始時，觸發(fā) init 函數(shù)，每間隔 500ms 生成一個紅包。當超出規(guī)定的數(shù)量(bagsNum，這里設置為20)后，停止生成紅包。

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

兔子雨效果

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

拓展

設置中獎概率

這里我們可以設置中獎概率為75%。當隨機數(shù)大于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如何實現(xiàn)紅包兔子雨效果”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關的知識可以關注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實用文章！