溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

強大的CSS：模擬下雪效果動畫制作教程

發(fā)布時間：2020-08-15 22:40:12 來源：ITPUB博客 閱讀：332 作者：智云編程 欄目：web開發(fā)

下雪效果只是一類效果的名稱，可以是紅包雨等一些自由落體的運動效果，本文就是用純 css 模擬下雪的效果，更多效果大家可以自行發(fā)揮。

強大的CSS：模擬下雪效果動畫制作教程

1.前言

由于公司產(chǎn)品的活動，需要模擬類似下雪的效果。瀏覽器實現(xiàn)動畫無非 css3 和 canvas （還有 gif ），對比下 css3 和 canvas 的優(yōu)缺點：

  1. 動畫自由度： canvas 勝；
  2. 復雜度： canvas 勝；
  3. 兼容性： canvas 勝；
  4. 性能： css3 勝（ requestAnimationFrame 和硬件加速）。

由于對于性能有一定的要求， canvas 對比 css3 會有更多的計算量導致性能可能不太好，所以選用 css3 模擬下雪效果（ps：能用 css 解決的問題就不用 javascript 解決哈哈）。

2.原理

本文所采用的是 css3 的 animation 。為 dom 元素添加 animation 屬性就可以模擬動畫，例如w3school的例子： 

<!DOCTYPE html> <html> <head>   <meta charset="UTF-8">   <meta name="viewport" content="width=device-width, initial-scale=1.0">   <meta http-equiv="X-UA-Compatible" content="ie=edge">   <title>animation</title>   <style>     .animation{       width:100px;       height:100px;       background:red;       position:relative;       animation:mymove 5s infinite;       -webkit-animation:mymove 5s infinite;     }     @keyframes mymove{       from {         left:0px;       }       to {         left:200px;       }     }   </style> </head> <body>   <div></div> </body> </html>

當然這誰都會，但有個問題是，下雪并不是機械的下落，而是有快有慢、擺動幅度、時間不定，這里的重點是需要構(gòu)造隨機性，理性分析下。

  1. 在瀏覽器中下雪的起始點隨機;
  2. 下雪的速度隨機;
  3. 下雪從開始到落到地面的時間隨機（延時隨機和整個下雪過程的時間隨機）;
  4. 下雪過程中搖擺隨機。

我們可以在css中找到這幾點隨機性的對應屬性：

  1. 起始點： position 的左右方位（動畫我們一般采用定位，因為可以減少不必要的重排和重繪）；
  2. 速度： animation-timing-function （提供了豐富的速度屬性）；
  3. 時間： animation-duration 和 animation-delay ；
  4. 搖擺： transform: translateX() （在水平方向上的位移）。

可能有人會問，這幾個屬性并不是隨機的呀，并不像 Math.random 隨機函數(shù)那樣。我們換個思考方向，本文所說的隨機是隨機雪，并不是隨機雪的屬性。每個雪的下落時間、下落速度、擺動幅度是固定的，雪與雪之間的下落時間、下落速度、擺動幅度是不同，那么就達到效果了。

意識到這點，就剩下最后一個問題，怎樣給每個雪不同的下落時間、下落速度、擺動幅度呢？這里我們使用真正的隨機函數(shù) Math.random ，利用data自定義屬性配合 Math.random 和css的屬性匹配規(guī)則，就可以確定動畫效果了。

3.構(gòu)造雪形狀

3.1 一條線性漸變

強大的CSS：模擬下雪效果動畫制作教程 

.linear{   width: 100px;   height: 100px;   background: linear-gradient(0, green 40%, red 40%, red 60%, green 60%); }

3.2 多條線性漸變畫雪花

強大的CSS：模擬下雪效果動畫制作教程 

.linear{   width: 100px;   height: 100px;   border-radius: 50%;   background-image: linear-gradient(0, rgba(255,255,255,0) 40%, #fff 40%, #fff 60%, rgba(255,255,255,0) 60%),     linear-gradient(45deg, rgba(255,255,255,0) 43%, #fff 43%, #fff 57%, rgba(255,255,255,0) 57%),     linear-gradient(90deg, rgba(255,255,255,0) 40%, #fff 40%, #fff 60%, rgba(255,255,255,0) 60%),     linear-gradient(135deg, rgba(255,255,255,0) 43%, #fff 43%, #fff 57%, rgba(255,255,255,0) 57%); }

4.構(gòu)造下雪動畫

我用 sass 寫的 css 來構(gòu)造動畫，其實語言無所謂，重在原理。

4.1 起始點 

@for $i from 1 through 100 {   .animation[data-animation-position='#{$i}'] {     left: #{$i}vw;   } }

這里運用 sass 的循環(huán)函數(shù)來創(chuàng)造1到100的匹配 class 名為 animation 和屬性選擇器為 [data-animation-position=1~100vw] 的值，例如我們想要元素的 left 為 50vw ，就直接添加 class 名 data-animation-position=50vw 。這里有兩點需要說明：

  1. 范圍1~100 vw ：注意單位是 vw ，我們想要雪花的起始點出現(xiàn)在水平方向的任意位置，而 vw 是把屏幕等分為 100 份， 100vw 就是滿屏；
  2. 為什么要把1～100都循環(huán)出來：只有這樣才能匹配到范圍內(nèi)我們需要的值。

4.2 速度 

$timing: (   linear: linear,   ease: ease,   ease-in: ease-in,   ease-out: ease-out,   ease-in-out: ease-in-out ); @each $key, $value in $timing {   .animation[data-animation-timing='#{$key}'] {     transition-timing-function: $value;   } }

4.3 時間

時間包含動畫運動時間和延時時間。 

@for $i from 1 through 4 {   .animation[data-animation-delay='#{$i}'] {     animation-delay: #{$i}s;   } } @for $i from 4 through 8 {   .animation[data-animation-duration='#{$i}'] {     animation-duration: #{$i}s;   } }

4.4 搖擺

下雪由兩個動畫組成，分別是下落 fall 和搖擺 swing ，下落的動畫是固定的，只有搖擺需要隨機，所以我自定義了屬性匹配規(guī)則，就可以隨機搖擺了。 

@for $i from 1 through 4 {   .animation[data-animation-name='#{$i}'] {     animation-name: fall, swing#{$i};   } } @for $i from 1 through 4 {   @keyframes swing#{$i}{     25% {       transform: translateX(-#{$i * 10}px);     }     50% {       transform: translateX(#{$i * 10}px);     }     75%{       transform: translateX(-#{$i * 10}px);     }     100%{       transform: translateX(#{$i * 10}px);     }   } }

5.隨機性

這里用 react 來演示代碼，還是那句話只要理解了原理，語言其實并不太重要。

5.1 雪花元素 

<div className='page'>   {     Array(10).fill().map((v, i) => (       <span         key={i}         className='animation span'         data-animation-position={this.position()}         data-animation-timing={this.timing()}         data-animation-delay={this.delay()}         data-animation-duration={this.duration()}         data-animation-name={this.name()}       />     ))   } </div>

我們的雪花元素包含幾下幾個屬性值：

  1. data-animation-position ：起始位；
  2. data-animation-timing ：下雪速度；
  3. data-animation-delay ：延時；
  4. data-animation-duration ：下雪總時間；
  5. data-animation-name ：下落動畫和搖擺動畫。

5.1 隨機范圍函數(shù) 

random(min, max){   return Math.floor(Math.random() * (max - min + 1) + min) }

5.2 屬性隨機賦值 

position(){   return this.random(1, 100) } delay(){   return this.random(1, 4) } duration(){   return this.random(4, 8) } name(){   return this.random(1, 4) } timing(){   return ['linear', 'ease', 'ease-in', 'ease-out', 'ease-in-out'][this.random(0, 4)] }


自己是個做了幾年全棧開發(fā)的老碼農(nóng)，如果你對前端開發(fā)這門技術(shù)感興趣，這里推薦一下我的前端學習交流群： 767273102     ，里面都是學習前端的從最基礎的HTML+CSS+JavaScript。jQuery，Ajax，node，angular等到移動端HTML5的項目實戰(zhàn)的資料都有整理，送給每一位前端小伙伴。最新技術(shù)，與企業(yè)需求同步。好友都在里面學習交流，每天都會有大牛定時講解前端技術(shù)!

向AI問一下細節(jié)

免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手