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 |
浏览器兼容性
加载中…