隨機生成小球（萬家燈火的感覺）

事發年前（新冠之前），拿到一張psd，全部靜態，老闆說想讓他動起來，在我們這種老闆喫死技術的小公司只能自己想辦法，你想要ui，no我們只有美工哈哈哈，獨立自強的我瞬間想到transition、enter、leave、cubic-bezier之類的，搞搞搞。

 

結果領導很滿意，唰~唰~唰~很不錯，這裏就不展開說

正題來了，首頁老闆說想要萬家燈火的感覺，我記得之前我看到過一個類似的動效，憑着我模糊的記憶，好，我給你萬家燈火的感覺~

美工給我的大概是這樣

結果大概是這樣 

js

 

/**
   * 1 定義三組數據，大中小三個球
   * 2 定義不超過屏幕的隨機數，初始化小球的位置,使用絕對定位
   * 3 每隔一秒，屏幕隨機出現十個隨機小球
   * 4 減小小球的top改變小球的位置使其向上移動
   * 5 小球的速度與球的大小有關，越大越慢
   */
var domList = [
  {
    style: 'width: 3px;height: 3px;border-radius: 3px;z-index: 99999;display:block;background-color:rgba(255,255,255,.7);position: fixed',
    speed: 1.5
  },
  {
    style: 'width: 2px;height: 2px;z-index: 99999;display:block;background-color:rgba(255,255,255,.7);position: fixed',
    speed: 3
  },
  {
    style: 'width: 1px;height: 1px;z-index: 99999;display:block;background-color:rgba(255,255,255,.7);position: fixed',
    speed: 5
  }
]
var fullScreenAnimate = {
  /**
   * 製作小球
   */
  makeDom () {
    let index = Math.ceil(Math.random() * 3) - 1 // 小球索引，取出三個小球中的一個（不要直接x2，0的機率會很小）
    let x = Math.ceil(Math.random() * 100) // 小球x軸位置
    let y = this.randomNum(20, 100) // 小球y軸位置
    // let style = `${domList[index - 1].style};left:${x}vw;top:${y}vh;transition:top ${y / domList[index - 1].speed}s`
    let style = `${domList[index].style};left:${x}vw;top:${y}vh;animation: fullScreenAnimate ${y / domList[index].speed}s linear infinite`
    return style
  },
  init () {
    let arr = []
    for (let i = 0; i < 160; i++) {
      arr.push(
        {
          style: this.makeDom()
        }
      )
    }
    return arr
  },
  // 生成從minNum到maxNum的隨機數
  randomNum (minNum, maxNum) {
    switch (arguments.length) {
      case 1:
        return parseInt(Math.random() * minNum + 1, 10)
        break
      case 2:
        return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10)
        break
      default:
        return 0
        break
    }
  }
}
export default fullScreenAnimate

調用init方法會給到一個dom列表，v-for就可以了

css

@keyframes fullScreenAnimate {
  100% {
    top: 0;
  }
}

@-webkit-keyframes fullScreenAnimate /* Safari 與 Chrome */ {
  100% {
    top: 0;
  }
}