一種巧妙的使用 CSS 製做波浪效果的思路

在以前，我介紹過幾種使用純 CSS 實現波浪效果的方式，關於它們有兩篇相關的文章：前端

本文將會再介紹另一種使用 CSS 實現的波浪效果，思路很是有意思。git

從定積分實現曲邊三角形面積提及

在進入主題以前，先看看這個，在高等數學中，咱們能夠經過定積分求二次函數曲邊圖形面積。github

咱們能夠將曲線下的面積分割成 n 個的細高的矩形，當 n 無限趨近於無窮時，全部矩形的面積就等於曲邊圖形的面積。markdown

兩張簡單的示意圖，圖取自爲何定積分能夠求面積？：函數

當 n 無限趨近於無窮時，全部矩形的面積就等於曲邊圖形的面積：oop

利用這個思路，咱們也能夠經過多個 div 在 CSS 中模擬出一條曲邊，也就是波浪線。佈局

Step 1. 將圖形切割爲多份

首先，咱們能夠定義一個父容器，父容器下有 12 個子 div：學習

<div class="g-container">
  <div class="g-item"></div>
  <div class="g-item"></div>
  <div class="g-item"></div>
  <div class="g-item"></div>
  <div class="g-item"></div>
  <div class="g-item"></div>
  <div class="g-item"></div>
  <div class="g-item"></div>
  <div class="g-item"></div>
  <div class="g-item"></div>
  <div class="g-item"></div>
  <div class="g-item"></div>
</div>
複製代碼

經過 flex 佈局，簡單佈局一下，獲得這樣一個圖形，每一個子元素等高：flex

.g-container {
    width: 200px;
    height: 200px;
    border: 2px solid #fff;
    display: flex;
    align-items: flex-end;
}

.g-item {
    flex-grow: 1;
    height: 60px;
    background-color: #fff;
}
複製代碼

效果以下：動畫

Step 2. 讓每一個子元素以不一樣負延遲運行高度變換動畫

接下來，簡單改造下，咱們須要讓這個圖動起來，經過改變每一個子元素的高度實現：

.g-item {
    flex-grow: 1;
    height: 60px;
    background-color: #000;
    animation: heightChange 1s infinite ease-in-out alternate;
}

@keyframes heightChange {
    from {
        height: 60px;
    }
    to {
        height: 90px;
    }
}
複製代碼

效果以下：

接下來，只須要，讓每一個子元素的動畫順序設定一個不一樣時間的負延遲便可，就能夠獲得一個初步的波浪效果，這裏爲了減小工做量，咱們藉助 SASS 實現：

$count: 12;
$speed: 1s;

.g-item {
    --f: #{$speed / -12};
    flex-grow: 1;
    height: 60px;
    background-color: #000;
    animation: heightChange $speed infinite ease-in-out alternate;
}

@for $i from 0 to $count {
    .g-item:nth-child(#{$i + 1}) {
        animation-delay: calc(var(--f) * #{$i});
    }
}

@keyframes heightChange {
    from {
        height: 60px;
    }
    to {
        height: 90px;
    }
}
複製代碼

這樣，咱們就獲得了一個初步的波浪效果：

Step 3. 消除鋸齒

能夠看到，上述的波浪動畫是存在必定的鋸齒的，接下來咱們要作的就是儘量的消除掉這些鋸齒。

法一：增長 div 的數量

按照一開始使用定積分求曲邊圖形面積的思想，咱們只須要儘量增長子 div 的數量便可，當 div 的數量無窮多的時候，鋸齒也就會消失不見。

咱們能夠嘗試將上述的 12 個子 div，替換成 120 個試下，一個一個寫 120 個 div 太費力了，咱們這裏藉助 Pug 模板引擎：

div.g-container
 -for(var i=0; i<120; i++)
    div.g-item
複製代碼

對於 CSS 代碼，只須要改動動畫延遲的時間便可，120 個子 div 的負延遲都控制在 1s 內：

// 12 -- 120
$count: 120;
$speed: 1s;

.g-item {
    // 注意，只有這裏發生了變化
    --f: #{$speed / -120};
    flex-grow: 1;
    height: 60px;
    background-color: #000;
    animation: heightChange $speed infinite ease-in-out alternate;
}

@for $i from 0 to $count {
    .g-item:nth-child(#{$i + 1}) {
        animation-delay: calc(var(--f) * #{$i});
    }
}
複製代碼

這樣，咱們就能夠獲得一條比較光滑的曲線啦：

法二：經過 transform: skew() 模擬弧度

固然，實際狀況，使用那麼多個 div 實在是太浪費了，那麼有沒有其它方法在 div 數量比較少的狀況下，也可以儘量的消除鋸齒呢？

這裏，咱們能夠嘗試給子元素在運動變換的過程當中添加不一樣的 transform: skewY() 去模擬弧度。

再改造下代碼，咱們將 div 的數量調低，而且給每一個子 div 再添加一個 transform: skewY() 的動畫效果：

div.g-container
 -for(var i=0; i<24; i++)
    div.g-item
複製代碼

完整的 CSS 代碼以下：

$count: 24;
$speed: 1s;

.g-item {
    // 注意，只有這裏發生了變化
    --f: #{$speed / -24};
    flex-grow: 1;
    height: 60px;
    background-color: #000;
    animation: 
        heightChange $speed infinite ease-in-out alternate,
        skewChange $speed infinite ease-in-out alternate;
}

@for $i from 0 to $count {
    .g-item:nth-child(#{$i + 1}) {
        animation-delay: 
            calc(var(--f) * #{$i}), 
            calc(var(--f) * #{$i} - #{$speed / 2});
    }
}

@keyframes heightChange {
    from {
        height: var(--h);
    }
    to {
        height: calc(var(--h) + 30px);
    }
}

@keyframes skewChange {
    from {
        transform: skewY(20deg);
    }
    to {
        transform: skewY(-20deg);
    }
}
複製代碼