SVGAnimationElement: getCurrentTime() 方法
SVGAnimationElement 方法 getCurrentTime() 返回一個浮點數,表示相對於給定時間容器的零時間的當前時間(以秒為單位)。
時間零點指時間容器開始其時間線的時刻。它充當該容器內所有動畫的起始參考點。
時間容器是定義一個或多個動畫的本地時間線的元素或上下文。時間容器內的動畫根據其時間線進行測量。如果時間容器被延遲、暫停或操作,其內部的所有動畫都會相應調整。
語法
js
getCurrentTime()
引數
無(undefined)。
返回值
浮點數。
示例
此示例演示了 getCurrentTime() 方法如何檢索自時間容器時間零點以來的經過時間。
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="4s"
repeatCount="indefinite" />
</circle>
</svg>
js
const animationElement = document.querySelector("animate");
setInterval(() => {
const currentTime = animationElement.getCurrentTime();
console.log(
`Current time relative to the time container: ${currentTime} seconds`,
);
}, 1000);
動畫從 時間零點 = 0 開始並無限期執行,並且 getCurrentTime() 值在時間容器的上下文中持續遞增。
規範
| 規範 |
|---|
| SVG 動畫級別 2 # __svg__SVGAnimationElement__getCurrentTime |
瀏覽器相容性
載入中…