svg 動畫

案例

掘金markdown svg 動畫彷佛無法顯示 我描述一下效果就是下面這個圖案從中間向兩邊擴散參照 datav特效

實現原理

1. 先繪製靜態圖案

<svg width="300" height="40">
    <polyline fill="transparent" stroke-width="3"
      points="0,8 54,8 60,16 75,16 81,24 216,24 225,16 240,16 245.99999999999997,8 300,8" stroke="#3f96a5">
    </polyline>
    <polyline fill="transparent" stroke-width="2" points="90,32 210,32" stroke="#3f96a5">
    </polyline>
  </svg>
複製代碼

2. 添加動畫：
   • 使用到的標籤：<animate>
   • 使用到的屬性：stroke-dasharray
   • 原理：讓屬性stroke-dasharray從0 whidth/2 0 width/2 變成 0 0 width 0 因爲stroke-dasharray用於繪製虛線這個屬性變化能夠理解爲：內容（用於佔位）、空白、內容（這次案例實際的內容）、空白，而這個變化的過程就是將兩邊的空白逐漸被實際的內容替換那麼就是上面咱們實現的效果

<svg width="300" height="40">
    <polyline fill="transparent" stroke-width="3"
      points="0,8 54,8 60,16 75,16 81,24 216,24 225,16 240,16 245.99999999999997,8 300,8" stroke="#3f96a5">
      <animate attributeName="stroke-dasharray" attributeType="XML" from="0, 157.52079728939617, 0, 157.52079728939617"
        to="0, 0, 315.04159457879234, 0" dur="1.2s" begin="0s" calcMode="spline" keyTimes="0;1"
        keySplines="0.4,1,0.49,0.98" repeatCount="indefinite"></animate>
    </polyline>
    <polyline fill="transparent" stroke-width="2" points="90,32 210,32" stroke="#3f96a5">
      <animate attributeName="stroke-dasharray" attributeType="XML" from="0, 60, 0, 60" to="0, 0, 120, 0" dur="1.2s"
        begin="0s" calcMode="spline" keyTimes="0;1" keySplines=".4,1,.49,.98" repeatCount="indefinite"></animate>
    </polyline>
  </svg>
複製代碼