MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-dev-survey

此页面上有脚本错误。虽然它是写给网站编辑,您可以在下面查看部分内容。

翻译正在进行中。

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

作为一个 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.

浏览器兼容性

{{ 兼容性列表 }}
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来禁用它。

参见

文档标签和贡献者

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