SVGAnimationElement: getStartTime() 方法

Baseline 已廣泛支援

此特性已相當成熟,可在許多裝置和瀏覽器版本上使用。自 ⁨2020 年 1 月⁩ 起,所有主流瀏覽器均已支援。

SVGAnimationElement 方法 getStartTime() 返回一個浮點數,表示此動畫元素的當前時間間隔的開始時間(以秒為單位),如果該時間間隔存在,則無論該時間間隔是否已經開始。

getStartTime() 返回的開始時間以秒為單位,相對於時間容器的零點時間。

零點時間指的是時間容器開始其時間線的那一刻。它充當該容器內所有動畫的起始參考點。

時間容器是一個元素或上下文,它為一項或多項動畫定義了一個本地時間線。時間容器內的動畫是相對於其時間線測量的。如果時間容器被延遲、暫停或操作,它內部的所有動畫都會相應調整。

此屬性反映了 <animate><animateMotion><animateTransform> 元素的 begin 屬性。

語法

js
getStartTime()

引數

無(undefined)。

返回值

浮點數。

異常

InvalidStateError DOMException

如果 SVGAnimationElement 沒有當前時間間隔,則會丟擲此異常。當動畫元素的 begin 時間尚未到達或定義時,就會發生這種情況,因此 getStartTime() 方法無法確定有效的開始時間。例如,當動畫設定為 begin="click" 時,但使用者尚未單擊以觸發它。

示例

此示例演示了 begin="3s" 屬性如何使動畫在時間容器時間線開始後 3 秒啟動。

html
<svg width="200" height="200" viewBox="0 0 200 200">
  <circle cx="50" cy="50" r="20" fill="rebeccapurple">
    <animate attributeName="cx" from="50" to="150" dur="5s" begin="3s" />
  </circle>
</svg>
js
const animationElement = document.querySelector("animate");

const startTime = animationElement.getStartTime();
console.log(
  `The animation starts at: ${startTime} seconds relative to the time container's timeline`,
); // Output: 3

getStartTime() 方法返回 3.0,因為這是相對於時間容器零點時間的。

規範

規範
SVG 動畫級別 2
# __svg__SVGAnimationElement__getStartTime

瀏覽器相容性