抖音抖一抖-SVG和CSS視覺故障藝術小賞

時間 2019-11-10

標籤一抖 svg css 視覺故障藝術欄目 CSS 简体版

原文原文鏈接

故障藝術，英文名稱叫glitch，在不少賽博朋克做品中常常看到，其實就是故意表現一種顯示設備的小故障效果，抖音的圖標其實就是這種的效果，咱們看下這個圖標css

這個圖標中的紅色和藍色的偏移其實就是一種故障藝術，看到這個，我就能想到早年我家尚未有線電視時，搖天線對電視信號的場景，信號一差就是對着電視一陣拳打腳踢，如今看到這種藝術效果頗爲懷念。html

某甲：爲啥我沒遇到過這種場景？git

我：你把手裏的平板扔地上就能看到了。github

某甲：（土豪動做完成）我摔了，咋還沒看到呢svg

我：我就打個比方，你何須當真...函數

某甲：我必定要看到！動畫

我：要不你再跺幾腳...url

----------------------------------------我是打算開始的分割線------------------------------------------code

咱們先來實現一個動態的抖音故障效果，首先咱們要有一個乾淨的抖音圖標，我是從阿里巴巴矢量圖標庫找的，由於它家支持SVG格式，獲得的SVG代碼是這樣的。orm

<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的代碼裏面是沒有設置顏色的，圖片裏面的黑色是爲了讓你們看清楚。咱們先把白色，藍色和紅色的三層抖音圖標先顯示出來，代碼以下：

<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;
    }
/* 藍色 */
    .douyin1 {
      fill: #25f4ee;
    }
/* 紅色 */
    .douyin2 {
      fill: #fe2c55;
    }

分別填上了白色，紅色和藍色，在SVG裏面，後面的會覆蓋前面的，因此把白色放在最前面，由於如今三者的位置是重疊的，因此只能看到白色的。

咱們再設置白色的動畫效果

@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;
      }
    }

白色的動畫效果很小，由於我只作了一些輕微的傾斜效果，感受畫面在抖動，用的是 transform: skew(）。transform是css的一個屬性，主要設置的是變形效果，這邊用的skew是實現傾斜效果。另外還用opacity作了些透明度的處理，用來表現信號故障時的亮度變化。

咱們接着設置藍色圖標的動畫效果：

@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轉換，其實就是平移效果，能夠在橫向縱向作移動，咱們看抖音的圖標就知道，藍色部分是在白色圖標的左上方，因此設置的translate的值都是負數，這是左上方的平移。

紅色部分相似，只是translate的值都是正數，表示時右下方的平移。代碼以下：

@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;
      }
    }

最後，把動畫效果加到css類裏面去，以前的css代碼改爲這樣

.douyin {
      fill: #fff;

      /*Animation*/
      animation: glitch1 3s infinite;
    }

    .douyin1 {
      fill: #25f4ee;
      animation: glitch2 3s infinite;
    }

    .douyin2 {
      fill: #fe2c55;
      animation: glitch3 3s infinite;
    }

動畫效果設置成3秒，無限循環，最後的成品效果以下：

在線效果請移步codepen.io

---------------------------------------------還有高級效果的分割線----------------------------------------

上面實現的是模仿抖音官方圖標的動態效果，但做爲一個賽博朋克藝術家（是的，我都藝術家好幾個星期了），我以爲這個效果雖然很符合抖音的氣質，但離我想象中的高大上效果還有很大一段距離，我決定再加些效果，更加賽博朋克一些。

這裏我要用上一個負責的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>

這是一個組合的filter效果，具體的分工以下：

feTurbulence是利用Perlin噪聲函數建立了一個圖像。它實現了人造紋理好比說雲紋、大理石紋的合成，我以前作雲朵的時候用的就是它。這裏主要實現干擾信號的效果
feColorMatrix 基於轉換矩陣對顏色進行變換，在這裏能夠把白、藍、紅的顏色混合，在三種顏色疊加的地方產生一種顏色互相干擾的效果
feDisplacementMap 其實是一個位置替換濾鏡，就是改變元素和圖形的像素位置的。在這裏，針對抖音的圖標（SourceGraphic）和通過feColorMatrix /feTurbulence過濾器後的結果作位置變換，就等到了干擾效果的最終結果。

最後咱們把這個filter加到動畫效果裏面，咱們拿三個keyframe中的一個來看下代碼，其餘兩個是同樣的。

@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) 這一句就是調用svg filter的語句。注意每調用一次這個，在後面都會加上這一句