【緊急筆記】用JavaScript控制 SMIL 動畫

by

用 JavaScript控制 SMIL 動畫（<animate>、<animateTransform>、<animateMotion> 等）

  • 根 SVG 元素方法（影響整個 SVG 文件的所有 SMIL 動畫）：
    • svgElement.pauseAnimations()：暫停所有 SMIL 動畫。
    • svgElement.unpauseAnimations()：從暫停位置恢復所有 SMIL 動畫。
    • svgElement.setCurrentTime(seconds)：將動畫時鐘設定到指定秒數（例如 setCurrentTime(0) 可重置到起始狀態）。
    • svgElement.animationsPaused()：檢查是否暫停（回傳 boolean）。
  • 單個動畫元素方法：
    • animationElement.beginElement()：立即開始（或重啟）該動畫。
    • animationElement.endElement()：立即結束該動畫。
    • animationElement.beginElementAt(offset) / endElementAt(offset)：延遲指定秒數後開始/結束。
  • 常見搭配：將 SMIL 的 begin="indefinite"，然後用 JS 呼叫 beginElement() 觸發。

Leave a Comment