用code打造本身的過渡動畫

起源

本身的過渡動畫，爲何要這個東西呢？不是說好的Simple is beautiful麼。的確我也是很是欣賞簡潔的東西，可是對於掛載在Github上的本博客，在國內訪問老是不那麼流暢，而Next主題的文字下落動畫偏偏使博客訪問體驗變的很是糟糕（感受訪問變得更慢了）。因此本喵決定打造本身的過渡動畫。

借鑑

在兩三個月前記得訪問過一個我的博客，過渡動畫很是驚豔，但當時並無時間詳細琢磨實現細節。現在正好借鑑一番，通過一番Google，仍是本喵找到了（可是做者的博客好像沒有維護了，沒法訪問），好在也是依託Github pages 掛載的博客，直接把源碼下載下來進行研究。

地址： https://github.com/ceoimon/ce...

實現細節

動畫並不是純css實現而是使用了SVG + CSS

可縮放矢量圖形（英語：Scalable Vector Graphics，SVG）是一種基於可擴展標記語言（XML），用於描述二維矢量圖形的圖形格式。 SVG由W3C制定，是一個開放標準。
既然是矢量圖，它的縮放就不會失真，由於表示方法是基於數學的表示，而不是像素點。動畫中的筆畫便是基於SVG中path標籤中的數據前後順序。

#mySVG path {
  stroke: #000;
  stroke-width: 2px;
  stroke-dasharray: 11434;
  stroke-dashoffset: 11456;
  -webkit-animation: dash 5s linear infinite;
  animation: dash 5s linear infinite;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
/*   -webkit-transition:fill 0.5s 1s linear;
  transition:fill 0.5s 1s linear;*/
}
@-webkit-keyframes dash {
  10% {
    stroke-dashoffset: 11456;
  }
  70% {
    stroke-dashoffset: 0;
    fill: transparent;
  }
  80% {
    stroke-dashoffset: 0;
    fill: #000;
  }
  95% {
    stroke-dashoffset: 11456;
    fill: #000;
  }
  100% {
    stroke-dashoffset: 11456;
    fill: transparent;
  }
}

不過當我理解了這svg兩個屬性(stroke-dasharray，stroke-dashoffset)後，仍是很是震驚於這個動畫的實現原理。

stroke-dasharray屬性可控制用來描邊的點劃線的圖案範式。

MDN給出的示例：

<?xml version="1.0"?>
<svg width="200" height="200" viewPort="0 0 200 300" version="1.1" xmlns="http://www.w3.org/2000/svg">

    <line stroke-dasharray="5, 5"              x1="10" y1="10" x2="190" y2="10" />
    <line stroke-dasharray="5, 10"             x1="10" y1="30" x2="190" y2="30" />
    <line stroke-dasharray="10, 5"             x1="10" y1="50" x2="190" y2="50" />
    <line stroke-dasharray="5, 1"              x1="10" y1="70" x2="190" y2="70" />
    <line stroke-dasharray="1, 5"              x1="10" y1="90" x2="190" y2="90" />
    <line stroke-dasharray="0.9"               x1="10" y1="110" x2="190" y2="110" />
    <line stroke-dasharray="15, 10, 5"         x1="10" y1="130" x2="190" y2="130" />
    <line stroke-dasharray="15, 10, 5, 10"     x1="10" y1="150" x2="190" y2="150" />
    <line stroke-dasharray="15, 10, 5, 10, 15" x1="10" y1="170" x2="190" y2="170" />
    <line stroke-dasharray="5, 5, 1, 5"        x1="10" y1="190" x2="190" y2="190" />
<style><![CDATA[
line{
    stroke: black;
    stroke-width: 2;
}
]]></style>
</svg>

stroke-dashoffset屬性指定了dash模式到路徑開始的距離

經過CSS修改這兩個屬性，動畫的邊界就相應的動起來了。

個人實現

個人素材：

使用 AI 獲得 SVG，最終效果：

GeekCat體驗