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);
}
}
複製程式碼
白色描邊動畫
白色描邊動畫除了在原先的環狀動畫+整體的旋轉之外，我們能看到它基於整體還有自己的一個旋轉，加上即可，顯得白色描邊速度比整體快，豐富了動畫的層次感。這樣整體的動畫效果就呈現出來啦。
