帶你看看 SVG 和 CSS 視覺故障藝術(shù)
故障藝術(shù)，英文名稱叫g(shù)litch，在很多賽博朋克作品中經(jīng)常看到，其實(shí)就是故意表現(xiàn)一種顯示設(shè)備的小故障效果，抖音的圖標(biāo)其實(shí)就是這種的效果，我們看下這個(gè)圖標(biāo):
這個(gè)圖標(biāo)中的紅色和藍(lán)色的偏移其實(shí)就是一種故障藝術(shù)，看到這個(gè)，我就能想到早年我家還沒有有線電視時(shí)，搖天線對(duì)電視信號(hào)的場(chǎng)景，信號(hào)一差就是對(duì)著電視一陣拳打腳踢，現(xiàn)在看到這種藝術(shù)效果頗為懷念。
某甲：為啥我沒遇到過這種場(chǎng)景？
我：你把手里的平板扔地上就能看到了。
某甲：（土豪動(dòng)作完成）我摔了，咋還沒看到呢
我：我就打個(gè)比方，你何必當(dāng)真...
某甲：我一定要看到！
我：要不你再跺幾腳...
開始
我們先來實(shí)現(xiàn)一個(gè)動(dòng)態(tài)的抖音故障效果，首先我們要有一個(gè)干凈的抖音圖標(biāo)，我是從阿里巴巴矢量圖標(biāo)庫[1]找的，因?yàn)樗抑С諷VG格式，得到的SVG代碼是這樣的。
<svg id="douyin" t="1570181112474" class="icon" viewBox="0 0 1024 1024" version="1.1"
xmlns="http://www.w3.org/2000/svg" p-id="2916" width="128" height="128">
<path
d="M937.386667 423.850667a387.84 387.84 0 0 1-232.874667-77.824v352.341333C704.512 878.250667 565.930667 1024 394.922667 1024S85.333333 878.250667 85.333333 698.368c0-179.882667 138.581333-325.632 309.589334-325.632 17.066667 0 33.706667 1.450667 49.92 4.266667v186.624a131.754667 131.754667 0 0 0-48.64-9.216c-76.288 0-138.154667 65.024-138.154667 145.322666 0 80.213333 61.866667 145.322667 138.24 145.322667 76.202667 0 138.069333-65.109333 138.069333-145.322667V0h172.714667c0 134.485333 103.68 243.541333 231.594667 243.541333v180.309334h-1.28"
p-id="2917"></path>
</svg>
看到的圖形是這樣子的
注意，在SVG的代碼里面是沒有設(shè)置顏色的，圖片里面的黑色是為了讓大家看清楚。我們先把白色，藍(lán)色和紅色的三層抖音圖標(biāo)先顯示出來，代碼如下：
<use xlink:href="#douyin" x="0%" y="10%" class="douyin1" />
<use xlink:href="#douyin" x="0%" y="10%" class="douyin2" />
<use xlink:href="#douyin" x="0%" y="10%" class="douyin" />
/* 白色 */
.douyin {
fill: #fff;
}
/* 藍(lán)色 */
.douyin1 {
fill: #25f4ee;
}
/* 紅色 */
.douyin2 {
fill: #fe2c55;
}
分別填上了白色，紅色和藍(lán)色，在SVG里面，后面的會(huì)覆蓋前面的，所以把白色放在最前面，因?yàn)楝F(xiàn)在三者的位置是重疊的，所以只能看到白色的。
我們?cè)僭O(shè)置白色的動(dòng)畫效果
@keyframes glitch1 {
0% {
transform: none;
opacity: 1;
}
7% {
transform: skew(-2.5deg, -0.9deg);
opacity: 0.75;
}
10% {
transform: none;
opacity: 1;
}
27% {
transform: none;
opacity: 1;
}
30% {
transform: skew(1.8deg, -0.1deg);
opacity: 0.75;
}
35% {
transform: none;
opacity: 1;
}
52% {
transform: none;
opacity: 1;
}
55% {
transform: skew(-1deg, 1.2deg);
opacity: 0.75;
}
60% {
transform: none;
opacity: 1;
}
72% {
transform: none;
opacity: 1;
}
75% {
transform: skew(0.4deg, -1deg);
opacity: 0.75;
}
80% {
transform: none;
opacity: 1;
}
100% {
transform: none;
opacity: 1;
}
}
白色的動(dòng)畫效果很小，因?yàn)槲抑蛔隽艘恍┹p微的傾斜效果，感覺畫面在抖動(dòng)，用的是 transform: skew(）。transform是css的一個(gè)屬性，主要設(shè)置的是變形效果，這邊用的skew是實(shí)現(xiàn)傾斜效果。另外還用opacity做了些透明度的處理，用來表現(xiàn)信號(hào)故障時(shí)的亮度變化。
我們接著設(shè)置藍(lán)色圖標(biāo)的動(dòng)畫效果：
@keyframes glitch2 {
0% {
transform: none;
opacity: 0.25;
}
7% {
transform: translate(-4px, -6px);
opacity: 0.5;
}
10% {
transform: none;
opacity: 0.25;
}
27% {
transform: none;
opacity: 0.25;
}
30% {
transform: translate(-7px, -4px);
opacity: 0.5;
}
35% {
transform: none;
opacity: 0.25;
}
52% {
transform: none;
opacity: 0.25;
}
55% {
transform: translate(-5px, -2px);
opacity: 0.5;
}
60% {
transform: none;
opacity: 0.25;
}
72% {
transform: none;
opacity: 0.25;
}
75% {
transform: translate(-4px, -6px);
opacity: 0.5;
}
80% {
transform: none;
opacity: 0.25;
}
100% {
transform: none;
opacity: 0.25;
}
}
這里同樣是使用transform變形，但用的效果是translate，官方的名稱是2D轉(zhuǎn)換，其實(shí)就是平移效果，可以在橫向縱向做移動(dòng)，我們看抖音的圖標(biāo)就知道，藍(lán)色部分是在白色圖標(biāo)的左上方，所以設(shè)置的translate的值都是負(fù)數(shù)，這是左上方的平移。
紅色部分類似，只是translate的值都是正數(shù)，表示時(shí)右下方的平移。代碼如下：
@keyframes glitch3 {
0% {
transform: none;
opacity: 0.25;
}
7% {
transform: translate(4px, 6px);
opacity: 0.5;
}
10% {
transform: none;
opacity: 0.25;
}
27% {
transform: none;
opacity: 0.25;
}
30% {
transform: translate(7px, 4px);
opacity: 0.5;
}
35% {
transform: none;
opacity: 0.25;
}
52% {
transform: none;
opacity: 0.25;
}
55% {
transform: translate(5px, 2px);
opacity: 0.5;
}
60% {
transform: none;
opacity: 0.25;
}
72% {
transform: none;
opacity: 0.25;
}
75% {
transform: translate(4px, 8px);
opacity: 0.5;
}
80% {
transform: none;
opacity: 0.25;
}
100% {
transform: none;
opacity: 0.25;
}
}
最后，把動(dòng)畫效果加到css類里面去，之前的css代碼改成這樣
.douyin {
fill: #fff;
/*Animation*/
animation: glitch1 3s infinite;
}
.douyin1 {
fill: #25f4ee;
animation: glitch2 3s infinite;
}
.douyin2 {
fill: #fe2c55;
animation: glitch3 3s infinite;
}
動(dòng)畫效果設(shè)置成3秒，無限循環(huán)，最后的成品效果如下：
在線效果請(qǐng)移步codepen.io[2]
優(yōu)化
上面實(shí)現(xiàn)的是模仿抖音官方圖標(biāo)的動(dòng)態(tài)效果，但作為一個(gè)賽博朋克藝術(shù)家（是的，我都藝術(shù)家好幾個(gè)星期了），我覺得這個(gè)效果雖然很符合抖音的氣質(zhì)，但離我想象中的高大上效果還有很大一段距離，我決定再加些效果，更加賽博朋克一些。
這里我要用上一個(gè)負(fù)責(zé)的svg的filter，代碼如下：
<filter id="filter">
<feTurbulence type="turbulence" baseFrequency="0.01 0.15" numOctaves="2" seed="5" stitchTiles="stitch"
result="turbulence" />
<feColorMatrix type="saturate" values="30" in="turbulence" result="colormatrix" />
<feColorMatrix type="matrix" values="1 0 0 0 0
0 1 0 0 0
0 0 1 0 0
0 0 0 150 -15" in="colormatrix" result="colormatrix1" />
<feDisplacementMap in="SourceGraphic" in2="colormatrix1" scale="10" xChannelSelector="R" yChannelSelector="A"
result="displacementMap" />
</filter>
這是一個(gè)組合的filter效果，具體的分工如下：
feTurbulence是利用Perlin噪聲函數(shù)創(chuàng)建了一個(gè)圖像。它實(shí)現(xiàn)了人造紋理比如說云紋、大理石紋的合成，我之前做云朵的時(shí)候用的就是它。這里主要實(shí)現(xiàn)干擾信號(hào)的效果 feColorMatrix 基于轉(zhuǎn)換矩陣對(duì)顏色進(jìn)行變換，在這里可以把白、藍(lán)、紅的顏色混合，在三種顏色疊加的地方產(chǎn)生一種顏色互相干擾的效果 feDisplacementMap 實(shí)際上是一個(gè)位置替換濾鏡，就是改變?cè)睾蛨D形的像素位置的。在這里，針對(duì)抖音的圖標(biāo)（SourceGraphic）和經(jīng)過feColorMatrix /feTurbulence過濾器后的結(jié)果做位置變換，就等到了干擾效果的最終結(jié)果。
最后我們把這個(gè)filter加到動(dòng)畫效果里面，我們拿三個(gè)keyframe中的一個(gè)來看下代碼，其他兩個(gè)是一樣的。
@keyframes glitch1 {
0% {
transform: none;
opacity: 1;
}
7% {
transform: skew(-2.5deg, -0.9deg);
filter: url(#filter);
opacity: 0.75;
}
8% {
filter: none;
}
10% {
transform: none;
opacity: 1;
}
27% {
transform: none;
opacity: 1;
}
30% {
transform: skew(1.8deg, -0.1deg);
filter: url(#filter);
opacity: 0.75;
}
31% {
filter: none;
}
35% {
transform: none;
opacity: 1;
}
52% {
transform: none;
opacity: 1;
}
55% {
transform: skew(-1deg, 1.2deg);
filter: url(#filter);
opacity: 0.75;
}
56% {
filter: none;
}
60% {
transform: none;
opacity: 1;
}
72% {
transform: none;
opacity: 1;
}
75% {
transform: skew(0.4deg, -1deg);
filter: url(#filter);
opacity: 0.75;
}
76% {
filter: none;
}
80% {
transform: none;
opacity: 1;
}
100% {
transform: none;
opacity: 1;
}
}
filter: url(#filter) 這一句就是調(diào)用svg filter的語句。注意每調(diào)用一次這個(gè)，在后面都會(huì)加上這一句
31% {
filter: none;
}
這是為了讓filter效果瞬間出現(xiàn)，瞬間消失，使得故障效果更加逼真。最終看到的效果如下：
在線效果請(qǐng)看codepen.io[3]
源代碼請(qǐng)看這里[4]
參考資料
阿里巴巴矢量圖標(biāo)庫: https://link.zhihu.com/?target=https%3A//www.iconfont.cn/
[2]codepen.io: https://link.zhihu.com/?target=https%3A//codepen.io/wphmoon/pen/PoooLva
[3]codepen.io: https://link.zhihu.com/?target=https%3A//codepen.io/wphmoon/pen/WNNNmBP
[4]這里: https://link.zhihu.com/?target=https%3A//github.com/wphmoon/cloud