Skip to content

Commit

Permalink
convert to markdown for web/api zh-CN
Browse files Browse the repository at this point in the history
  • Loading branch information
@yin1999
yin1999 committed Aug 16, 2022
1 parent 69f8a35 commit c3d0b1f
Show file tree
Hide file tree
Showing 297 changed files with 28,225 additions and 29,471 deletions.
79 changes: 35 additions & 44 deletions files/zh-cn/web/api/analysernode/getfloatfrequencydata/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,52 +2,51 @@
title: AnalyserNode.getFloatFrequencyData()
slug: Web/API/AnalyserNode/getFloatFrequencyData
---
<p>{{ APIRef("Web Audio API") }}</p>
{{ APIRef("Web Audio API") }}

<div>
<p><strong><code>getFloatFrequencyData()</code></strong> 作为{{domxref("AnalyserNode")}} 接口的方法能将当前分析节点（AnalyserNode）的频率数据拷贝进一个 {{domxref("Float32Array")}} 数组对象。</p>
**`getFloatFrequencyData()`** 作为{{domxref("AnalyserNode")}} 接口的方法能将当前分析节点（AnalyserNode）的频率数据拷贝进一个 {{domxref("Float32Array")}} 数组对象。

<p>此数组表示的频率范围为 0 ~ 22050 Hz，每个元素表示对应频率上的信号分量强度，单位为分贝。</p>
此数组表示的频率范围为 0 \~ 22050 Hz，每个元素表示对应频率上的信号分量强度，单位为分贝。

<p>如果你需要更好的性能并且不太在意数据的精度，你可以使用 {{domxref("AnalyserNode.getByteFrequencyData()")}} 作为代替，这一接口使用 {{domxref("Uint8Array")}}来存储数据（对应的也是这个精度的格式）.</p>
</div>
如果你需要更好的性能并且不太在意数据的精度，你可以使用 {{domxref("AnalyserNode.getByteFrequencyData()")}} 作为代替，这一接口使用 {{domxref("Uint8Array")}}来存储数据（对应的也是这个精度的格式）.

<h2 id="语法">语法</h2>
## 语法

<pre class="syntaxbox">void <em>analyser</em>.getFloatFrequencyData(<em>array</em>);
</pre>
```
void analyser.getFloatFrequencyData(array);
```

<h3 id="参数">参数</h3>
### 参数

<dl>
<dt><code>array</code></dt>
<dd>你即将用于拷贝频域数据（frequency domain data）的 {{domxref("Float32Array")}} 数组。对于任何无声的样本，它的值应该是 <code>-<a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Infinity">Infinity</a></code>.<br>
如果这一数组的可容纳元素数少于该分析节点的{{domxref("AnalyserNode.frequencyBinCount")}}值，超出容量的数据元素将被舍弃。而如果容量多于需要，多余的数组元素将不会被操作。</dd>
</dl>
- `array`
- : 你即将用于拷贝频域数据（frequency domain data）的 {{domxref("Float32Array")}} 数组。对于任何无声的样本，它的值应该是 `-Infinity`.
如果这一数组的可容纳元素数少于该分析节点的{{domxref("AnalyserNode.frequencyBinCount")}}值，超出容量的数据元素将被舍弃。而如果容量多于需要，多余的数组元素将不会被操作。

<h3 id="返回值">返回值</h3>
### 返回值

<p>无返回值。</p>
无返回值。

<h2 id="示例">示例</h2>
## 示例

<pre class="brush: js">const audioCtx = new AudioContext();
```js
const audioCtx = new AudioContext();
const analyser = audioCtx.createAnalyser();
// Float32Array 的长度应该和 frequencyBinCount 相同
const myDataArray = new Float32Array(analyser.frequencyBinCount);
// 用 getFloatFrequencyData() 方法的返回数据填充 Float32Array 数组
analyser.getFloatFrequencyData(myDataArray);
</pre>
```

<h3 id="例：绘制一个频谱">例：绘制一个频谱</h3>
### 例：绘制一个频谱

<p>下面的示例展示了一个 {{domxref("AudioContext")}}对象连接 {{domxref("MediaElementAudioSourceNode")}}到<code>AnalyserNode 对象的基本用法（即用 AudioContext 将音频内容连接到分析节点，从而可以展开对音频数据的分析）</code>. 当音频播放时，我们使用 {{domxref("window.requestAnimationFrame()","requestAnimationFrame()")}}方法产生轮询从而不断地收集频率数据，进而在 {{htmlelement("canvas")}} 元素上绘制 winamp（windows 上的一款 MP3 播放软件）条形图风格的频谱。</p>
下面的示例展示了一个 {{domxref("AudioContext")}}对象连接 {{domxref("MediaElementAudioSourceNode")}}到`AnalyserNode 对象的基本用法（即用 AudioContext 将音频内容连接到分析节点，从而可以展开对音频数据的分析）`. 当音频播放时，我们使用 {{domxref("window.requestAnimationFrame()","requestAnimationFrame()")}}方法产生轮询从而不断地收集频率数据，进而在 {{htmlelement("canvas")}} 元素上绘制 winamp（windows 上的一款 MP3 播放软件）条形图风格的频谱。

<p>更多的应用示例和应用信息，可以参看我们 <a href="http://mdn.github.io/voice-change-o-matic-float-data/">Voice-change-O-matic-float-data</a> 示例 (在 <a href="https://github.com/mdn/voice-change-o-matic-float-data">source code</a> 同样有).</p>
更多的应用示例和应用信息，可以参看我们 [Voice-change-O-matic-float-data](http://mdn.github.io/voice-change-o-matic-float-data/) 示例 (在 [source code](https://github.com/mdn/voice-change-o-matic-float-data) 同样有).

<pre class="brush: html">&lt;!doctype html&gt;
&lt;body&gt;
&lt;script&gt;
```html
<!doctype html>
<body>
<script>
const audioCtx = new AudioContext();
//创建一个音频源
Expand All @@ -64,7 +63,7 @@ analyserNode.fftSize = 256;
const bufferLength = analyserNode.frequencyBinCount;
const dataArray = new Float32Array(bufferLength);
//设置音频节点网络（音频源-&gt;分析节点-&gt;输出）
//设置音频节点网络（音频源->分析节点->输出）
audioSourceNode.connect(analyserNode);
analyserNode.connect(audioCtx.destination);
Expand Down Expand Up @@ -94,7 +93,7 @@ function draw() {
//绘制频谱
const barWidth = (canvas.width / bufferLength) * 2.5;
let posX = 0;
for (let i = 0; i &lt; bufferLength; i++) {
for (let i = 0; i < bufferLength; i++) {
const barHeight = (dataArray[i] + 140) * 2;
canvasCtx.fillStyle = 'rgb(' + Math.floor(barHeight + 100) + ', 50, 50)';
canvasCtx.fillRect(posX, canvas.height - barHeight / 2, barWidth, barHeight / 2);
Expand All @@ -103,26 +102,18 @@ function draw() {
};
draw();
&lt;/script&gt;
&lt;/body&gt;</pre>

<dl>
</dl>
</script>
</body>
```

<h2 id="规范">规范</h2>
## 规范

{{Specifications}}

<h2 id="浏览器兼容性">浏览器兼容性</h2>

<div>

## 浏览器兼容性

<p>{{Compat("api.AnalyserNode.getFloatFrequencyData")}}</p>
</div>
{{Compat("api.AnalyserNode.getFloatFrequencyData")}}

<h2 id="See_also">See also</h2>
## See also

<ul>
<li><a href="/en-US/docs/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li>
</ul>
- [Using the Web Audio API](/zh-CN/docs/Web_Audio_API/Using_Web_Audio_API)
45 changes: 21 additions & 24 deletions files/zh-cn/web/api/animation/animation/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,43 +2,40 @@
title: Animation.Animation()
slug: Web/API/Animation/Animation
---
<p>{{ SeeCompatTable() }}{{ APIRef("Web Animations API") }}</p>
{{ SeeCompatTable() }}{{ APIRef("Web Animations API") }}

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

<h2 id="语法">语法</h2>
## 语法

<div class="syntaxbox">
<pre class="brush: js">var animation = new Animation(effect, timeline);</pre>
</div>
```js
var animation = new Animation(effect, timeline);
```

<h3 id="参数">参数</h3>
### 参数

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

<h2 id="例子">例子</h2>
## 例子

<p>在<a href="http://codepen.io/rachelnabors/pen/eJyWzm/?editors=0010">White Rabbit</a>示例中，Animation 构造函数用于使用文档时间轴为兔子创建关键帧动画：</p>
在[White Rabbit](http://codepen.io/rachelnabors/pen/eJyWzm/?editors=0010)示例中，Animation 构造函数用于使用文档时间轴为兔子创建关键帧动画：

<pre class="brush: js">var rabbitDownAnimation = new Animation(rabbitDownKeyframes, document.timeline);
</pre>
```js
var rabbitDownAnimation = new Animation(rabbitDownKeyframes, document.timeline);
```

<h2 id="规范">规范</h2>
## 规范

{{Specifications}}

<h2 id="浏览器支持">浏览器支持</h2>
## 浏览器支持

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

<h2 id="相关内容">相关内容</h2>
## 相关内容

<ul>
<li><a href="/en-US/docs/Web/API/Web_Animations_API">Web Animations API</a></li>
<li>{{domxref("Animation")}}</li>
</ul>
- [Web Animations API](/zh-CN/docs/Web/API/Web_Animations_API)
- {{domxref("Animation")}}
31 changes: 14 additions & 17 deletions files/zh-cn/web/api/animation/effect/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,37 +2,34 @@
title: Animation.effect
slug: Web/API/Animation/effect
---
<p>{{ SeeCompatTable() }} {{ APIRef("Web Animations API") }}</p>
{{ SeeCompatTable() }} {{ APIRef("Web Animations API") }}

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

<h2 id="语法">语法</h2>
## 语法

<div class="syntaxbox">
<pre class="brush: js">// Get an Animation object's target effect
```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);
</pre>
</div>
```

<h3 id="值">值</h3>
### 值

<p>{{domxref("KeyframeEffect")}} 对象或 null。</p>
{{domxref("KeyframeEffect")}} 对象或 null。

<h2 id="规范">规范</h2>
## 规范

{{Specifications}}

<h2 id="浏览器支持">浏览器支持</h2>
## 浏览器支持

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

<h2 id="相关内容">相关内容</h2>
## 相关内容

<ul>
<li><a href="/en-US/docs/Web/API/KeyframeEffect">KeyframeEffect</a></li>
<li><a href="/en-US/docs/Web/API/Web_Animations_API">Web Animations API</a></li>
<li>{{domxref("Animation")}}</li>
</ul>
- [KeyframeEffect](/zh-CN/docs/Web/API/KeyframeEffect)
- [Web Animations API](/zh-CN/docs/Web/API/Web_Animations_API)
- {{domxref("Animation")}}
45 changes: 21 additions & 24 deletions files/zh-cn/web/api/animation/finished/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,30 +2,28 @@
title: Animation.finished
slug: Web/API/Animation/finished
---
<p>{{ SeeCompatTable() }}{{ APIRef("Web Animations API") }}</p>
{{ SeeCompatTable() }}{{ APIRef("Web Animations API") }}

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

<div class="note">
<p><strong>Note</strong>: The Promise is replaced with a new (pending) Promise object every time the animation leaves the <code>finished</code> play state.</p>
</div>
> **备注：** The Promise is replaced with a new (pending) Promise object every time the animation leaves the `finished` play state.
<h2 id="语法">语法</h2>
## 语法

<div class="syntaxbox">
<pre class="brush: js">var animationsPromise = animation<em>.finished</em>;
</pre>
</div>
```js
var animationsPromise = animation.finished;
```

<h3 id="值">值</h3>
### 值

<p>一个 Promise 对象。</p>
一个 Promise 对象。

<h2 id="例子">例子</h2>
## 例子

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

<pre class="brush: js">Promise.all(
```js
Promise.all(
elem.getAnimations().map(
function(animation) {
return animation.finished
Expand All @@ -35,20 +33,19 @@ slug: Web/API/Animation/finished
function() {
return elem.remove();
}
);</pre>
);
```

<h2 id="规范">规范</h2>
## 规范

{{Specifications}}

<h2 id="浏览器支持">浏览器支持</h2>
## 浏览器支持

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

<h2 id="相关内容">相关内容</h2>
## 相关内容

<ul>
<li><a href="/en-US/docs/Web/API/KeyframeEffect">KeyframeEffect Interface</a></li>
<li><a href="/en-US/docs/Web/API/Web_Animations_API">Web Animations API</a></li>
<li>{{domxref("Animation")}}</li>
</ul>
- [KeyframeEffect Interface](/zh-CN/docs/Web/API/KeyframeEffect)
- [Web Animations API](/zh-CN/docs/Web/API/Web_Animations_API)
- {{domxref("Animation")}}
44 changes: 21 additions & 23 deletions files/zh-cn/web/api/animation/id/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,44 +2,42 @@
title: Animation.id
slug: Web/API/Animation/id
---
<p>{{ SeeCompatTable() }}{{ APIRef("Web Animations API") }}</p>
{{ SeeCompatTable() }}{{ APIRef("Web Animations API") }}

<p><a href="/en-US/docs/Web/API/Web_Animations_API">Web Animations API</a> 的 <code><strong>Animation</strong></code><strong><code>.id </code></strong>属性可返回或设置用于识别某个动画的唯一标识。</p>
[Web Animations API](/zh-CN/docs/Web/API/Web_Animations_API) 的 **`Animation.id`** 属性可返回或设置用于识别某个动画的唯一标识。

<h2 id="获取与设置_animation.id">获取与设置 <code>animation.<em>id</em></code></h2>
## 获取与设置 `animation.id`

<div class="syntaxbox">
<pre class="brush: js">// 获取动画的 id
var animationsId = animation.<em>id</em>;
```js
// 获取动画的 id
var animationsId = animation.id;

// 设置动画的 id
animation.<em>id</em> = "newId";
</pre>
</div>
animation.id = "newId";
```

<h2 id="返回值">返回值</h2>
## 返回值

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

<h2 id="示例">示例</h2>
## 示例

<p>在 <a href="http://codepen.io/rachelnabors/pen/eJyWzm?editors=0010">Follow the White Rabbit example</a> 这个例子里，你可以像下面的方式一样，为 <code>rabbitDownAnimation</code> 分配一个 id:</p>
在 [Follow the White Rabbit example](http://codepen.io/rachelnabors/pen/eJyWzm?editors=0010) 这个例子里，你可以像下面的方式一样，为 `rabbitDownAnimation` 分配一个 id:

<pre class="brush: js">rabbitDownAnimation.effect.<em>id</em> = "rabbitGo";
</pre>
```js
rabbitDownAnimation.effect.id = "rabbitGo";
```

<h2 id="规范">规范</h2>
## 规范

{{Specifications}}

<h2 id="浏览器支持">浏览器支持</h2>
## 浏览器支持

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

<h2 id="相关文档">相关文档</h2>
## 相关文档

<ul>
<li><a href="/en-US/docs/Web/API/KeyframeEffect">KeyframeEffect Interface</a></li>
<li><a href="/en-US/docs/Web/API/Web_Animations_API">Web Animations API</a></li>
<li>{{domxref("Animation")}}</li>
</ul>
- [KeyframeEffect Interface](/zh-CN/docs/Web/API/KeyframeEffect)
- [Web Animations API](/zh-CN/docs/Web/API/Web_Animations_API)
- {{domxref("Animation")}}
Loading

0 comments on commit c3d0b1f

Please sign in to comment.