SVG基本使用（四、動畫、動畫常用屬性、複合動畫/往返動畫/形變動畫/路徑動畫、腳本編程

一、動畫

• 1.SVG動畫
  在SVG中提供了三種常用動畫標記
  animate：基礎動畫
  animateTransform：形變動畫
  animateMotion：路徑動畫

• 2.SVG動畫屬性
  attributeType: CSS/XML 規定的屬性值的名稱空間
  attributeName: 規定元素的哪個屬性會產生動畫效果
  from/to: 從哪到哪
  dur: 動畫時長
  fill: 動畫結束之後的狀態 保持freeze結束狀態/remove恢復初始狀態（默認值）

• 3.SVG動畫使用方式
  3.1、創建動畫, 告訴動畫標記哪個元素需要執行動畫

   <svg width="500" height="500">
    <circle id="myCircle" cx="100" cy="100" r="50" fill="#7fd"></circle>
    <animate
        attributeName="r"
        from="50"
        to="100"
        dur="5s"
        xlink:href="#myCircle"
    ></animate>
</svg>

3.2、創建元素, 在元素中說明需要執行什麼動畫

   <svg width="500" height="500">
      <circle cx="100" cy="300" r="50" fill="#7fd">
       	 <animate attributeName="r" from="50" to="100" dur="5s" fill="freeze"></animate>
  	  </circle>
	</svg>

二、動畫常用屬性

SVG常用動畫屬性

• repeatCount：動畫重複執行次數

• repeatDur：動畫重複執行總時間

• begin：規定動畫開始的時間/什麼時間觸發了再執行動畫
  begin=“1s”：1s後開始執行動畫
  begin=“click”：click觸發事件執行了再執行動畫
  begin=“click + 1s”：點擊之後，等兩秒再執行動畫

• restart: 規定元素開始動畫之後，是否可以被重新開始執行
  always：動畫可以在任何時候被重置。這是默認值。
  whenNotActive：只有在動畫沒有被激活的時候才能被重置，例如在動畫結束之後，才能再執行。
  never：在整個SVG執行的過程中，元素動畫不能被重置。

• calcMode: 規定每一個動畫片段的動畫表現
  linear：默認屬性值, 勻速動畫
  discrete: 非連續動畫, 沒有動畫效果瞬間完成
  paced: 規定整個動畫效果始終以相同的速度進行，設置keyTimes屬性無效
  spline: 配合keySplines屬性來定義各個動畫過渡效, 自定義動畫

• keyTimes:
  劃分動畫時間片段, 取值0-1

• values:
  劃分對應取值片段的值

  更多: www.w3.org/TR/SVG/animate.html

<svg width="500" height="500">
    <circle cx="100" cy="100" r="50" fill="#7fd">
        <animate
                attributeName="r"
                from="50" to="100"
                dur="2s"
                fill="freeze"
                repeatCount="2"
                repeatDur="6s"
                begin="click+2s"
                calcMode="linear"
                keyTimes="0;0.5;1"
                values="10;50;20"
        ></animate>
    </circle>
</svg>

三、常用動畫

複合動畫：
一個元素的多個屬性執行動畫

<svg width="500" height="500">
    <circle cx="100" cy="100" r="50" fill="#7fd">
        <animate
                attributeName="r"
                from="50"
                to="100"
                dur="2s"
                fill="freeze"
                begin="click+1s"
        ></animate>
        <animate
                attributeName="fill"
                from="#afe"
                to="#f3c"
                dur="2s"
                fill="freeze"
                begin="click+1s"
        ></animate>
    </circle>
</svg>

往返動畫：
沿直線來回走
開始時，添加begin=“0;toLeft.end”：0表示第一次直接執行，toLeft.end表示之後的每一次toLeft這個動畫執行完畢後再執行。
返回時，添加begin=“toRight.end”：表示toRight這個動畫執行完畢後再執行。

<svg width="500" height="500">
    <circle cx="100" cy="100" r="50" fill="#7fd">
        <animate
                id="toRight"
                attributeName="cx"
                from="100"
                to="300"
                dur="2s"
                begin="0;toLeft.end"
                fill="freeze"
        ></animate>
        <animate
                id="toLeft"
                attributeName="cx"
                from="300"
                to="100"
                dur="2s"
                begin="toRight.end + 1s"
                fill="freeze"
        ></animate>
    </circle>

</svg>

形變動畫：
形變動畫注意點：
1.attributeName屬性的值永遠是transform
2.type屬性說明做什麼形變（平移、縮放、旋轉）

• 1.平移：from=“0 0” to=“100 0”，是座標系x往右平移了100

<svg width="500" height="500">
    <rect x="100" y="100" width="300" height="200" fill="#a4d">
        <animateTransform
            attributeName="transform"
            type="translate"
            from="0 0"
            to="100 0"
            dur="2s"
            begin="1s"
            fill="freeze"
        ></animateTransform>
    </rect>
</svg>

• 旋轉：from=“0” to=“45”，是整個座標系旋轉45度

<svg width="500" height="500">
   <rect x="100" y="100" width="300" height="200" fill="#a4d">
       <animateTransform
               attributeName="transform"
               type="rotate"
               from="0"
               to="45"
               dur="2s"
               begin="1s"
               fill="freeze"
       ></animateTransform>
   </rect>
</svg>

• 旋轉：from=“0 100 100” to=“45 100 100”，是以100 100爲原點旋轉45度

<svg width="500" height="500">
   <rect x="100" y="100" width="300" height="200" fill="#a4d">
   		<animateTransform
               attributeName="transform"
               type="rotate"
               from="0 100 100"
               to="45 100 100"
               dur="2s"
               begin="1s"
               fill="freeze"
      		 ></animateTransform>
   </rect>
</svg>

• 縮放 ：from=“1 1” to="0.5 1"寬度縮小一半

<svg width="500" height="500">
   <rect x="100" y="100" width="300" height="200" fill="#a4d">
   	 <animateTransform
               attributeName="transform"
               type="scale"
               from="1 1"
               to="0.5 1"
               dur="2s"
               begin="1s"
               fill="freeze"
       ></animateTransform>
   </rect>
</svg>

路徑動畫

• 路徑動畫：可以讓某一元素沿着某一路徑運動，使用animateMotion標籤
• 注意點：
  path屬性：指定元素按照哪一路徑執行。path中的M起點是相對於矩形位置的。
  rotate=“auto”:是動畫沿着路徑自動旋轉

本例：不按照path路徑執行，因爲path中的M起點是相對於矩形位置的

<svg width="500" height="500">
    <path d="M 100 100 C 100 300 300 300 300 100" stroke="#4a6" stroke-width="2" fill="none"></path>
    <rect x="100" y="100" width="40" height="40" fill="rgba(255,0,0,0.5)">
        <animateMotion
                path="M 100 100 C 100 300 300 300 300 100"
                dur="5s"
                begin="1s"
                fill="freeze"
        ></animateMotion>
    </rect>
    </rect>
</svg>

本例：正確執行

<svg width="500" height="500" viewBox="-100 -100 500 500">
    <path d="M 0 0 C 0 300 300 300 300 0" stroke="#4a6" stroke-width="2" fill="none"></path>
    <rect x="0" y="0" width="40" height="40" fill="rgba(255,0,0,0.5)">
        <animateMotion
                path="M 0 0 C 0 300 300 300 300 0"
                dur="5s"
                begin="1s"
                fill="freeze"
                rotate="auto"
        ></animateMotion>
    </rect>
</svg>