SVG和CSS打造逼真云朵效果

希臘神話中，宙斯創(chuàng)造了云仙女涅菲勒。和其它希臘神話一樣，這個故事相當離奇。這里是一個簡短且合適的版本：

傳說中，涅菲勒是宙斯以自己美麗妻子的形象創(chuàng)造的。一位凡人邂逅涅菲勒，愛上了她，他們一起……最終，不可思議的是，這朵云誕下了半人半馬的半人馬嬰兒。

很奇怪，對吧？我個人也無法理解。幸運的是，在瀏覽器中創(chuàng)建云朵的過程要簡單得多，也正經(jīng)得多。

最近，我發(fā)現(xiàn)開發(fā)者Yuan Chuan實現(xiàn)了代碼生成的、逼真的云朵效果。對我來說，這種在瀏覽器中實現(xiàn)的效果曾經(jīng)是神話故事。

只需瀏覽一下這個示例代碼，我們就能想象到，通過使用帶有<filter></filter>元素（包含兩個SVG濾鏡）的CSS box-shadow，可以實現(xiàn)令人信服的單個云朵效果。

我們想要的逼真效果是通過feTurbulence和feDisplacementMap的巧妙結合實現(xiàn)的。這些SVG濾鏡功能強大、復雜且提供了非常令人興奮的功能（包括一個奧斯卡獲獎算法！）。然而，其底層復雜性可能會讓人望而生畏。

雖然SVG濾鏡的物理原理超出了本文的范圍，但在MDN和w3.org上提供了大量的文檔。關于feTurbulence和feDisplacementMap的非常有益的頁面是免費提供的（并且作為這本精彩書籍的一個章節(jié)）。

在本文中，我們將專注于學習如何使用這些SVG濾鏡來獲得驚人的效果。我們不需要深入了解幕后算法的運作方式，就像藝術家不需要了解顏料的分子結構就能渲染出令人驚嘆的風景一樣。

相反，讓我們密切關注幾個對在瀏覽器中繪制令人信服的云朵至關重要的SVG屬性。使用這些屬性，我們可以將這些強大的濾鏡運用自如，并學習如何在自己的項目中精確地自定義它們。

從基礎開始

CSS box-shadow屬性有五個值得關注的值：

<code>box-shadow: <offsetx><offsety><blurradius><spreadradius><color>;</color></spreadradius></blurradius></offsety></offsetx></code>

讓我們將這些值調高（可能高于任何理智的開發(fā)者會使用的值），這樣陰影本身就會成為舞臺上的一個角色。

<code>#cloud-square {
  background: turquoise;
  box-shadow: 200px 200px 50px 0px #000;
  width: 180px;
  height: 180px;
}

#cloud-circle {
  background: coral;
  border-radius: 50%;
  box-shadow: 200px 200px 50px 0px #000;
  width: 180px;
  height: 180px;
}</code>

你玩過或者見過影子戲嗎？

就像用手改變形狀來改變陰影一樣，我們HTML中的“源形狀”可以移動和變形來移動和改變在瀏覽器中渲染的陰影的形狀。box-shadow復制了原始大小和border-radius上的“變形”功能。SVG濾鏡同時應用于元素及其陰影。

<code><svg height="0" width="0"><filter><feturbulence basefrequency=".01" numoctaves="10" type="fractalNoise"></feturbulence><fedisplacementmap in="SourceGraphic" scale="10"></fedisplacementmap></filter></svg></code>

這是我們目前SVG的標記。它不會渲染，因為我們還沒有定義任何視覺效果（更不用說零寬度和高度了）。它的唯一目的是保存一個濾鏡，我們將這個濾鏡提供給我們的SourceGraphic（也就是我們的<div>）。我們的源<code><div>及其陰影都由濾鏡獨立扭曲。我們將添加必要的CSS規(guī)則，使用其ID將HTML元素（<code>#cloud-circle）鏈接到SVG濾鏡：

<code>#cloud-circle {
  filter: url(#filter);
  box-shadow: 200px 200px 50px 0px #fff;
}</code>

瞧！

好吧，承認吧，添加SVG濾鏡相當不起眼。

別擔心！我們只是觸及了表面，還有很多好東西要看。

實驗feDisplacementMap的scale屬性

對這個屬性進行一些非科學的實驗可以產(chǎn)生戲劇性的效果。目前，讓我們保持feTurbulence中的所有值不變，只需調整DisplacementMap的scale屬性。

隨著scale值的增加（以30為增量），我們的源<div>會發(fā)生扭曲，并投射出陰影來反映云朵在天空中的隨機形態(tài)。 <pre class="brush:php;toolbar:false">&lt;code&gt;&lt;fedisplacementmap in=&quot;SourceGraphic&quot; scale=&quot;180&quot;&gt;&lt;/fedisplacementmap&gt;&lt;/code&gt;</pre> <p>好了，我們有所進展！讓我們稍微改變一下顏色，以產(chǎn)生更令人信服的云朵效果，并增強效果。</p> <pre class="brush:php;toolbar:false">&lt;code&gt;body { background: linear-gradient(165deg, #527785 0%, #7FB4C7 100%); } #cloud-circle { width: 180px; height: 180px; background: #000; border-radius: 50%; filter: url(#filter); box-shadow: 200px 200px 50px 0px #fff; }&lt;/code&gt;</pre> <p>現(xiàn)在我們更接近逼真的云朵效果了！</p> <h3 id="修改-code-box-shadow-code-的-code-blur-code-值">修改<code>box-shadow的blur值

下面的圖像系列顯示了blur值對box-shadow的影響。在這里，blur值以10像素為增量增加。

為了使我們的云朵具有一些積云般的效果，我們可以稍微加寬我們的源<div>。 <pre class="brush:php;toolbar:false">&lt;code&gt;#cloud-circle { width: 500px; height: 275px; background: #000; border-radius: 50%; filter: url(#filter); box-shadow: 200px 200px 60px 0px #fff; }&lt;/code&gt;</pre> <p>等等！我們加寬了源元素，現(xiàn)在它擋住了我們稱之為云朵的白色陰影。讓我們將陰影“重新投射”到更遠的距離，這樣我們的云朵就不會被源圖像遮擋。（可以想象一下，將你的手從墻上移開，這樣就不會擋住影子戲的視線。）</p> <p>這可以通過一些CSS定位輕松實現(xiàn)。<code><div>是云朵的父元素，默認情況下是靜態(tài)定位的。讓我們用一些絕對定位將我們的源<code><div>“塞”起來并移出文檔流。最初，這也會重新定位我們的陰影，因此我們還需要增加陰影與元素的距離，并稍微調整元素的位置。 <pre class="brush:php;toolbar:false">&lt;code&gt;#cloud-circle { width: 500px; height: 275px; background: #000; border-radius: 50%; filter: url(#filter); box-shadow: 400px 400px 60px 0px #fff; /* 增加陰影偏移量 */ position: absolute; /* 將父元素移出文檔流 */ top: -320px; /* 向下移動 */ left: -320px; /* 向右移動 */ }&lt;/code&gt;</pre> <p>是的！我們已經(jīng)得到了一個相當令人信服的云朵。</p> <p>渲染到瀏覽器中的圖像對云朵的描繪相當不錯——但是，我不確定……這朵云真的能體現(xiàn)云仙女涅菲勒嗎？我相信我們可以做得更好！</p> <h3 id="使用圖層表達深度">使用圖層表達深度</h3> <p>這就是我們想要的：</p> <p>從這張照片中云朵的深度、紋理和豐富性來看，有一點很清楚：宙斯上過美術學校。至少，他一定讀過《設計的普遍原則》，其中闡述了一個強大而看似普通的概念：</p> <blockquote> <p>[…] 照明偏差在深度和自然感的解釋中起著重要作用，并且可以通過設計師以各種方式進行操作……使用光暗區(qū)域之間的對比度來改變深度的外觀。</p> </blockquote> <p>這段話為我們提供了一個線索，說明我們?nèi)绾尾拍艽蟠蟾倪M我們自己生成的云朵代碼。我們可以通過將不同形狀、大小和顏色的圖層堆疊在一起，來渲染出與參考圖像中的云朵高度相似的云朵。這只需要根據(jù)需要多次調用我們的濾鏡即可。</p> <pre class="brush:php;toolbar:false">&lt;code&gt;&lt;svg height=&quot;0&quot; width=&quot;0&quot;&gt;&lt;filter&gt;&lt;feturbulence basefrequency=&quot;0.012&quot; numoctaves=&quot;4&quot; type=&quot;fractalNoise&quot;&gt;&lt;/feturbulence&gt;&lt;fedisplacementmap in=&quot;SourceGraphic&quot; scale=&quot;170&quot;&gt;&lt;/fedisplacementmap&gt;&lt;/filter&gt;&lt;filter&gt;&lt;feturbulence basefrequency=&quot;0.012&quot; numoctaves=&quot;2&quot; type=&quot;fractalNoise&quot;&gt;&lt;/feturbulence&gt;&lt;fedisplacementmap in=&quot;SourceGraphic&quot; scale=&quot;150&quot;&gt;&lt;/fedisplacementmap&gt;&lt;/filter&gt;&lt;filter&gt;&lt;feturbulence basefrequency=&quot;0.012&quot; numoctaves=&quot;2&quot; type=&quot;fractalNoise&quot;&gt;&lt;/feturbulence&gt;&lt;fedisplacementmap in=&quot;SourceGraphic&quot; scale=&quot;100&quot;&gt;&lt;/fedisplacementmap&gt;&lt;/filter&gt;&lt;/svg&gt;&lt;/code&gt;</pre> <p>應用我們的圖層將使我們有機會探索<code>feTurbulence并實現(xiàn)其多功能性。我們將選擇可用的更平滑的類型：fractalNoise，并將numOctaves調高到6。

<code><feturbulence basefrequency="n" numoctaves="6" type="fractalNoise"></feturbulence></code>

這意味著什么？現(xiàn)在，讓我們重點關注baseFrequency屬性。以下是我們增加n的值時得到的結果：

諸如湍流、噪聲、頻率和倍頻程之類的詞語可能顯得奇怪甚至令人困惑。但是別擔心！將這個濾鏡的效果比作聲波實際上是完全準確的。我們可以將低頻（baseFrequency=0.001）與低沉的噪聲聯(lián)系起來，并將高頻（baseFrequency=0.1）與更高、更清晰的音調聯(lián)系起來。

我們可以看到，對于積云般的效果，baseFrequency的值可能舒適地位于~0.005和~0.01范圍內(nèi)。

使用numOctaves添加細節(jié)

遞增numOctaves允許我們以極其精細的細節(jié)來渲染圖像。這需要大量的計算，因此請注意：高值會嚴重影響性能。除非你的瀏覽器戴著頭盔和護膝，否則盡量避免提高這個值。

好消息是，我們不需要將這個值調得太高就能產(chǎn)生細節(jié)和精細度。如上圖所示，我們可以將numOctaves值設置為4或5。

結果如下

使用seed屬性實現(xiàn)無限變化

關于seed屬性有很多內(nèi)容需要說明，因為它暗示了幕后發(fā)生的魔法。但是，就我們的目的而言，seed的效用可以用四個字概括：“不同的值，不同的形狀”。

Perlin噪聲函數(shù)（前面提到過）使用此值作為其隨機數(shù)生成器的起點。選擇不包含此屬性將默認seed為零。但是，如果包含此屬性，無論我們賦予seed什么值，都不需要擔心性能問題。

上面的GIF代表了seed提供的一些功能。請記住，每一朵云都是一個分層的復合云。（雖然我已經(jīng)調整了每個圖層的屬性，但我保持了它們各自的seed值一致。）

在這里，仔細觀察參考圖像，我已經(jīng)將3個云<div>（不透明度不同）疊加到一個基礎<code><div>上。通過反復試驗和輸入任意<code>seed值，我最終得到了一個類似于照片中云朵形狀的形狀。

天馬行空

當然，認為我們繪制到瀏覽器上的<div>會優(yōu)于宙斯的涅菲勒，那將是狂妄自大。然而，我們能夠從CSS和SVG濾鏡中挖掘出越多的奧秘，我們就越有能力創(chuàng)造出視覺上令人驚嘆的東西，并且與雷神最初的創(chuàng)造高度相似。然后，我們可以繼續(xù)進行進一步的實驗！ <p>反射霧氣</p> <p>高層卷云</p> <p>在本文中，我們只是涉足了一個充滿力量和復雜性的海洋。SVG濾鏡通?？雌饋砹钊瞬恢肭译y以接近。</p> <p>然而，就像A Single Div項目中的示例或Diana Smith的繪畫技巧一樣，一種輕松愉快的實驗方法總是會帶來驚人的結果！</p> <h4 id="成就解鎖-涅菲勒云朵生成器">成就解鎖！涅菲勒云朵生成器</h4> <p>我相信你們很多人很樂意深入了解制作云朵所需的所有技術細節(jié)，但可能更喜歡一些更方便在項目中使用云朵的方法。我開發(fā)了一個小工具來幫助生成云朵并實驗形狀和變化。</p> <p>生成云朵！</p> <p>有任何問題、建議或意見？請在Twitter上聯(lián)系我，或在此帖中發(fā)表評論。</p> <p><small>非常感謝Amelia Bellamy-Royds對本文提出的寶貴建議。</small></p> </div>