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

智雲程式設計發表於2019-05-17
CSS動畫

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

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

1.前言

由於公司產品的活動，需要模擬類似下雪的效果。瀏覽器實現動畫無非 css3 和 canvas （還有 gif ），對比下 css3 和 canvas 的優缺點：

  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>

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

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

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

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

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

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

3.構造雪形狀

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.構造下雪動畫

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

4.1 起始點 

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

這裡運用 sass 的迴圈函式來創造1到100的匹配 class 名為 animation 和屬性選擇器為 [data-animation-position=1~100vw] 的值，例如我們想要元素的 left 為 50vw ，就直接新增 class 名 data-animation-position=50vw 。這裡有兩點需要說明：

  1. 範圍1~100 vw ：注意單位是 vw ，我們想要雪花的起始點出現在水平方向的任意位置，而 vw 是把螢幕等分為 100 份， 100vw 就是滿屏；
  2. 為什麼要把1～100都迴圈出來：只有這樣才能匹配到範圍內我們需要的值。

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 ，下落的動畫是固定的，只有搖擺需要隨機，所以我自定義了屬性匹配規則，就可以隨機搖擺了。 

@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 隨機範圍函式 

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)] }


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

來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/69901074/viewspace-2644783/，如需轉載，請註明出處，否則將追究法律責任。

相關文章