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/animation/index.html | 106 ++++++++++++++ files/zh-cn/web/api/animation/cancel/index.html | 112 +++++++++++++++ .../zh-cn/web/api/animation/currenttime/index.html | 114 +++++++++++++++ files/zh-cn/web/api/animation/effect/index.html | 100 +++++++++++++ files/zh-cn/web/api/animation/finish/index.html | 97 +++++++++++++ files/zh-cn/web/api/animation/finished/index.html | 116 +++++++++++++++ files/zh-cn/web/api/animation/id/index.html | 109 ++++++++++++++ files/zh-cn/web/api/animation/index.html | 112 +++++++++++++++ files/zh-cn/web/api/animation/oncancel/index.html | 111 +++++++++++++++ files/zh-cn/web/api/animation/play/index.html | 91 ++++++++++++ files/zh-cn/web/api/animation/playstate/index.html | 156 +++++++++++++++++++++ 11 files changed, 1224 insertions(+) create mode 100644 files/zh-cn/web/api/animation/animation/index.html create mode 100644 files/zh-cn/web/api/animation/cancel/index.html create mode 100644 files/zh-cn/web/api/animation/currenttime/index.html create mode 100644 files/zh-cn/web/api/animation/effect/index.html create mode 100644 files/zh-cn/web/api/animation/finish/index.html create mode 100644 files/zh-cn/web/api/animation/finished/index.html create mode 100644 files/zh-cn/web/api/animation/id/index.html create mode 100644 files/zh-cn/web/api/animation/index.html create mode 100644 files/zh-cn/web/api/animation/oncancel/index.html create mode 100644 files/zh-cn/web/api/animation/play/index.html create mode 100644 files/zh-cn/web/api/animation/playstate/index.html (limited to 'files/zh-cn/web/api/animation') diff --git a/files/zh-cn/web/api/animation/animation/index.html b/files/zh-cn/web/api/animation/animation/index.html new file mode 100644 index 0000000000..178bd25fcb --- /dev/null +++ b/files/zh-cn/web/api/animation/animation/index.html @@ -0,0 +1,106 @@ +--- +title: Animation.Animation() +slug: Web/API/Animation/Animation +translation_of: Web/API/Animation/Animation +--- +

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

+ +

Animation构造函数返回一个新的Animation对象实例。

+ +

语法

+ +
+
var animation = new Animation(effect, timeline);
+
+ +

参数

+ +
+
effect {{optional_inline}}
+
将{{domxref("KeyframeEffect")}}对象分配给动画。（在将来，其他类型的效果，如SequenceEffects或GroupEffects是可能被实现的，但现在，唯一的效果是KeyframeEffect。）
+
timeline {{optional_inline}}
+
指定与动画关联的时间轴。 （目前唯一可用的时间轴类型是{{domxref("DocumentTimeline")}}，但在将来我会有与手势或滚动相关联的时间轴。）默认为{{domxref("Document.timeline")}}。 这也可以设置为null。
+
+ +

例子

+ +

在White Rabbit示例中，Animation构造函数用于使用文档时间轴为兔子创建关键帧动画：

+ +
var rabbitDownAnimation = new Animation(rabbitDownKeyframes, document.timeline);
+
+ +

规范

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Web Animations', '#dom-animation-animation', 'animation()' )}}{{Spec2('Web Animations')}}Editor's draft.
+ +

浏览器支持

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatNo}}{{CompatGeckoDesktop(48)}} [1]{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{CompatNo}}{{CompatGeckoMobile(48)}} [1]{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

[1]  {{domxref("KeyframeEffect")}} 和 {{domxref("DocumentTimeline")}} 接口目前在发行版本中是关闭的, 所以目前无法使用.

+ +

相关内容

+ + diff --git a/files/zh-cn/web/api/animation/cancel/index.html b/files/zh-cn/web/api/animation/cancel/index.html new file mode 100644 index 0000000000..768e63f5fe --- /dev/null +++ b/files/zh-cn/web/api/animation/cancel/index.html @@ -0,0 +1,112 @@ +--- +title: Animation.cancel() +slug: Web/API/Animation/cancel +tags: + - Animation.cancel() +translation_of: Web/API/Animation/cancel +--- +

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

+ +

{{domxref("Animation")}} 接口的 Web动画API的 cancel() 方法将清除此动画造成的所有{{domxref("KeyframeEffect")}} ,并中止其播放。.

+ +
+

当一个动画被取消时，其  {{domxref("Animation.startTime", "startTime")}}  和{{domxref("Animation.currentTime", "currentTime")}} 被设置为null。

+
+ +

语法

+ +
Animation.cancel();
+ +

参数

+ +

无.

+ +

返回值

+ +

无.

+ +

异常

+ +

这个方法不会直接抛出异常; 但是，如果动画的 {{domxref("Animation.playState", "playState")}} 取消时是除了“空闲”之外的任何东西，{{domxref("Animation.finished", "current finished promise", "", 1)}} 被拒绝与一个 {{domxref("DOMException")}} 命名的AbortError.

+ +
+
+ +

规范

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Web Animations', '#dom-animation-cancel', 'Animation.cancel()' )}}{{Spec2('Web Animations')}}Editor's draft.
+ +

浏览器兼容

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatChrome(39.0)}}{{CompatGeckoDesktop(48)}}[1]{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatGeckoMobile(48)}}[1]{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

[1] The Web Animations API is only enabled by default in Firefox Developer Edition and Nightly builds. You can enable it in beta and release builds by setting the preference dom.animations-api.core.enabled to true, and can disable it in any Firefox version by setting this preference to false.

+ +

相关内容

+ + diff --git a/files/zh-cn/web/api/animation/currenttime/index.html b/files/zh-cn/web/api/animation/currenttime/index.html new file mode 100644 index 0000000000..25c3ca441d --- /dev/null +++ b/files/zh-cn/web/api/animation/currenttime/index.html @@ -0,0 +1,114 @@ +--- +title: Animation.currentTime +slug: Web/API/Animation/currentTime +tags: + - 动画 +translation_of: Web/API/Animation/currentTime +--- +

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

+ +

Animation.currentTime属性返回或设置动画的当前时间值（以毫秒为单位），无论动画正在运行还是已暂停。

+ +

如果动画缺少{{domxref("AnimationTimeline", "timeline")}}，处于非活动状态或尚未播放，则当前时间返回值为null。

+ +

语法

+ +
var currentTime = element.currentTime;
+element.currentTime = someValue;
+ +

值

+ +

表示当前时间的数字（以毫秒为单位），或为null。

+ +

例子

+ +

在Drink Me/Eat Me game中，爱丽丝的高度是可变动的，所以它可以从小到大或从大到小。 在游戏开始时，通过将她的动画的currentTime设置为她的keyframeEffect的持续时间的一半让她的高度设置在两个极端之间：

+ +
aliceChange.currentTime = aliceChange.effect.timing.duration / 2;
+ +

寻求动画的50％标记的更通用的方法：

+ +
animation.currentTime =
+  animation.effect.getComputedTiming().delay +
+  animation.effect.getComputedTiming().activeDuration / 2;
+ +

规范

+ + + + + + + + + + + + + + +
规范状态说明
{{SpecName('Web Animations', '#dom-animation-currenttime', 'currentTime')}}{{Spec2("Web Animations")}} 
+ +

浏览器支持

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatChrome(39.0)}}{{CompatGeckoDesktop(48)}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewFirefox Mobile (Gecko)IE PhoneOpera MobileSafari MobileChrome for Android
Basic support{{CompatNo}}{{CompatChrome(39.0)}}{{CompatGeckoMobile(48)}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatChrome(39.0)}}
+
+ +

 

+ +

相关内容

+ + diff --git a/files/zh-cn/web/api/animation/effect/index.html b/files/zh-cn/web/api/animation/effect/index.html new file mode 100644 index 0000000000..4061f383e9 --- /dev/null +++ b/files/zh-cn/web/api/animation/effect/index.html @@ -0,0 +1,100 @@ +--- +title: Animation.effect +slug: Web/API/Animation/effect +translation_of: Web/API/Animation/effect +--- +

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

+ +

Animation.effect属性可以获取或设置动画的目标效果。 目标效果可以是{{domxref("KeyframeEffect")}}对象或null。

+ +

语法

+ +
+
// Get an Animation object's target effect
+var effect = animation.effect;
+
+// Set an Animation's target effect
+animation.effect = new KeyframeEffect({ opacity: [ 1, 0 ] }, 300);
+
+
+ +

值

+ +

{{domxref("KeyframeEffect")}}对象或null.

+ +

规范

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Web Animations', '#dom-animation-effect', 'Animation.effect' )}}{{Spec2('Web Animations')}}Editor's draft.
+ +

浏览器支持

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

 

+ +

相关内容

+ + diff --git a/files/zh-cn/web/api/animation/finish/index.html b/files/zh-cn/web/api/animation/finish/index.html new file mode 100644 index 0000000000..527c8f78ce --- /dev/null +++ b/files/zh-cn/web/api/animation/finish/index.html @@ -0,0 +1,97 @@ +--- +title: Animation.finish() +slug: Web/API/Animation/finish +tags: + - API + - Animation + - Finish + - Interface + - Methos + - Web Animations +translation_of: Web/API/Animation/finish +--- +

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

+ +
+

The finish() method of the Web Animations API's {{domxref("Animation")}} Interface sets the current playback time to the end of the animation corresponding to the current playback direction. That is, if the animation is playing forward, it sets the playback time to the length of the animation sequence, and if the animation is playing in reverse (having had its {{domxref("Animation.reverse", "reverse()")}} method called), it sets the playback time to 0.

+
+ +

语法

+ +
Animation.finish();
+ +

参数

+ +

None.

+ +

返回值

+ +

None.

+ +
+
+ +

异常

+ +
+
InvalidState
+
The player's playback rate is 0 or the animation's playback rate is greater than 0 and the end time of the animation is infinity.
+
+ +

例子

+ +

The following example shows how to use the finish() method and catch an InvalidState error.

+ +
interfaceElement.addEventListener("mousedown", function() {
+  try {
+    player.finish();
+  } catch(e if e instanceof InvalidState) {
+    console.log("finish() called on paused or finished animation.");
+  } catch(e);
+    logMyErrors(e); //pass exception object to error handler
+  }
+});
+
+ +

The following example finishes all the animations on a single element, regardless of their direction of playback.

+ +
elem.getAnimations().forEach(
+  function(animation){
+    return animation.finish();
+  }
+);
+
+ +

规范

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Web Animations', '#dom-animation-finish', 'finish()')}}{{Spec2("Web Animations")}} 
+ +

浏览器兼容性

+ +
+ + +

{{Compat("api.Animation.finish")}}

+
+ +

更多参考

+ + diff --git a/files/zh-cn/web/api/animation/finished/index.html b/files/zh-cn/web/api/animation/finished/index.html new file mode 100644 index 0000000000..b94e2d2d9b --- /dev/null +++ b/files/zh-cn/web/api/animation/finished/index.html @@ -0,0 +1,116 @@ +--- +title: Animation.finished +slug: Web/API/Animation/finished +translation_of: Web/API/Animation/finished +--- +

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

+ +

Animation.finished只读属性允许您返回动画的完成状态。

+ +
+

Note: The Promise is replaced with a new (pending) Promise object every time the animation leaves the finished play state.

+
+ +

语法

+ +
+
var animationsPromise = animation.finished;
+
+
+ +

值

+ +

一个Promise对象。

+ +

例子

+ +

以下代码会等到所有动画都完成，然后再移除它们处于活动状态的元素：

+ +
Promise.all(
+  elem.getAnimations().map(
+    function(animation) {
+      return animation.finished
+    }
+  )
+).then(
+  function() {
+    return elem.remove();
+  }
+);
+ +

规范

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Web Animations', '#dom-animation-finished', 'Animation.finished' )}}{{Spec2('Web Animations')}}Editor's draft.
+ +

浏览器支持

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

 

+ +

相关内容

+ + diff --git a/files/zh-cn/web/api/animation/id/index.html b/files/zh-cn/web/api/animation/id/index.html new file mode 100644 index 0000000000..29e267b854 --- /dev/null +++ b/files/zh-cn/web/api/animation/id/index.html @@ -0,0 +1,109 @@ +--- +title: Animation.id +slug: Web/API/Animation/id +tags: + - 动画 +translation_of: Web/API/Animation/id +--- +

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

+ +

Web Animations API 的 Animation.id 属性可返回或设置用于识别某个动画的唯一标识.

+ +

获取与设置 animation.id

+ +
+
// 获取动画的 id
+var animationsId = animation.id;
+
+// 设置动画的 id
+animation.id = "newId";
+
+
+ +

返回值

+ +

当该动画已被分配 id, 返回一个 {{domxref("DOMString")}}, 当该动画未被分配 id 则返回 null.

+ +

示例

+ +

在 Follow the White Rabbit example 这个例子里, 你可以像下面的方式一样,为 rabbitDownAnimation 分配一个 id:

+ +
rabbitDownAnimation.effect.id = "rabbitGo";
+
+ +

规范

+ + + + + + + + + + + + + + +
规范状态说明
{{SpecName('Web Animations', '#dom-animation-id', 'Animation.id' )}}{{Spec2('Web Animations')}}Editor's draft.
+ +

浏览器支持

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatChrome(39.0)}}{{CompatGeckoDesktop(48)}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatGeckoDesktop(48)}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

 

+ +

相关文档

+ + diff --git a/files/zh-cn/web/api/animation/index.html b/files/zh-cn/web/api/animation/index.html new file mode 100644 index 0000000000..0db1e9496b --- /dev/null +++ b/files/zh-cn/web/api/animation/index.html @@ -0,0 +1,112 @@ +--- +title: Animation +slug: Web/API/Animation +tags: + - Animation +translation_of: Web/API/Animation +--- +

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

+ +

Web 动画 API的动画接口表示一个单个动画播放器并且提供用于一个动画节点或源的回放控制和一个时间轴。

+ +

构造函数

+ +
+
{{domxref("Animation.Animation()", "Animation()")}}
+
创建一个新的Animation对象实例。
+
+ +

属性

+ +
+
{{domxref("Animation.currentTime")}}
+
动画的当前时间值（以毫秒为单位），无论是正在运行还是已暂停。 如果动画缺少{{domxref("AnimationTimeline", "timeline")}}或尚未播放，其值为null。
+
+ +
+
{{domxref("Animation.effect")}}
+
获取或设置与此动画相关联的{{domxref("KeyframeEffect")}}。
+
{{domxref("Animation.finished")}} {{readOnlyInline}}
+
返回此动画的当前完成的状态。
+
+ +
+
{{domxref("Animation.id")}}
+
获取或设置用于标识动画的字符串。
+
+ +
+
{{domxref("Animation.playState")}} {{readOnlyInline}}
+
返回描述动画播放状态的枚举值。
+
+ +
+
{{domxref("Animation.playbackRate")}}
+
返回或设置动画的播放速率。
+
+ +
+
{{domxref("Animation.ready")}} {{readOnlyInline}}
+
返回此动画的当前就绪状态。
+
{{domxref("Animation.startTime")}}
+
获取或设置动画播放应开始的预定时间。
+
{{domxref("Animation.timeline")}}
+
获取或设置与此动画相关联的{{domxref("AnimationTimeline", "timeline")}}。
+
+ +

 事件处理程序

+ +
+
{{domxref("Animation.oncancel")}}
+
获取并设置取消事件的事件处理程序。
+
{{domxref("Animation.onfinish")}}
+
获取并设置完成事件的事件处理程序。
+
+ +

方法

+ +
+
{{domxref("Animation.cancel()")}}
+
清除此动画的所有{{domxref("KeyframeEffect", "keyframeEffects")}}，并中止播放。
+
+ +
+
{{domxref("Animation.finish()")}}
+
设置动画中止播放。
+
+ +
+
{{domxref("Animation.pause()")}}
+
暂停播放动画。.
+
+ +
+
{{domxref("Animation.play()")}}
+
开始或恢复播放动画，或者如果之前完成，则重新开始动画。
+
+ +
+
{{domxref("Animation.reverse()")}}
+
反转播放动画，直到播放到动画开始时停止。 如果动画完成或未播放，它将从头到尾播放。
+
+ +

规范

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("Web Animations", "#the-animation-interface", "Animation")}}{{Spec2("Web Animations")}}Initial definition
+ +

浏览器兼容性

+ +
{{Compat("api.Animation")}}
diff --git a/files/zh-cn/web/api/animation/oncancel/index.html b/files/zh-cn/web/api/animation/oncancel/index.html new file mode 100644 index 0000000000..00e9b0fc98 --- /dev/null +++ b/files/zh-cn/web/api/animation/oncancel/index.html @@ -0,0 +1,111 @@ +--- +title: Animation.oncancel +slug: Web/API/Animation/oncancel +tags: + - API + - Animation +translation_of: Web/API/Animation/oncancel +--- +

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

+ +

Web Animations API 的 {{domxref("Animation")}} 接口的 oncancel 属性是 {{event("cancel")}} 事件的事件处理程序。

+ +

当动作从其他状态进入 "idle" 播放状态，例如当动画在结束播放后从元素中移除时，cancel 事件可以 {{domxref("Animation.cancel()")}} 被手动触发。 

+ +
+

在新的动画中，创建一个新的初始的空闲动画不会触发 {{event("cancel")}} 事件。

+
+ +

语法

+ +
var cancelHandler = Animation.oncancel;
+
+Animation.oncancel = cancelHandler;
+ +

值

+ +

当动画被取消时，这个函数将会被执行。默认是 null 。

+ +

例子

+ +

如果动画被取消，将会从元素中移除它。

+ +
animation.oncancel = animation.effect.target.remove();
+
+ +

标准

+ + + + + + + + + + + + + + +
标准状态备注
{{SpecName('Web Animations', '#dom-animation-oncancel', 'Animation.oncancel' )}}{{Spec2('Web Animations')}}编辑草案中。
+ +

浏览器兼容性

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
功能ChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
基础支持{{CompatChrome(39.0)}}{{CompatGeckoDesktop(48)}}[1]{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
功能AndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
基础支持{{CompatVersionUnknown}}{{CompatGeckoMobile(48)}}[1]{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

[1] Web Animations API 默认在 Firefox Developer Edition 和 Nightly builds 被启用。你可以在设置属性 dom.animations-api.core.enabled 为 true 时在 Beta 和 发行版 开启这个功能，你可以设置为 false 来禁用这个功能。

+ +

参见

+ + diff --git a/files/zh-cn/web/api/animation/play/index.html b/files/zh-cn/web/api/animation/play/index.html new file mode 100644 index 0000000000..4ff52dd3c6 --- /dev/null +++ b/files/zh-cn/web/api/animation/play/index.html @@ -0,0 +1,91 @@ +--- +title: Animation.play() +slug: Web/API/Animation/play +translation_of: Web/API/Animation/play +--- +
{{ APIRef("Web Animations") }}{{SeeCompatTable}}
+ +

Web Animations API的{{ domxref("Animation") }}接口中的play() 方法 可开始或恢复动画的播放. 如果动画结束，则调用play()重新启动动画，从头开始播放。

+ +

语法

+ +
animation.play();
+
+ +

参数

+ +

无.

+ +

返回值

+ +

{{jsxref("undefined")}}

+ +

例子

+ +

在 Growing/Shrinking Alice Game 示例中, 单击或点击蛋糕会导致Alice的增长动画 (aliceChange) 播放,导致她体型变大并触发蛋糕的动画。在以下示例中,使用了一个事件监听器来触发两者的动画:

+ +
// 蛋糕拥有其自己的动画:
+var nommingCake = document.getElementById('eat-me_sprite').animate(
+[
+  { transform: 'translateY(0)' },
+  { transform: 'translateY(-80%)' }
+], {
+  fill: 'forwards',
+  easing: 'steps(4, end)',
+  duration: aliceChange.effect.timing.duration / 2
+});
+
+// 暂停蛋糕的动画,以避免动画立即播放.
+nommingCake.pause();
+
+// 该函数会在用户点击时触发
+var growAlice = function() {
+
+  // Play Alice's animation.
+  aliceChange.play();
+
+  // Play the cake's animation.
+  nommingCake.play();
+
+}
+
+// 当用户持续按下或点击时, 调用 growAlice 函数使得所有的动画播放.
+cake.addEventListener("mousedown", growAlice, false);
+cake.addEventListener("touchstart", growAlice, false);
+
+ +

标准

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Web Animations', '#dom-animation-play', 'play()')}}{{Spec2("Web Animations")}}
+ +

浏览器兼容性

+ +
+ + +

{{Compat("api.Animation.play")}}

+
+ +

了解更多

+ + 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