recursal/MDN huggingface dataset:
StorageManager.persist()
========================

**安全上下文:** 此项功能仅在一些支持的浏览器的安全上下文（HTTPS）中可用。

**实验性:** **这是一项实验性技术**  
在将其用于生产之前，请仔细检查浏览器兼容性表格。

\*\*`persist()`\*\*方法是`StorageManager`的一个接口，用于请求本地数据存储的权限，如果被授予权限，则返回一个 resolved 状态值为`true`的`Promise`对象，否则返回`false`。

语法
--
```

navigator.storage.persist().then(function(persistent) { ... })
```

### 参数

无

### 返回值

一个 resolved 状态，值为`Boolean`类型的`Promise`对象。

示例
--


```js
if (navigator.storage && navigator.storage.persist)
  navigator.storage.persist().then(function (persistent) {
    if (persistent)
      console.log("Storage will not be cleared except by explicit user action");
    else
      console.log("Storage may be cleared by the UA under storage pressure.");
  });
```

规范
--

| Specification |
| --- |
| Storage Standard # ref-for-dom-storagemanager-persist |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
StorageManager.estimate()
=========================

**安全上下文:** 此项功能仅在一些支持的浏览器的安全上下文（HTTPS）中可用。

\*\*`estimate()`\*\*方法是`StorageManager`的一个接口，用于估算某一个域名（或一个站点）下 Storage Manager 的总存储空间和已经使用了的存储空间。此方法为一个异步方法，如果此方法可用，那么其返回一个结果为 resolved 的`Promise`对象。resolved 接收的参数是一个带有已使用数据存储空间和总可用总存储空间的`StorageEstimate`对象。

语法
--
```

var estimatePromise = StorageManager.estimate();
```

### 参数

无

### 返回值

`StorageEstimate`类型的状态为 resolved 的`Promise`
此数据包含了此应用（或域名）可用的存储空间（`StorageEstimate.quota` (en-US)）和目前已经使用了的存储空间（`StorageEstimate.usage` (en-US)）。

这些值不是明确的数字，在进行压缩，重复数据删除和出于安全原因起见进行了混淆之后，这个数据是不精确的。

你可能会发现不同的应用或站点分配的存储空间不同，具体取决于用户访问频率，和网站受欢迎程度等数据。

示例
--

在这个示例中，我们使用 estimate() 得到目前所使用的存储空间占全部存储空间的百分比。

### HTML


```html
<p>
  You're currently using about <span id="percent"> </span>% of your available
  storage.
</p>
```

### JavaScript


```js
navigator.storage.estimate().then(function (estimate) {
  document.getElementById("percent").innerHTML = (
    (estimate.usage / estimate.quota) \*
    100
  ).toFixed(2);
});
```

### 结果

规范
--

| Specification |
| --- |
| Storage Standard # ref-for-dom-storagemanager-estimate |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* Storage API
* `Storage`, the object returned by `Window.localStorage`
* `StorageManager`
* `navigator.storage` (en-US)
LockManager：query() 方法
======================

**安全上下文:** 此项功能仅在一些支持的浏览器的安全上下文（HTTPS）中可用。

`LockManager` 接口的 **`query()`** 方法返回一个 `Promise`，该对象兑现一个包含持有中的锁和请求中的锁的信息的对象。

**备注：** 此特性在 Web Worker 中可用

语法
--


```js
query()
```

### 参数

无。

### 返回值

一个 `Promise`，兑现一个包含 `LockManager` 状态快照的对象。该对象具有以下属性：

`held`

一个持有中的锁的 `LockInfo` 对象数组。

`pending`

一个请求中的锁的 `LockInfo` 对象数组。

`LockInfo` 对象可以具有以下属性：

`name`

请求锁时传递给 `LockManager.request()` 的名称。

`mode`

请求锁时传递给 `LockManager.request()` 的模式。该模式可以是 `"exclusive"` 或 `"shared"`。

`clientId`

调用 `LockManager.request()` 的上下文的唯一标识。该值与 `Client.id` 相同。

### 异常

此方法可能会返回一个被以下类型的 `DOMException` 之一拒绝的 promise：

`InvalidStateError` `DOMException`

如果当前环境的文档未完全激活，则抛出该异常。

`SecurityError` `DOMException`

如果无法获取当前环境的锁管理器，则抛出该异常。

示例
--


```js
const state = await navigator.locks.query();
for (const lock of state.held) {
  console.log(`持有中的锁：名称 ${lock.name}，模式 ${lock.mode}`);
}
for (const request of state.pending) {
  console.log(`请求中的锁：名称 ${request.name}，模式 ${request.mode}`);
}
```

规范
--

| Specification |
| --- |
| Web Locks API # api-lock-manager-query |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
AudioContext.createMediaElementSource()
=======================================

`AudioContext` 接口的 `createMediaElementSource()` 方法用于创建一个新的 `MediaElementAudioSourceNode` 对象，输入某个存在的 HTML `<audio>` or `<video>` 元素，对应的音频即可被播放或者修改。

为寻求更多关于媒体元素音频源节点的具体信息，请查阅 `MediaElementAudioSourceNode` 参考页。

语法
--


```js
var audioCtx = new AudioContext();
var source = audioCtx.createMediaElementSource(myMediaElement);
```

### 参数

`myMediaElement`

某个被期待被录入音频处理图修改的 `HTMLMediaElement` 对象。

### 返回值

一个 `MediaElementAudioSourceNode` 对象。

示例
--

该示例由 `<audio>` 元素，通过使用 `createMediaElementSource()` 方法，创建了一个音源，将其通过 `GainNode` 节点，输出到`AudioDestinationNode` 节点以播放。当鼠标指针移动时，`updatePage()` 函数被调用，该函数计算当前鼠标 Y 坐标与页面高度的比值，改变 `GainNode` 节点的值以调整音量。你就可以通过鼠标上下移动而改变音乐的音量了。

**备注：** 也可以浏览该示例的在线演示, 或者浏览源代码。


```js
var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
var myAudio = document.querySelector("audio");
var pre = document.querySelector("pre");
var myScript = document.querySelector("script");

pre.innerHTML = myScript.innerHTML;

// Create a MediaElementAudioSourceNode
// Feed the HTMLMediaElement into it
var source = audioCtx.createMediaElementSource(myAudio);

// Create a gain node
var gainNode = audioCtx.createGain();

// Create variables to store mouse pointer Y coordinate
// and HEIGHT of screen
var CurY;
var HEIGHT = window.innerHeight;

// Get new mouse pointer coordinates when mouse is moved
// then set new gain value

document.onmousemove = updatePage;

function updatePage(e) {
  CurY = window.Event
    ? e.pageY
    : event.clientY +
      (document.documentElement.scrollTop
        ? document.documentElement.scrollTop
        : document.body.scrollTop);

  gainNode.gain.value = CurY / HEIGHT;
}

// connect the AudioBufferSourceNode to the gainNode
// and the gainNode to the destination, so we can play the
// music and adjust the volume using the mouse cursor
source.connect(gainNode);
gainNode.connect(audioCtx.destination);
```


**备注：** 作为调用 `createMediaElementSource()` 的结果，`HTMLMediaElement` 的播放将会由 AudioContext 的音频处理图接管。所以对媒体进行播放/暂停等操作仍可通过 media API 与播放器面板来进行。

规范
--

| Specification |
| --- |
| Web Audio API # dom-audiocontext-createmediaelementsource |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* Using the Web Audio API (en-US)
AudioContext.suspend()
======================

`AudioContext` 接口的`suspend()` 方法暂停音频上下文对象中的进度，并暂时剥离进程对音频设备硬件的访问权限，减少 CPU 和电池的使用。当程序在一段时间内不会使用音频上下文对象时，这个方法对减少硬件资源占用是非常有用的。

若对`OfflineAudioContext` 调用此方法，将会抛出 `INVALID_STATE_ERR` 错误。

Syntax
------


```js
var audioCtx = new AudioContext();
audioCtx.suspend().then(function() { ... });
```

### Returns

A `Promise` that resolves with void. The promise is rejected if the context has already been closed.

Example
-------

The following snippet is taken from our AudioContext states demo (see it running live.) When the suspend/resume button is clicked, the `AudioContext.state` is queried — if it is `running`, `suspend()` is called; if it is `suspended`, `resume` is called. In each case, the text label of the button is updated as appropriate once the promise resolves.


```js
susresBtn.onclick = function () {
  if (audioCtx.state === "running") {
    audioCtx.suspend().then(function () {
      susresBtn.textContent = "Resume context";
    });
  } else if (audioCtx.state === "suspended") {
    audioCtx.resume().then(function () {
      susresBtn.textContent = "Suspend context";
    });
  }
};
```

Specifications
--------------

| Specification |
| --- |
| Web Audio API # dom-audiocontext-suspend |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* Using the Web Audio API (en-US)
* Web Audio API
AudioContext.resume()
=====================

`AudioContext` 的 `resume()` 方法，恢复之前暂停播放的音频。

如果在 `OfflineAudioContext` 上调用，会导致 `INVALID_STATE_ERR` 错误。

语法
--


```js
var audioCtx = new AudioContext();
audioCtx.resume().then(function() { ... });
```

### 结果

`Promise`成功的话返回空值，返回失败是因为 context 已经关闭了。

示例
--

下面的代码是 AudioContext states demo (see it running live) 的一部分。当点击暂停／恢复按钮的时候，需要`AudioContext.state`做判断：如果是运行状态，调用`suspend()`，如果是暂停状态，调用`resume()。每次点击事件成功后，按钮的文字也会随着变成对应的状态`。


```js
susresBtn.onclick = function () {
  if (audioCtx.state === "running") {
    audioCtx.suspend().then(function () {
      susresBtn.textContent = "Resume context";
    });
  } else if (audioCtx.state === "suspended") {
    audioCtx.resume().then(function () {
      susresBtn.textContent = "Suspend context";
    });
  }
};
```

规范
--

| Specification |
| --- |
| Web Audio API # dom-audiocontext-resume |

兼容性
---

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* Using the Web Audio API
* Web Audio API
AudioContext.createMediaStreamSource()
======================================

`AudioContext`接口的 `createMediaStreamSource()` 方法用于创建一个新的 `MediaStreamAudioSourceNode` 对象，需要传入一个媒体流对象 (MediaStream 对象)(可以从 `navigator.getUserMedia` 获得 MediaStream 对象实例), 然后来自 MediaStream 的音频就可以被播放和操作。

更多关于媒体流音频源 (media stream audio source nodes) 的细节，请参考`MediaStreamAudioSourceNode` 页面。

语法
--


```js
var audioCtx = new AudioContext();
var source = audioCtx.createMediaStreamSource(stream);
```

### 参数

stream

一个`MediaStream` 对象，把他传入一个音频处理器进行操作

### 返回

`MediaStreamAudioSourceNode`示例
--

本例中，我们从 `navigator.getUserMedia`获取媒体 (audio + video) 流，把它传入 `<video>`中播放，并把视频调成静音，然后把获取到的 audio 传入 `MediaStreamAudioSourceNode`。接下来我们把获取到的 audio 传入`BiquadFilterNode` (可以把声音转化为低音)，输出到 `AudioDestinationNode`.

`<video>` 元素下面滑动杆控制低音过滤器过滤的程度，滑动杆的值越大，低音更明显

**备注：** 你可以查看在线演示，或者查看源码。


```js
var pre = document.querySelector("pre");
var video = document.querySelector("video");
var myScript = document.querySelector("script");
var range = document.querySelector("input");

// getUserMedia 获取流
// 把流放入 MediaStreamAudioSourceNode
// 输出到 video 元素

if (navigator.mediaDevices) {
  console.log("getUserMedia supported.");
  navigator.mediaDevices
    .getUserMedia({ audio: true, video: true })
    .then(function (stream) {
      video.srcObject = stream;
      video.onloadedmetadata = function (e) {
        video.play();
        video.muted = true;
      };

      // 创建 MediaStreamAudioSourceNode
      // Feed the HTMLMediaElement into it
      var audioCtx = new AudioContext();
      var source = audioCtx.createMediaStreamSource(stream);

      // 创建二阶滤波器
      var biquadFilter = audioCtx.createBiquadFilter();
      biquadFilter.type = "lowshelf";
      biquadFilter.frequency.value = 1000;
      biquadFilter.gain.value = range.value;

      // 把 AudioBufferSourceNode 连接到 gainNode
      // gainNode 连接到目的地，所以我们可以播放
      // 音乐并用鼠标调节音量
      source.connect(biquadFilter);
      biquadFilter.connect(audioCtx.destination);

      // Get new mouse pointer coordinates when mouse is moved
      // then set new gain value

      range.oninput = function () {
        biquadFilter.gain.value = range.value;
      };
    })
    .catch(function (err) {
      console.log("The following gUM error occured: " + err);
    });
} else {
  console.log("getUserMedia not supported on your browser!");
}

// dump script to pre element

pre.innerHTML = myScript.innerHTML;
```


**备注：** **注意**: 调用`createMediaStreamSource()`, 来自于媒体流的音频回放将被重新传到 AudioContext 的处理器中。所以播放/暂停流仍然是可以通过 media 元素的 API 和自带的控制器控制。

规范
--

| Specification |
| --- |
| Web Audio API # dom-audiocontext-createmediastreamsource |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

查看更多
----

* Using the Web Audio API (en-US)
AudioContext()
==============

**实验性:** **这是一项实验性技术**  
在将其用于生产之前，请仔细检查浏览器兼容性表格。

**`AudioContext()`** 构造方法创建了一个新的 `AudioContext` 对象 它代表了一个由音频模块链接而成的音频处理图，每一个模块由 `AudioNode` 表示。

语法
--
```

var audioContext = new AudioContext(options)
```

### 参数

*options* 可选

Options 如下所示：

* `latencyHint`: 这个参数表示了重放的类型，参数是播放效果和资源消耗的一种权衡。可接受的值有 "balanced", "interactive" 和"playback"，默认值为 "interactive"。意思是 "平衡音频输出延迟和资源消耗", "提供最小的音频输出延迟最好没有干扰"和 "对比音频输出延迟，优先重放不被中断"。我们也可以用一个双精度的值来定义一个秒级的延迟数值做到更精确的控制。

规范
--

| Specification |
| --- |
| Web Audio API # dom-audiocontext-audiocontext |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
AudioContext.close()
====================

`AudioContext`的`close()`方法可以关闭 audio context，同时释放占用的所有系统资源。

关闭的 context 不能用来创建新节点，但可以解码音频数据，创建 buffer 等等

该函数不会自动释放所有用`AudioContext 创建的对象`，除非其他引用也都已经解除了。但是，它会强制释放所有可能阻止其他`AudioContexts 被创建或使用`的系统音频资源。挂起 audio context 中音频时间的进度，并停止对音频数据的处理。所有的 AudioContext 创建/阻塞资源都被释放后，返回的`Promise`才会被释放。如果在一个`OfflineAudioContext`上调用该方法，则会抛出`INVALID_STATE_ERR` 异常。

语法
--


```js
var audioCtx = new AudioContext();
audioCtx.close().then(function() { ... });
```

### 返回值

一个 resolve void 值得 `Promise`。

例子
--

下面这段代码是AudioContext states demo (直接运行) 中的，点击停止按钮调用`close()`。promise 释放后，回到初始状态。


```js
stopBtn.onclick = function () {
  audioCtx.close().then(function () {
    startBtn.removeAttribute("disabled");
    susresBtn.setAttribute("disabled", "disabled");
    stopBtn.setAttribute("disabled", "disabled");
  });
};
```

规范
--

| Specification |
| --- |
| Web Audio API # dom-audiocontext-close |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

另见
--

* Using the Web Audio API (en-US)
* Web Audio API
NetworkInformation.rtt
======================

**实验性:** **这是一项实验性技术**  
在将其用于生产之前，请仔细检查浏览器兼容性表格。

**NetworkInformation.rtt** 是一个只读属性，返回了当前连接下评估的往返时延（RTT, round-trip time），并保留该值为 25 千分秒的最接近的整数倍。该值基于最近使用中被监测的最近保持活跃连接的应用层上的 RTT 测量值。它排除了到私有地址空间的连接。如果没有最近的测量数据，该值就基于底层连接技术的属性。

**备注：** 此特性在 Web Worker 中可用

Syntax
------
```

rtt = NetworkInformation.rtt
```

### Return value

一个数字。

Specifications
--------------

| Specification |
| --- |
| Network Information API # dom-networkinformation-rtt |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
NetworkInformation.downlink
===========================

**实验性:** **这是一项实验性技术**  
在将其用于生产之前，请仔细检查浏览器兼容性表格。

**`downlink`** 是 `NetworkInformation` 接口的一个只读属性，返回以 Mb/s 为单位的有效带宽，并保留该值为 25kb/s 的最接近的整数倍。该值基于最近监测的保持活跃连接的应用层吞吐量，排除了到私有地址空间的连接。当缺少最近的带宽测量数据时，该属性由底层连接技术属性决定。

Syntax
------
```

var downLink = NetworkInformation.downlink
```

### Value

`double` 双精度浮点数。

Specifications
--------------

| Specification |
| --- |
| Network Information API # dom-networkinformation-downlink |

Browser Compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
NetworkInformation.saveData
===========================

**实验性:** **这是一项实验性技术**  
在将其用于生产之前，请仔细检查浏览器兼容性表格。

**`NetworkInformation.saveData`** 是 `NetworkInformation` 接口的只读属性，如果用户设备上设置了减少数据使用的选项时返回 `true` .

语法
--
```

var saveData = NetworkInformation.saveData;
```

### 返回值

A `Boolean`.

规范
--

| Specification |
| --- |
| Save Data API # dfn-savedata |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
Animation.Animation()
=====================

Baseline 2022
-------------

Newly availableSince September 2022, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Learn more
* See full compatibility
* Report feedback
**实验性:** **这是一项实验性技术**  
在将其用于生产之前，请仔细检查浏览器兼容性表格。

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

语法
--


```js
var animation = new Animation(effect, timeline);
```

### 参数

effect 可选

将`KeyframeEffect` (en-US)对象分配给动画。（在将来，其他类型的效果，如 SequenceEffects 或 GroupEffects 是可能被实现的，但现在，唯一的效果是 KeyframeEffect。）

timeline 可选

指定与动画关联的时间轴。（目前唯一可用的时间轴类型是`DocumentTimeline` (en-US)，但在将来我会有与手势或滚动相关联的时间轴。）默认为`Document.timeline`。这也可以设置为 null。

例子
--

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


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

规范
--

| Specification |
| --- |
| Web Animations # dom-animation-animation |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* Web Animations API
* `Animation`
Animation.id
============

Baseline 2022
-------------

Newly availableSince September 2022, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Learn more
* See full compatibility
* Report feedback
**实验性:** **这是一项实验性技术**  
在将其用于生产之前，请仔细检查浏览器兼容性表格。

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

获取与设置 `animation.id`
--------------------


```js
// 获取动画的 id
var animationsId = animation.id;

// 设置动画的 id
animation.id = "newId";
```

返回值
---

当该动画已被分配 id，返回一个 `DOMString`, 当该动画未被分配 id 则返回 null.

示例
--

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


```js
rabbitDownAnimation.effect.id = "rabbitGo";
```

规范
--

| Specification |
| --- |
| Web Animations # dom-animation-id |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* KeyframeEffect Interface (en-US)
* Web Animations API
* `Animation`
Animation.currentTime
=====================

Baseline 2022
-------------

Newly availableSince September 2022, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Learn more
* See full compatibility
* Report feedback
**实验性:** **这是一项实验性技术**  
在将其用于生产之前，请仔细检查浏览器兼容性表格。

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

如果动画缺少`timeline`，处于非活动状态或尚未播放，则当前时间返回值为 null。

语法
--
```

var currentTime = element.currentTime;
element.currentTime = someValue;
```

### 值

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

例子
--

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


```js
aliceChange.currentTime = aliceChange.effect.timing.duration / 2;
```


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


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

规范
--

| Specification |
| --- |
| Web Animations # dom-animation-currenttime |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* `Animation` for other methods and properties you can use to control web page animation.
* `Animation.startTime` (en-US) for the time an animation is scheduled to start.
* Web Animations API
Animation.finished
==================

Baseline 2022
-------------

Newly availableSince September 2022, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Learn more
* See full compatibility
* Report feedback
**实验性:** **这是一项实验性技术**  
在将其用于生产之前，请仔细检查浏览器兼容性表格。

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

**备注：** The Promise is replaced with a new (pending) Promise object every time the animation leaves the `finished` play state.

语法
--


```js
var animationsPromise = animation.finished;
```

### 值

一个 Promise 对象。

例子
--

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


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

规范
--

| Specification |
| --- |
| Web Animations # dom-animation-finished |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* KeyframeEffect Interface (en-US)
* Web Animations API
* `Animation`
Animation.play()
================

Baseline 2022
-------------

Newly availableSince September 2022, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Learn more
* See full compatibility
* Report feedback
**实验性:** **这是一项实验性技术**  
在将其用于生产之前，请仔细检查浏览器兼容性表格。

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

语法
--
```

animation.play();
```

### 参数

无。

### 返回值

`undefined`例子
--

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


```js
// 蛋糕拥有其自己的动画：
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);
```

标准
--

| Specification |
| --- |
| Web Animations # dom-animation-play |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

了解更多
----

* Web Animations API
* `Animation` for other methods and properties you can use to control web page animation.
* `Animation.pause()` (en-US) to pause an animation.
* `Animation.reverse()` (en-US) to play an animation backwards.
* `Animation.finish()` (en-US) to finish an animation.
* `Animation.cancel()` to cancel an animation.
Animation.oncancel
==================

Baseline 2022
-------------

Newly availableSince September 2022, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Learn more
* See full compatibility
* Report feedback
**实验性:** **这是一项实验性技术**  
在将其用于生产之前，请仔细检查浏览器兼容性表格。

Web Animations API 的 `Animation` 接口的 **`oncancel`** 属性是 `cancel` 事件的事件处理程序。

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

**备注：** 在新的动画中，创建一个新的初始的空闲动画不会触发 `cancel` 事件。

语法
--
```

var cancelHandler = Animation.oncancel;

Animation.oncancel = cancelHandler;
```

### 值

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

例子
--

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


```js
animation.oncancel = animation.effect.target.remove();
```

标准
--

| Specification |
| --- |
| Web Animations # dom-animation-oncancel |
| Web Animations # cancel-event |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* Web Animations API
* `Animation`
Animation.effect
================

Baseline 2022
-------------

Newly availableSince September 2022, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Learn more
* See full compatibility
* Report feedback
**实验性:** **这是一项实验性技术**  
在将其用于生产之前，请仔细检查浏览器兼容性表格。

Animation.effect 属性可以获取或设置动画的目标效果。目标效果可以是`KeyframeEffect` (en-US)对象或 null。

语法
--


```js
// 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);
```

### 值

`KeyframeEffect` (en-US) 对象或 null。

规范
--

| Specification |
| --- |
| Web Animations # dom-animation-effect |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* KeyframeEffect (en-US)
* Web Animations API
* `Animation`
Animation.cancel()
==================

Baseline 2022
-------------

Newly availableSince September 2022, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Learn more
* See full compatibility
* Report feedback
**实验性:** **这是一项实验性技术**  
在将其用于生产之前，请仔细检查浏览器兼容性表格。

`Animation` 接口的 Web 动画 API 的 **`cancel()`** 方法将清除此动画造成的所有 `KeyframeEffect` (en-US)，并中止其播放。

**备注：** 当一个动画被取消时，其 `startTime` (en-US) 和 `currentTime` 被设置为 null。

语法
--
```

Animation.cancel();
```

### 参数

无。

### 返回值

无。

### 异常

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

规范
--

| Specification |
| --- |
| Web Animations # dom-animation-cancel |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

相关内容
----

* Web Animations API
* `KeyframeEffect` (en-US)
* `Animation`
* `Animation.playState`
* `Animation.finished` returns the promise this action will reject if the animation's `playState` is not `"idle"`.