介紹SVGAnimate動畫庫

一、SVGAnimate是什麼

SVGAnimate是一個輕量級的JavaScript庫，用於創建可擴展矢量圖形（SVG）動畫。SVGAnimate與其他動畫庫不同，因為它專註於SVG而不是HTML元素。

由於SVG是一種矢量圖形格式，因此它可以縮放無限大而不會失去清晰度。這使得SVG動畫非常適合在多個解析度和屏幕尺寸上顯示。

二、SVGAnimate的基本用法

對於大多數動畫任務，SVGAnimate只需要幾行代碼就可以創建一個簡單的動畫。以下是一個例子：

<svg width="300" height="200">
  <rect x="10" y="10" width="200" height="100">
    <animate attributeType="XML" attributeName="fill" from="red" to="yellow" dur="3s" repeatCount="indefinite"/>
  </rect>
</svg>

這個例子創建一個矩形，然後在3秒鐘內將其顏色從紅色轉變為黃色，並不斷重複這個過程。

在這個代碼塊中，我們使用SVG元素<rect>來創建一個矩形。然後使用動畫元素<animate>來指定顏色動畫。元素的屬性attributeName表示要進行動畫的屬性，repeatCount表示動畫的重複次數。重要的是要指定attributeType為XML，因為SVG是一種XML格式。

三、SVGAnimate的高級用法

SVGAnimate可以創建更複雜的動畫，例如路徑動畫、文本動畫和形狀動畫。以下是一個路徑動畫的例子：

<svg width="300" height="200">
  <path fill="none" stroke="black" stroke-width="3"
        d="M 10 100
           C 100 50, 200 150, 290 100">
     <animateMotion path="M 10 100
                           C 100 50, 200 150, 290 100
                           C 200 100, 100 0, 10 100 Z"
                     dur="5s"
                     begin="0s"
                     repeatCount="indefinite"/>
  </path>
</svg>

這個例子創建一個曲線路徑並在它上面移動一個球形物體。在這個代碼塊中，我們使用SVG元素<path>來創建一個曲線路徑，然後使用動畫元素<animateMotion>來使球形物體沿著路徑移動。

通過SVGAnimate的動畫效果，我們可以打造更加生動的頁面效果，讓頁面交互更加流暢和豐富。我們從SVGAnimate的基本使用和高級使用展示的例子，可以看出SVGAnimate可以達到的效果非常豐富，只需要稍微懂點代碼和設計思路即可打造出自己需要的效果。