純css模擬下雪效果

時間 2019-11-09

標籤 css 模擬下雪效果欄目 CSS 简体版

原文原文鏈接

效果如其名，想必都見過下雪（可能南方人除外哈哈），但下雪效果只是一類效果的名稱，能夠是紅包雨等一些自由落體的運動效果，本文就是用純css模擬下雪的效果。javascript

1.前言

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

動畫自由度：canvas勝；
複雜度：canvas勝；
兼容性：canvas勝；
性能：css3勝（requestAnimationFrame和硬件加速）。

因爲對於性能有必定的要求，canvas對比css3會有更多的計算量致使性能可能不太好，因此選用css3模擬下雪效果（ps：能用css解決的問題就不用javascript解決哈哈）。html

附上地址java

2.原理

本文所採用的是css3的animation。爲dom元素添加animation屬性就能夠模擬動畫，例如w3school的例子：react

<!DOCTYPE html>
<html lang="en">
<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 class="animation"></div>
</body>
</html>
複製代碼

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

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

咱們能夠在css中找到這幾點隨機性的對應屬性：git

起始點：position的左右方位（動畫咱們通常採用定位，由於能夠減小沒必要要的重排和重繪）；
速度：animation-timing-function（提供了豐富的速度屬性）；
時間：animation-duration和animation-delay；
搖擺：transform: translateX()（在水平方向上的位移）。

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

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

3.構造雪形狀

3.1 一條線性漸變

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

3.2 多條線性漸變畫雪花

.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來構造動畫，其實語言無所謂，重在原理。canvas

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~100vw：注意單位是vw，咱們想要雪花的起始點出如今水平方向的任意位置，而vw是把屏幕等分爲100份，100vw就是滿屏；
爲何要把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>
複製代碼

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

data-animation-position：起始位；
data-animation-timing：下雪速度；
data-animation-delay：延時；
data-animation-duration：下雪總時間；
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)]
}
複製代碼