學(xué)習(xí)自 最酷的 SVG 動(dòng)畫濾鏡效果
參考學(xué)習(xí)資料?
關(guān)于 feTurbulence：
feTurbulence - SVG：可縮放矢量圖形 | MDN (mozilla.org)
關(guān)于 feDisplacementMap：
feDisplacementMap - SVG：可縮放矢量圖形 | MDN (mozilla.org)
深入理解SVG feDisplacementMap濾鏡及實(shí)際應(yīng)用
關(guān)于 gsap：
效果圖
實(shí)現(xiàn)思路?
這個(gè)系列要寫 css 動(dòng)畫，本文卻使用了 Js 甚至 GSAP。只因?yàn)槲姨幸膺@個(gè)效果了，這次破例標(biāo)題黨一下吧。
可見動(dòng)效分為背景的墨滴擴(kuò)散和前景的列表展示。
背景我們使用 svg 繪制一個(gè) “墨滴” 作為圖片蒙版，再給圖片添加半徑變大的動(dòng)畫；前景我們使用 gsap 的 timeline 來完成動(dòng)畫。
效果看似簡(jiǎn)潔，但還是有很多細(xì)節(jié)要扣的，大致步驟如下：
1. 在 svg 中通過 feTurbulence 和 fedisplacementMap 創(chuàng)建一個(gè)不規(guī)則圓形（墨滴形狀）；
2. 使用 “墨滴” 作為圖片蒙版；
3. 添加列表 html 結(jié)構(gòu)；
4. 將 “墨滴” 和列表調(diào)整至不可見狀態(tài)，通過 gsap 及其 ScrollTrigger 工具包來添加它們隨滾動(dòng)而顯示的動(dòng)畫。
繪制 “墨滴”
很容易聯(lián)想到 “墨滴” 是由圓形變形而來，因此我們需要一個(gè) circle。通過 filter 添加濾鏡（filter: url(#displacementFilter)）來為其添加不規(guī)則邊緣。
現(xiàn)在來解釋這是如何做到的。
feTurbulence
我們先看看只有 feTurbulence 起效時(shí)的效果：
是不是很像電視機(jī)壞掉的波紋？
feturbulence (n. 湍流;紊流;動(dòng)蕩;(空氣和水的)渦流;混亂;動(dòng)亂;騷亂;)。這個(gè)濾鏡利用 Perlin 噪聲函數(shù)，專門用于模擬自然紋理。詳細(xì)可見上方的參考資料。
其參數(shù)含義如下：
-
baseFrequency：噪聲頻率（默認(rèn)值：0，范圍：0 ~ 1）?？梢岳斫鉃閿?shù)值越大，噪聲越密集?？梢越邮軆蓚€(gè)值，分別是 橫坐標(biāo) 和 縱坐標(biāo) 的頻率。
-
numOctaves：八度（默認(rèn)值：1，取值為正整數(shù)）。詳細(xì)略，可以大致理解為分型圖形，數(shù)值越大分型越多，細(xì)節(jié)越多。
-
type: 柏林函數(shù)合成方式（默認(rèn)值：turbulence，取值 turbulence | fractalNoise）?？梢院?jiǎn)略理解為前者無模糊，后者有模糊。
-
stitchTiles：多個(gè)圖形是否融合（默認(rèn)值：noStitch）。
-
seed：隨機(jī)種子。
然而一些隨機(jī)噪音紋理，是一些色彩信息，要怎么去讓圓形邊緣變得不規(guī)則呢？
feDisplacementMap
displacement (n. 移位;取代;替代;排水量;免職;)。字面意思，這個(gè)函數(shù)可以讓圖像的像素進(jìn)行位移，Map 類似 js 中的 map()，代表它會(huì)遍歷每一個(gè)像素進(jìn)行位移。
而它的位移不是亂移的，它是有備而來。
簡(jiǎn)單來說，它可以根據(jù)一個(gè)圖像的色彩信息對(duì)另一個(gè)圖像的像素進(jìn)行位移。
這個(gè)概念類似蒙版，只不過蒙版是根據(jù)灰度信息來控制不透明度，而這個(gè)函數(shù)可以通過 rgba 值來控制位移量。
屬性如下：
-
in：它標(biāo)識(shí)給定過濾器原語的輸入。SourceGraphic，SourceAlpha，BackgroundImage，BackgroundAlpha，F(xiàn)illPaint，StrokePaint；以及自定義的濾鏡的原始引用(輸出的result值)。
不過我們一般只用 SourceGraphic，代表待處理的圖像。
-
in2：它標(biāo)識(shí)給定過濾器原語的第二個(gè)輸入。它的工作原理與in屬性相同。
一般只用自定義濾鏡的引用（輸出的result值），表示其它濾鏡輸出的圖像。
-
scale：可理解為位移的幅度。
-
xChannelSelector：指示從in2使用哪個(gè)顏色通道沿X軸移動(dòng)‘in’中的像素。R/G/B/A
-
yChannelSelector：指示從in2使用哪個(gè)顏色通道沿Y軸移動(dòng)‘in’中的像素。
這里再貼一個(gè)公式，可以窺見像素移動(dòng)的具體規(guī)則，詳情請(qǐng)看上方參考：
添加列表 html 及樣式
可以通過 scaleX 屬性來完成，因此我們先給線條初始值設(shè)為 0 來隱藏它：
同理來處理文字，是一個(gè)從上刷下來的效果，這個(gè)用 translateY 即可。
最后，墨跡形狀很簡(jiǎn)單，半徑給到 0 就可以藏起來了：
引入 gsap 及其 ScrollTrigger?
首先使用 ScrollTrigger，它是一個(gè)用于處理滾動(dòng)條觸發(fā)動(dòng)畫的插件，代碼如下：
首先創(chuàng)建一個(gè)時(shí)間線，定義隨滾動(dòng)條播放動(dòng)畫的配置：
然后給各個(gè)元素添加動(dòng)畫即可：
大功告成。
總結(jié)?
從這個(gè)效果，可以簡(jiǎn)單地學(xué)習(xí)到 feTurbulence, feDisplacementMap 及 gsap 滾動(dòng)條動(dòng)畫。然而這只是一個(gè)基礎(chǔ)，通過這幾個(gè)工具可以實(shí)現(xiàn)更多更復(fù)雜精妙的效果，值得鉆研學(xué)習(xí)。
暫無評(píng)論，快來評(píng)論吧!