AnimationEffect: getTiming() 方法

Baseline 已广泛支持

此功能已经成熟,并可在许多设备和浏览器版本上使用。自 ⁨2020 年 3 月⁩起,它已在各浏览器中推出。

AnimationEffect 接口的 AnimationEffect.getTiming() 方法返回一个包含动画效果的时序属性的对象。

注意: getTiming() 返回的几个时序属性可能取占位值 "auto"。要获取用于时序计算的已解析值,请改用 AnimationEffect.getComputedTiming()

未来,"auto" 或类似值可能会添加到更多时序属性的类型中,并且 AnimationEffect 的新类型可能会将 "auto" 解析为不同的值。

语法

js
getTiming()

参数

无。

返回值

包含以下属性的对象:

delay

效果开始前的延迟(以毫秒为单位)的 number

(另请参阅 animation-delay。)

direction

"normal""reverse""alternate""alternate-reverse"

指示效果是向前播放 ("normal")、向后播放 ("reverse")、在每次迭代后切换方向 ("alternate") 还是向后播放并在每次迭代后切换方向 ("alternate-reverse")。

(另请参阅 animation-direction。)

duration

以毫秒为单位的 numberstring "auto"

指示动画的一次迭代完成所需的时间。

"auto" 的含义可能因效果类型而异;对于 KeyframeEffect"auto"0 相同。

(另请参阅 animation-duration。)

easing

一个 string,表示一个 <easing-function>,描述效果随时间的变化率。

(另请参阅 animation-timing-function。)

endDelay

效果结束后延迟的毫秒数 (number)。

这主要在基于另一动画的结束时间来排序动画时使用。

fill

"none""forwards""backwards""both""auto"

指示效果在播放前是否由其目标反映 ("backwards"),在效果完成后是否保留 ("forwards"),"both",或两者都不 ("none")。

"auto" 的含义可能因效果类型而异;对于 KeyframeEffect"auto""none" 相同。

(另请参阅 animation-fill-mode。)

iterations

效果将重复的次数 (number)。值为 Infinity 表示效果无限重复。

(另请参阅 animation-iteration-count。)

iterationStart

一个 number,指示效果在迭代的哪个点开始。例如,iterationStart 为 0.5 且 iterations 为 2 的效果将在第一次迭代的中间开始,并在第三次迭代的中间结束。

规范

规范
Web 动画
# dom-animationeffect-gettiming

浏览器兼容性

另见