冬天到了,女朋友想讓我的網站也下雪,我立馬打開電腦擼代碼…

2021-02-20 JAVA

雪我們可以使用span標籤和css的徑向漸變簡單意思一下:

.snow {
  display: block;
  width: 100px;
  height: 100px;
  background-image: radial-gradient(#fff 0%, rgba(255, 255, 255, 0) 60%);
  border-radius: 50%;
}
複製代碼


效果如下:



很多雪

一片雪是不夠的,成千上萬才浪漫,世界上沒有兩片相同的雪花,所以每片雪都有自己的大小位置速度等屬性,為此先創建一個雪花類:


class Snow {
  constructor (opt = {}) {
    // 元素
    this.el = null
    // 直徑
    this.width = 0
    // 最大直徑
    this.maxWidth = opt.maxWidth || 80
    // 最小直徑
    this.minWidth = opt.minWidth || 2
    // 透明度
    this.opacity = 0
    // 水平位置
    this.x = 0
    // 重置位置
    this.y = 0
    // 速度
    this.speed = 0
    // 最大速度
    this.maxSpeed = opt.maxSpeed || 4
    // 最小速度
    this.minSpeed = opt.minSpeed || 1
    // 瀏覽器窗口尺寸
    this.windowWidth = window.innerWidth
    this.windowHeight = window.innerHeight
    
    this.init()
  }

  // 初始化各種屬性
  init () {
    this.width = Math.floor(Math.random() * this.maxWidth + this.minWidth)
    this.opacity = Math.random()
    this.x = Math.floor(Math.random() * (this.windowWidth - this.width))
    this.y = Math.floor(Math.random() * (this.windowHeight - this.width))
    this.speed = Math.random() * this.maxSpeed + this.minSpeed
  }

  // 設置樣式
  setStyle () {
    this.el.style.cssText = `
      position: fixed;
      left: 0;
      top: 0;
      display: block;
      width: ${this.width}px;
      height: ${this.width}px;
      opacity: ${this.opacity};
      background-image: radial-gradient(#fff 0%, rgba(255, 255, 255, 0) 60%);
      border-radius: 50%;
      z-index: 9999999999999;
      pointer-events: none;
      transform: translate(${this.x}px, ${this.y}px);
    `
  }

  // 渲染
  render () {
    this.el = document.createElement('div')
    this.setStyle()
    document.body.appendChild(this.el)
  }
}
複製代碼


init方法用來生成隨機的初始大小、位置、速度等屬性,在瀏覽器窗口內new100片試試:


let snowList = []
for (let i = 0; i < 100; i++) {
    let snow = new Snow()
    snow.render()
    snowList.push(snow)
}
複製代碼


效果如下:


動起來

雪動起來才能叫下雪,動起來很簡單,不斷改變x和y坐標就可以了,給snow類加個運動的方法:


class snow {
    move () {
        this.x += this.speed
        this.y += this.speed
        this.el.style.left = this.x + 'px'
        this.el.style.top = this.y + 'px'
    }
}
複製代碼


接下來使用requestAnimationFrame不斷刷新:


moveSnow () {
    window.requestAnimationFrame(() => {
        snowList.forEach((item) => {
            item.move()
        })
        moveSnow()
    })
}
複製代碼


效果如下,因為速度是正數,所以整體是往右斜的:



可以看到動起來了,但是出屏幕就不見了,所以雪是會消失的對嗎?


要讓雪不停很簡單,檢測雪的位置,如果超出屏幕了就讓它回到頂部,修改一下move方法:


move () {
    this.x += this.speed
    this.y += this.speed
    // 完全離開窗口就調一下初始化方法,另外還需要修改一下init方法,因為重新出現我們是希望它的y坐標為0或者小於0,這樣就不會又憑空出現的感覺,而是從天上下來的
    if (this.x < -this.width || this.x > this.windowWidth || this.y > this.windowHeight) {
      this.init(true)
      this.setStyle()
    }
    this.el.style.left = this.x + 'px'
    this.el.style.top = this.y + 'px'
  }
複製代碼

init (reset) {
    // ...
    this.width = Math.floor(Math.random() * this.maxWidth + this.minWidth)
    this.y = reset ? -this.width : Math.floor(Math.random() * this.windowHeight)
    // ...
  }
複製代碼


這樣就能源源不斷的下雪了:



優化1.水平速度

水平和垂直方向的速度是一樣的,但是看起來有點太斜了,所以調整一下,把水平速度和垂直速度區分開來:


class Snow {
  constructor (opt = {}) {
    // ...
    // 水平速度
    this.sx = 0
    // 垂直速度
    this.sy = 0
  // ...
  }
  
  init (reset) {
    // ...
    this.sy = Math.random() * this.maxSpeed + this.minSpeed
    this.sx = this.sy * Math.random()
  }
  
  move () {
    this.x += this.sx
    this.y += this.sy
    // ...
  }
}
複製代碼


2.左下角沒有雪

因為整體向右傾斜,所以左下角大概率沒有雪,這可以通過讓雪隨機出現在左側來解決:


init (reset) {
  // ...
  this.x = Math.floor(Math.random() * (this.windowWidth - this.width))
  this.y = Math.floor(Math.random() * (this.windowHeight - this.width))
  if (reset && Math.random() > 0.8) {// 讓一小部分的雪初始化在左側
    this.x = -this.width
  } else if (reset) {
    this.y = -this.width
  }
  // ...
}
複製代碼

3.眼前的雪

隨機性的選擇一點雪給它較大的體積、透明度和速度,然後再使用css3的3D透視效果,把它的z軸數值調大一點,這樣的感覺就好像是在眼前划過的一樣:


<body style="perspective: 500;-webkit-perspective: 500"></body>
複製代碼

class Snow {
  constructor (opt = {}) {
    // ...
    // z軸數值
    this.z = 0
    // 快速划過的最大速度
    this.quickMaxSpeed = opt.quickMaxSpeed || 10
    // 快速划過的最小速度
    this.quickMinSpeed = opt.quickMinSpeed || 8
    // 快速划過的寬度
    this.quickWidth = opt.quickWidth || 80
    // 快速划過的透明度
    this.quickOpacity = opt.quickOpacity || 0.2
    // ...
  }
  
  init (reset) {
    let isQuick = Math.random() > 0.8
    this.width = isQuick ? this.quickWidth : Math.floor(Math.random() * this.maxWidth + this.minWidth)
    this.z = isQuick ? Math.random() * 300 + 200 : 0
    this.opacity = isQuick ? this.quickOpacity : Math.random()
    // ...
    this.sy = isQuick ? Math.random() * this.quickMaxSpeed + this.quickMinSpeed : Math.random() * this.maxSpeed + this.minSpeed
    // ...
  }
  
  move () {
    // ...
    this.el.style.transform = `translate3d(${this.x}px, ${this.y}px, ${this.z}px)`
  }
}
複製代碼


4.鵝毛大雪

雪花嘛,輕如鵝毛,鵝毛是怎麼飄的?是不是左右擺動的飄?那我們也可以選擇一部分的雪花讓它跟鵝毛一樣飄,左右搖擺很簡單,速度一會加一會減就可以了:


class Snow {
  constructor (opt = {}) {
    // ...
    // 是否左右搖擺
    this.isSwing = false
    // 左右搖擺的步長
    this.stepSx = 0.03
    // ...
  }

  // 隨機初始化屬性
  init (reset) {
    // ...
    this.isSwing = Math.random() > 0.8
    // ...
  }

  move () {
    if (this.isSwing) {
      if (this.sx >= 1 || this.sx <= -1) {
        this.stepSx = -this.stepSx
      }
      this.sx += this.stepSx
    }
    // ...
  }
}
複製代碼


除了上述這種方法,左右搖擺還有一種方式,就是使用正弦或餘弦函數,因為它們的曲線翻轉90度就是左右搖擺:


img

我們使用正弦函數,公式為:y=sin(x),x的值是弧度表示,只要一直增加就可以了,y的值用來修改雪花的水平方向的速度變化步長:


class Snow {
  constructor (opt = {}) {
    // ...
    // 是否左右搖擺
    this.isSwing = false
    // 左右搖擺的正弦函數x變量
    this.swingRadian = 0
    // 左右搖擺的正弦x步長
    this.swingStep = 0.01
    // ...
  }

  init (reset) {
    // ...
    this.swingStep = 0.01 * Math.random()
  }

  move () {
    if (this.isSwing) {
      this.swingRadian += this.swingStep
      this.x += this.sx * Math.sin(this.swingRadian * Math.PI) * 0.2
    } else {
      this.x += this.sx
    }
    // ...
  }
}
複製代碼


因為正弦函數y的值是從1變化到-1,擺動幅度太了,所以乘了個小數0.2縮小一點,想要幅度小一點,還有一個方法是不要使用整個正弦曲線,可以從中截取一個適合的區間大小,比如就讓x的值在0.9π到1.1π之前變化:


class Snow {
  constructor (opt = {}) {
    // ...
    // 是否左右搖擺
    this.isSwing = false
    // 左右搖擺的正弦函數x變量
    this.swingRadian = 1// 需要改成一個中間值
    // 左右搖擺的正弦x步長
    this.swingStep = 0.01
    // ...
  }

  init (reset) {
    // ...
    this.swingStep = 0.01 * Math.random()
    this.swingRadian = Math.random() * (1.1 - 0.9) + 0.9// 也讓它隨機一下
  }

  move () {
    if (this.isSwing) {
      if (this.swingRadian > 1.1 || this.swingRadian < 0.9) {
        this.swingStep = -this.swingStep
      }
      this.swingRadian += this.swingStep
      this.x += this.sx * Math.sin(this.swingRadian * Math.PI)
    } else {
      this.x += this.sx
    }
    // ...
  }
}
複製代碼

5.下的慢一點

既然給水平加了曲線,垂直方向上是不是也可以改成非勻速呢?


當然可以,區別是速度得一直是正的,不然就要出現反自然現象了,改變速度曲線同樣可以使用正餘弦,上面我們使用了0.9π到1.1π之間的正弦曲線,根據上圖可以發現對應的餘弦曲線都是負的,趨勢是先慢後快,所以可以利用這一段來改變垂直方向的速度:


move () {
  if (this.isSwing) {
    if (this.swingRadian > 1.1 || this.swingRadian < 0.9) {
      this.swingStep = -this.swingStep
    }
    this.swingRadian += this.swingStep
    this.x += this.sx * Math.sin(this.swingRadian * Math.PI)
    this.y -= this.sy * Math.cos(this.swingRadian * Math.PI)// 因為速度都是負的,所以改成-
  } else {
    this.x += this.sx
    this.y += this.sy
  }
  // ...
}
複製代碼

6.在最上面

為了防止為頁面上原本層級更高的元素遮擋,給雪花的樣式加一個很大的層級:

render () {
    this.el = document.createElement('div')
    this.el.style.cssText = `
        // ...
        z-index: 9999999999999;
    `
    document.body.appendChild(this.el)
}
複製代碼

7.看不見我

修改了層級,所以雪花會在頁面的最上層,那麼可能會擋住其他元素的滑鼠事件,需要禁止它響應滑鼠事件:


render () {
    this.el = document.createElement('div')
    this.el.style.cssText = `
      // ...
      pointer-events: none;
    `
    document.body.appendChild(this.el)
  }
複製代碼

8.更好一點

使用性能更好的transform屬性來做動畫:


render () {
    this.el = document.createElement('div')
    this.el.style.cssText = `
        left: 0;
        top: 0;
        transform: translate(${this.x}px, ${this.y}px);
    `
    document.body.appendChild(this.el)
}
複製代碼

move () {
    // ...
    // this.el.style.left = this.x + 'px'
    // this.el.style.top = this.y + 'px'
    this.el.style.transform = `translate(${this.x}px, ${this.y}px)`
}
複製代碼


當然,最好的方式是用canvas來畫。


最終效果:


下雨&雨夾雪

下完雪,接下來順便下個雨,雨和雪差不多,都是從天上掉下來,但是雨的速度更快,通常也不會左右搖擺什麼的,方向也基本是一致的,先來修改一下樣式:


setStyle () {
  this.el.style.cssText = `
    // ...
    width: 1px;
    // ...
  `
}
複製代碼


很簡單,只要把寬度寫死為1就行了:



接下來把搖擺去掉:


move () {
  this.x += this.sx
  this.y += this.sy
  // ...
}
複製代碼


效果如下:



可以發現雨是豎著在水平移動,顯然是不行的,需要讓它傾斜一定的角度,和運動方向保持一致,這個也很簡單,算一下斜率,水平速度除以垂直速度:


move () {
  // ...
  this.el.style.transform = `translate(${this.x}px, ${this.y}px) ${this.getRotate(this.sy, this.sx)}`
}
getRotate(sy, sx) {
  return `rotate(${sx === 0 ? 0 : (90 + Math.atan(sy / sx) * (180 / Math.PI))}deg)`
}
複製代碼


因為tan(θ)=sy/sx,θ=Math.atan(sy / sx),因為雨的線段默認是從上到下垂直的,θ是代表和水平方向上的夾角,所以需要先旋轉90度,再旋轉夾角的度數,最後弧度轉角度的公式為:角度=弧度*(180/π)。



雨和雪都實現了,讓它們一起出來,就是雨夾雪了:


根據天氣下雪

把上面的代碼放到網站上就有下雪的效果了,另外也可以使用天氣廠商的api,根據實時天氣來下雪或者下雨,再實現一下太陽、烏雲等效果,一個沉浸式天氣就完成了,有興趣的可自行實踐。

最近有讀者想要分布式的項目,還有想要商城的,還有想要springboot,springcloud,k8s等等,這次直接分享幾乎涵蓋了我們java程式設計師的大部分技術桟,可以說真的非常全面了。強烈建議大家都上手做一做,而且以後肯定用的上。資料包含高清視頻+課件+源碼……

相關焦點

  • 【實戰解析】女朋友非常喜歡別人網頁上的下雪效果,我立馬打開電腦擼代碼…
    女朋友常逛的設計網站這兩天頁面上多了下雪的效果,於是問我我的網站能下雪嗎,作為一個程式設計師我一般會說實現不了,但是作為男朋友,不能說不行。  }複製代碼這樣就能源源不斷的下雪了:  }}複製代碼因為正弦函數y的值是從1變化到-1,擺動幅度太了,所以乘了個小數0.2縮小一點,想要幅度小一點,還有一個方法是不要使用整個正弦曲線,可以從中截取一個適合的區間大小,比如就讓x的值在0.9π到1.1π之前變化:class Snow
  • 為讓女朋友看下雪,這樣做有點意思.
    女朋友常逛的設計網站這兩天頁面上多了下雪的效果,於是問我我的網站能下雪嗎,作為一個程式設計師我一般會說實現不了,但是作為男朋友,不能說不行。  }複製代碼這樣就能源源不斷的下雪了:  }}複製代碼因為正弦函數y的值是從1變化到-1,擺動幅度太了,所以乘了個小數0.2縮小一點,想要幅度小一點,還有一個方法是不要使用整個正弦曲線,可以從中截取一個適合的區間大小,比如就讓x的值在0.9π到1.1π之前變化:class Snow
  • 金寨下雪了,我又想你了……
    金寨論壇官方網站:www.lajzx.com  請關注金寨下雪了一下雪,就想你了
  • 女主管換了新電腦,她把舊的送給了我,我抬回家打開影庫…
    5. 給你五百萬讓你戴著面具在商場裸奔一圈你願意嗎??8.同志們,這個黃衣服的妹妹現在是我女朋友了,有什麼想問的嗎14.有沒有大神能認出來後面的幾位總統女主管換了新電腦,她把舊的送給了我,我抬回家打開影庫發現了一些重大秘密,裡面不僅有她的一些刺激的視頻還有她給她閨蜜的,我故意不把電腦修好等下次她又會找我修。
  • 開心一刻:女主管換了新電腦,她把舊的送給了我,我抬回家打開影庫…
    閱讀本文前,請您先點擊上面的「藍色字體」,再點擊「關注」,這樣您就可以繼續免費收到最新文章了開心一刻:女主管換了新電腦,她把舊的送給了我,我抬回家打開影庫…1.我怎麼記得是 山窮水盡疑無路呢?5. 給你五百萬讓你戴著面具在商場裸奔一圈你願意嗎??
  • 問題:智音技術OED代碼10和電腦無聲.
    2. 英特爾智音技術OED提示故障,出現代碼10的相關提示。因為該問題可能涉及軟體層面代碼的故障,故暫無確定的解決方案。按快捷鍵【WIN+X】打開設備管理器,在設備管理器中找到英特爾(R)智音技術OED項。右鍵智音技術音頻控制器,並選擇「更新驅動程序」,記得從計算機選擇瀏覽,再選擇「讓我從可用的驅動程序列表中選取」。然後選擇 High Definition Audio(高清晰度音頻),點擊下一步並確定。
  • 給你講個笑話:我是做遊戲的程式設計師
    突然想起來,給我面試那個人事妹子當初問我:「有沒有加班到死的精神?」內心至今仍然在想,「你會陪我一起死麼?」如果說加班只是日常任務,那麼有女朋友就跟中了六合彩一樣,自從走上光明的程序之路,家人拋棄了我,女友拋棄了我,甚至因為加班經常住在公司裡面,連家裡養的狗都拋棄了我。
  • 電腦幹貨:一招解決電腦黑屏藍屏問題,簡單到沒朋友
    在小編在寫教程之前我想讓大家先搞清楚這幾種黑屏情況,哪些是不需要重裝可以解決,哪些是必須要重裝解決的。如下如圖首先下圖就是提示無信號(當然這是開機後的狀況,你要沒開機也是看到這樣的),這種情況有以下幾點:1.排除VGA線(視頻連接線藍色的)是否沒連接好,接觸不良。
  • 石城下雪了?白茫茫一片!2017冬天第一場……
    這兩天全省各地的小夥伴都在傳下雪了,下雪了還曬出一波一波的雪景美圖把我們石城的朋友羨慕得不要不要的
  • 拒絕白嫖,從我做起!共享擼貓APP:先掃碼,後擼貓!
    相信很多人也跟我有一樣的想法雖然很想自己養一隻貓卻擔心沒有時間和精力能把它照顧好想偷偷來一場「貓色交易但是雲養貓只能滿足眼福卻不能感受親手擼貓的樂趣未免美中不足同道星座實驗室每個人都在想究竟有沒有一種辦法讓每個人都有貓可擼?
  • 下雪了,誰來買我的火柴?
    ······················································下雪了怎麼一點都不覺得冷呢?!一定是因為你好溫暖...走在寒冷下雪的夜空努力著工作才能溫飽我們的夢一步步冰凍,一步步寂寞人情寒冷冰凍我們的手風刺我們的臉,雪割我們的口拖著腳步還能走多久好想擁有三根火柴
  • 求助:我想和我的德國女朋友分手…
    我和我的德國女朋友是網上認識的,當時不在一個城市,為了這份感情,我是後來畢業找工作來到她的這個城市的。她現在還在上學。我們在一起1年半時間,感情還算穩定,從沒大吵過,極個別幾次因為她考試前貪玩,我說過她。我也沒怎麼和周圍朋友介紹過她,這是個性使然,我總覺的個人感情問題是個人的事,沒必要和一些相交不深的朋友提及。
  • 果殼網專訪Iordanov:透明桌面確實用了我的代碼
    但這一獎項立刻引發了爭議,許多研究者認為這一項目太偏向工程,太過普通,《科學》雜誌的官方網站也對此進行了報導。在接受科技日報採訪時,張堯學提供了一個視頻連結,展示了基於透明計算的「透明桌面」項目的運行狀況。但是,網友很快發現其中一段幫助文本是英文。
  • 下雪啦!雲陽2020年冬天第一場雪,好多圖~
    下雪了下雪了下雪了雪雪雪↓↓↓錯過了秋天的第一杯奶茶這個冬天洞鹿、石門等地都迎來了降雪你準備好近距離感受2020年冬天的第一場雪了麼?聽說下雪的冬天和FM102.6雲陽新聞綜合廣播更配雲陽已經正式進入了冬天雨雪天氣慢慢開始蔓延接下來的日子只會冷冷冷~記得套好你的小棉襖、秋衣秋褲小棉鞋
  • 女主管換了新電腦,她把舊的送給了我,我抬回家打開影庫...
    完全是免費訂閱,請放心關注早點一哥們剛到辦公室,一個女同事上上來就給了一巴掌,邊上的同事都看得很莫名其妙,哥們也很無辜,接著該女同事說:你在我夢裡做的那些事,別以為就這麼算了。正當大家覺得女同事無理取鬧的時候,哥們臉上居然出現了自己犯錯的表情。躲在身後還是被盯上了,總覺得會被搶走。
  • 學習 | 我電腦上最常用的學習app分享
    如果你真的特別看重它的設計,解決方法該我想是多付一些錢買最高配置的版本。言歸正傳,說回我的學習app。我很少直接在app上學知識,更多是用它們來幫助我規劃和記錄,作為一個學習輔助工具使用。我的電腦上,使用頻率最高的應該就是幫助我安排事項的「時間管理app」,這方面我用的都是最基礎的mac自帶app,簡簡單單地就很好用了。
  • 我媽在和我打電話,我身邊的朋友:
    當她想要了但你剛擼完一次他在沒有電腦的情況下教會學生用word文檔-真的菜,在阿富汗,他們在沒有電腦的情況下教你玩使命召喚在夏天刷meme vs  在冬天刷meme你的兒子想當蝙蝠俠你的兒子想當蝙蝠俠不是- End -本期的meme review就到此結束了,如果大家點讚數量夠多還是會繼續保持日更的。不要忘了分享給你的朋友們,以及關注,或者用最簡單的方式來支持我,點右下角的好看。
  • 測試一下,你是否擼多了?
    測試你的腎還好不好,憋一口氣,評論,不停的按8,不夠6行的,絕對是擼多了。像這樣的測試,小編都不屑去證明.大家看,我的腎非常好,甚至還能再點兩行。最近小編還真發現一個可以測身體機能的一個網站,看看你是不是擼多了,身體機能下降了。
  • 這7個稀奇古怪的小網站,讓我摸了一天的魚!太上癮啦!
    個有趣的摸魚的網站,一次送給你!比如這個比較初級的迷宮,我第二步就找到正確的出口了:當然,如果你自己覺得自己眼神還挺好,你可以選擇一個100×100的迷宮:密密麻麻全都是線,根本不知道從哪找起,反正小北是不想玩這種困難模式的。在win7上有很多經典遊戲,比如這個掃雷,在win10電腦中就取消了。
  • 下次下雪的時候,我們一起吃飯吧!
    11四季分明且離海不遠的城市在氣候和地理位置上能給人更多的儀式感,春天有花;夏天有海;秋天有落葉;冬天有雪。每個季節有著不同的期待,去上班的路上,看到第一朵花開了,不緊不慢地拿出手機拍一張;上課的時候,看到外面下雪了,讓學生趴在窗前驚叫一聲:「哇—」。這些是時間帶給大自然的禮物,順帶也捎給了我們一份。