SVG動畫應用-酷炫的圖片展現效果

偶然在svgTrick上看到了一個效果，模仿了一下。做者原先也是受到dribble上的一個動效啓發，這個效果與svg簡直是天做之合。

最後模擬的效果以下，gif有點卡頓，戳戳這裏查看網頁效果。

作一個酷炫的svg總體效果

咱們先看着動效分析一下，主要能夠將動畫分紅五部分。

• 中心圓從圓心開始消失
• 多個環狀進度動畫
• 環狀總體的旋轉動畫
• 白色描邊動畫
• 其餘文案動畫

一個個對照來看：

中心圓從圓心開始消失

這個效果的完成很簡單。只須要在畫面正中間畫一個svg，svg上是一個頂着邊的圓，由於svg的描邊是由中間向兩側描邊的，控制描邊的寬度從填滿到0就能夠實現咱們想要的效果啦。

這裏咱們畫的是一個半徑爲100的圓，也就是用描邊徹底填滿的寬度須要200。注意控制border-radius和overflow，使超出區域不可見。

<svg class="svg-center" viewBox="0 0 200 200">
    <path class="path-circle" d="M 0 100 A 50 50 1 0 1 200 100 A 50 50 1 0 1 0 100" stroke="#1e1e1e" fill="none" />
</svg>
複製代碼

.svg-center{
  border-radius: 50%;
  overflow: hidden;
  stroke-width: 200;
}
@keyframes svgCenter{
    0%{
        stroke-width: 200;
    }
    100%{
        stroke-width: 0;
    }
}
複製代碼

多個環狀進度動畫

這其實就是咱們常見的進度條動畫，雖然這個環看起來很粗，不像一條邊，可是實際上這也是一個經典的描邊動畫。

<svg class="svg" viewBox="0 0 1000 1000">
    <g class="wrap-path" fill="none" stroke="#1e1e1e" stroke-width="60">
      <path class="path-1" d="M 420 500 A 50 50 1 0 1 580 500 A 50 50 1 0 1 420 500"/>
    </g>
  </svg>
複製代碼

.path-1{
    stroke-dasharray: (80 * 3.15 * 2)  (80 * 3.15 * 2);
    animation: path1 1s both;
}
@keyfraes path1{
    0%{
        stroke-dashoffset: 0;
    }
    100%{
        stroke-dashoffset: (80 * 3.15 * 2);
    }
}
複製代碼

由於這裏的svg的viewBox一開始定義的是1000*1000,最後咱們會把它同比例放大兩倍處理，因此在原畫布中，中間須要鏤空出50半徑的圓形區域，另外仍是根據描邊是像兩側描邊的設定，因此實際上咱們畫的是一個半徑爲80的圓，描邊寬度爲60。

多個圓的狀況下由於須要獲得dasharray等值，一個個計算比較麻煩，能夠用scss函數進行編譯。對於scss函數編譯不熟悉的，推薦使用sassmeister這款在線編譯工具，能夠實時看到編譯結果。

$pathNums: 7 !default; 
$time: 1s !default;
$$cubic-bezier: cubic-bezier(0.77, 0, 0.175, 1);

@for $i from 1 through $pathNums {
    .path-#{$i} {
        stroke-dasharray: ((60 * $i + 20)  * 3.15 * 2)  ((60 * $i + 20)  * 3.15 * 2);
    }
    @if $i%2 == 0{
        $offsetType: 1;
    }@else {
        $offsetType: -1;
    }
    <!-- 動畫 -->
    @keyframes path#{$i}{
        0%{
            stroke-dashoffset: 0;
        }
        100%{
            stroke-dashoffset: ((60 * $i + 20)  * 3.15 * 2) * $offsetType;
        }
    }
}
.wrap-container.animation{
    @for $i from 1 through $pathNums {
        .path-#{$i} {
        animation: path#{$i} $time $cubic-bezier both;
    }
  }
}
複製代碼

原本打算把path路徑也經過函數的方式直接循環定義，可是由於scss編譯會自動在冒號後加空格，致使d:path()識別錯誤，因此這裏仍是直接在html中定義path。遇到複雜的路徑一樣可使用scss函數在線編譯，再複製到html中，減小人工計算的量和錯誤率。

環狀總體的旋轉動畫

這個利用css的transform:rotate()便可完成，咱們將多個環編組，從0旋轉90°便可。

<svg class="svg" viewBox="0 0 1000 1000">
    <g class="wrap-path" fill="none" stroke="#1e1e1e" stroke-width="60">
    </g>
</svg>
複製代碼

.wrap-path{
    animation: pathRotate 1s both;
}
@keyframes pathRotate {
    0%{
        transform: rotate(0);
    }
    100%{
        transform: rotate(90deg);
    }
}
複製代碼

白色描邊動畫

白色描邊動畫除了在原先的環狀動畫+總體的旋轉以外，咱們能看到它基於總體還有本身的一個旋轉，加上便可，顯得白色描邊速度比總體快，豐富了動畫的層次感。這樣總體的動畫效果就呈現出來啦。

其餘文案動畫

這裏暫時只加了一個背景中間文案的縮放動畫，形成一種視差錯覺。

菠蘿小結

1. 注意描邊的特色是從中間向兩側擴展；
2. 環形進度條動畫也是描邊動畫；
3. 同時運用多種效果/方向/速度，能夠豐富動畫的層次感。