这篇翻译不完整。请帮忙从英语翻译这篇文章

这是一个实验中的功能
此功能某些浏览器尚在开发中,请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀。由于该功能对应的标准文档可能被重新修订,所以在未来版本的浏览器中该功能的语法和行为可能随之改变。

作为一个 Web Animations API 的属性,Animation.playState 能够返回并设置一个可枚举值来描述一个动画的回放状态。

这个属性只对CSS Animations 和 Transitions可读。

语法

var currentPlayState = Animation.playState;

Animation.playState = newState;

可能的值

idle
动画当前的时间是无法解析的,并且队列里没有处于等待执行的任务。
pending
动画将一直等到某些等待中的任务完成方会执行。
running
动画处于正在运行状态。
paused
动画中止,并且Animation.currentTime该项属性不会更新。
finished
动画已经达到某一临界点,并且Animation.currentTime该项属性不会更新。

实例

Growing/Shrinking Alice Game这个例子中, 玩家们可以凭Alice crying into a pool of tears结束游戏。出于性能原因,游戏里,眼泪只当可见之时才能运动。因此,这些泪滴必须在下面的情况下刚好暂停运动:

// 创建泪珠动画

tears.forEach(function(el) {  
  el.animate(
    tearsFalling, 
    {
      delay: getRandomMsRange(-1000, 1000), // 获取每一滴随机泪珠
      duration: getRandomMsRange(2000, 6000), // 获取每一滴随机泪珠
      iterations: Infinity,
      easing: "cubic-bezier(0.6, 0.04, 0.98, 0.335)"
    });
  el.playState = 'paused';
});


// 结尾需要现出时播放眼泪降落动画

tears.forEach(function(el) { 
  el.playState = 'playing'; 
});


// 暂停并重置正在哭泣时的泪滴动画

tears.forEach(function(el) {  
  el.playState = "paused";
  el.currentTime = 0;
});

规范

格式 状态 注解
Web Animations
playState
Working Draft Initial definition.

浏览器兼容性

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 39.0 [1] 48 (48)[2] 未实现 未实现 未实现
Feature Android Android Webview Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support 未实现 39.0 [1] 39.0 [1] 48.0 (48)[2] 未实现 未实现 未实现

[1] 在Chrome 50之前, idle 这项属性只用在还没开始的动画上,而在Chrome 50之后, 以 paused显示.

[2] 默认情况下,Web Animations API 只在Firefox Developer Edition 和 Nightly builds可用。您可以在测试版和公开版的设置里通过配置偏好来启用,将dom.animations-api.core.enabled 设为 true, 然后也可在任何版本的Firefox上通过设置为false来禁用它。

参见

文档标签和贡献者

此页面的贡献者: Ende93, Geolage
最后编辑者: Ende93,