From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/zh-cn/web/api/animation/playstate/index.html | 156 +++++++++++++++++++++ 1 file changed, 156 insertions(+) create mode 100644 files/zh-cn/web/api/animation/playstate/index.html (limited to 'files/zh-cn/web/api/animation/playstate') diff --git a/files/zh-cn/web/api/animation/playstate/index.html b/files/zh-cn/web/api/animation/playstate/index.html new file mode 100644 index 0000000000..b3bedac354 --- /dev/null +++ b/files/zh-cn/web/api/animation/playstate/index.html @@ -0,0 +1,156 @@ +--- +title: Animation.playState +slug: Web/API/Animation/playState +tags: + - Animation + - animation api + - 动画 + - 运动状态 +translation_of: Web/API/Animation/playState +--- +

{{APIRef("Web Animations")}}{{SeeCompatTable}}

+ +

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

+ +
+

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

+
+ +

语法

+ +
var currentPlayState = Animation.playState;
+
+Animation.playState = newState;
+
+ +

可能的值

+ +
+
idle
+
动画当前的时间是无法解析的，并且队列里没有处于等待执行的任务。
+
pending
+
动画将一直等到某些等待中的任务完成方会执行。
+
running
+
动画处于正在运行状态。
+
paused
+
动画中止，并且{{domxref("Animation.currentTime")}}该项属性不会更新。
+
finished
+
动画已经达到某一临界点，并且{{domxref("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;
+});
+
+ +

规范

+ + + + + + + + + + + + + + +
格式状态注解
{{SpecName('Web Animations', '#play-state', 'playState')}}{{Spec2("Web Animations")}}Initial definition.
+ +

浏览器兼容性

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatChrome(39.0)}} [1]{{CompatGeckoDesktop(48)}}[2]{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatNo}}{{CompatChrome(39.0)}} [1]{{CompatChrome(39.0)}} [1]{{CompatGeckoMobile(48)}}[2]{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

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

+ +

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

+ +

参见

+ + -- cgit v1.2.3-54-g00ecf