SVG和CSS打造逼真云朵效果

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

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

很奇怪，對吧？我個人也無法理解。幸運(yùn)的是，在瀏覽器中創(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的巧妙結(jié)合實現(xiàn)的。這些SVG濾鏡功能強(qiáng)大、復(fù)雜且提供了非常令人興奮的功能（包括一個奧斯卡獲獎算法！）。然而，其底層復(fù)雜性可能會讓人望而生畏。

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

在本文中，我們將專注于學(xué)習(xí)如何使用這些SVG濾鏡來獲得驚人的效果。我們不需要深入了解幕后算法的運(yùn)作方式，就像藝術(shù)家不需要了解顏料的分子結(jié)構(gòu)就能渲染出令人驚嘆的風(fēng)景一樣。

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

從基礎(chǔ)開始

CSS box-shadow屬性有五個值得關(guān)注的值：

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

讓我們將這些值調(diào)高（可能高于任何理智的開發(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復(fù)制了原始大小和border-radius上的“變形”功能。SVG濾鏡同時應(yīng)用于元素及其陰影。

<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的標(biāo)記。它不會渲染，因為我們還沒有定義任何視覺效果（更不用說零寬度和高度了）。它的唯一目的是保存一個濾鏡，我們將這個濾鏡提供給我們的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>

瞧！

好吧，承認(rèn)吧，添加SVG濾鏡相當(dāng)不起眼。

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

實驗feDisplacementMap的scale屬性

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

隨著scale值的增加（以30為增量），我們的源<div>會發(fā)生扭曲，并投射出陰影來反映云朵在天空中的隨機(jī)形態(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>好了，我們有所進(jìn)展！讓我們稍微改變一下顏色，以產(chǎn)生更令人信服的云朵效果，并增強(qiáng)效果。</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)在它擋住了我們稱之為云朵的白色陰影。讓我們將陰影“重新投射”到更遠(yuǎn)的距離，這樣我們的云朵就不會被源圖像遮擋。（可以想象一下，將你的手從墻上移開，這樣就不會擋住影子戲的視線。）</p> <p>這可以通過一些CSS定位輕松實現(xiàn)。<code><div>是云朵的父元素，默認(rèn)情況下是靜態(tài)定位的。讓我們用一些絕對定位將我們的源<code><div>“塞”起來并移出文檔流。最初，這也會重新定位我們的陰影，因此我們還需要增加陰影與元素的距離，并稍微調(diào)整元素的位置。 <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)得到了一個相當(dāng)令人信服的云朵。</p> <p>渲染到瀏覽器中的圖像對云朵的描繪相當(dāng)不錯——但是，我不確定……這朵云真的能體現(xiàn)云仙女涅菲勒嗎？我相信我們可以做得更好！</p> <h3 id="使用圖層表達(dá)深度">使用圖層表達(dá)深度</h3> <p>這就是我們想要的：</p> <p>從這張照片中云朵的深度、紋理和豐富性來看，有一點很清楚：宙斯上過美術(shù)學(xué)校。至少，他一定讀過《設(shè)計的普遍原則》，其中闡述了一個強(qiáng)大而看似普通的概念：</p> <blockquote> <p>[…] 照明偏差在深度和自然感的解釋中起著重要作用，并且可以通過設(shè)計師以各種方式進(jìn)行操作……使用光暗區(qū)域之間的對比度來改變深度的外觀。</p> </blockquote> <p>這段話為我們提供了一個線索，說明我們?nèi)绾尾拍艽蟠蟾倪M(jìn)我們自己生成的云朵代碼。我們可以通過將不同形狀、大小和顏色的圖層堆疊在一起，來渲染出與參考圖像中的云朵高度相似的云朵。這只需要根據(jù)需要多次調(diào)用我們的濾鏡即可。</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>應(yīng)用我們的圖層將使我們有機(jī)會探索<code>feTurbulence并實現(xiàn)其多功能性。我們將選擇可用的更平滑的類型：fractalNoise，并將numOctaves調(diào)高到6。

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

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

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

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

使用numOctaves添加細(xì)節(jié)

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

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

結(jié)果如下

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

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

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

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

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

天馬行空

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