From df821208c608de1b7cdc6fe69ae28724ac1f01a0 Mon Sep 17 00:00:00 2001 From: MDN Date: Thu, 14 Oct 2021 00:47:38 +0000 Subject: [CRON] sync translated content --- files/zh-cn/web/api/effecttiming/easing/index.html | 105 -------------------- files/zh-cn/web/api/effecttiming/index.html | 78 --------------- .../api/keyframeeffect/keyframeeffect/index.html | 106 +++++++++++++++++++++ files/zh-cn/web/api/rtcconfiguration/index.html | 66 ------------- 4 files changed, 106 insertions(+), 249 deletions(-) delete mode 100644 files/zh-cn/web/api/effecttiming/easing/index.html delete mode 100644 files/zh-cn/web/api/effecttiming/index.html create mode 100644 files/zh-cn/web/api/keyframeeffect/keyframeeffect/index.html delete mode 100644 files/zh-cn/web/api/rtcconfiguration/index.html (limited to 'files/zh-cn/web/api') diff --git a/files/zh-cn/web/api/effecttiming/easing/index.html b/files/zh-cn/web/api/effecttiming/easing/index.html deleted file mode 100644 index 0ee0bfea9f..0000000000 --- a/files/zh-cn/web/api/effecttiming/easing/index.html +++ /dev/null @@ -1,105 +0,0 @@ ---- -title: EffectTiming.easing -slug: Web/API/EffectTiming/easing -translation_of: Web/API/EffectTiming/easing ---- -
{{ SeeCompatTable() }}{{ APIRef("Web Animations") }}
- -

这个{{domxref("EffectTiming")}} 词的 easing 属性在 Web Animations API 指定用于缩放时间以产生缓和效果的计时函数，easing 是动画随时间变化的速率。

- -
-

{{domxref("Element.animate()")}}, {{domxref("KeyframeEffectReadOnly.KeyframeEffectReadOnly", "KeyframeEffectReadOnly()")}}, and {{domxref("KeyframeEffect.KeyframeEffect", "KeyframeEffect()")}} all accept an object of timing properties including easing. The value of easing corresponds directly to {{domxref("AnimationEffectTimingReadOnly.easing")}} in {{domxref("AnimationEffectReadOnly.timing", "timing")}} objects returned by {{domxref("AnimationEffectReadOnly")}}, {{domxref("KeyframeEffectReadOnly")}}, and {{domxref("KeyframeEffect")}}.

-
- -

Syntax

- -
var timingProperties = {
-  easing: {{cssxref("single-transition-timing-function")}}
-}
-
-timingProperties.easing = {{cssxref("single-transition-timing-function")}}
-
- -

Value

- -

A string defining the timing function to use for easing transitions during the animation process. Accepts several pre-defined {{domxref("DOMString")}} values, a steps() timing function like steps(5, end), or a custom cubic-bezier value like cubic-bezier(0.42, 0, 0.58, 1). Defaults to linear. Available values include:

- -
-
linear
-
A constant rate of change, neither accelerating nor deccelerating. 
-
cubic-bezier(<number>, <number>, <number>, <number>)
-
A diagram showing the points of a cubic bezier timing function.
- Specifies a cubic Bézier timing function. The four numbers specify points P1 and P2 of the curve as (x1, y1, x2, y2). Both x values must be in the range [0, 1] or the definition is invalid.
-
ease
-
A decelerated rate of change, going from fast to slow. Equivalent to cubic-bezier(0.25, 0.1, 0.25, 1).
-
ease-in
-
An accelerated rate of change, going from slow to fast. Equivalent to cubic-bezier(0.42, 0, 1, 1).
-
ease-out
-
变化速率变慢了，从快到慢， 等价于cubic-bezier(0, 0, 0.58, 1).
-
ease-in-out
-
This rate of change speeds up in the middle. Equivalent to cubic-bezier(0.42, 0, 0.58, 1).
- - -
steps(<integer>[, [ start | end ] ]?)
-
A diagram of the various steps timing functions.
- Specifies a step timing function, which breaks the animation down into a number of equal time intervals. The browser flips to a different static frame when each interval is reached, rather than animating smoothly. The first parameter specifies the number of intervals in the function. It must be a positive integer (greater than 0). The second parameter, which is optional, specifies the point at which the change of values occur within the interval. If the second parameter is omitted, it is given the value end.
-
step-start
-
Equivalent to steps(1, start)
-
step-end
-
Equivalent to steps(1, end).
-
- -

Examples

- -

In the Red Queen's Race example, we animate Alice and the Red Queen by passing an easing of steps(7, end) to animate():

- -
// Define the key frames
-var spriteFrames = [
-  { transform: 'translateY(0)' },
-  { transform: 'translateY(-100%)' }
-];
-
-// Get the element that represents Alice and the Red Queen
-var redQueen_alice_sprite = document.getElementById('red-queen_and_alice_sprite');
-
-// Animate Alice and the Red Queen using steps()
-var redQueen_alice = redQueen_alice_sprite.animate(
-spriteFrames, {
-  easing: 'steps(7, end)',
-  direction: "reverse",
-  duration: 600,
-  playbackRate: 1,
-  iterations: Infinity
-});
- -

Specifications

- - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('Web Animations', '#time-transformations', 'easing' )}}{{Spec2('Web Animations')}}Editor's draft.
- -

Browser compatibility

- - - -

{{Compat("api.EffectTiming.easing", 2)}}

- -

See also

- - diff --git a/files/zh-cn/web/api/effecttiming/index.html b/files/zh-cn/web/api/effecttiming/index.html deleted file mode 100644 index f0b2b7c289..0000000000 --- a/files/zh-cn/web/api/effecttiming/index.html +++ /dev/null @@ -1,78 +0,0 @@ ---- -title: EffectTiming -slug: Web/API/EffectTiming -tags: - - API - - Animation - - Dictionary - - EffectTiming - - Experimental - - Interface - - KeyframeEffect - - NeedsTranslation - - Reference - - TopicStub - - Web Animations - - animate - - web animations api -translation_of: Web/API/EffectTiming ---- -
{{ SeeCompatTable() }}{{ APIRef("Web Animations") }}
- -

The EffectTiming dictionary, part of the Web Animations API, is used by {{domxref("Element.animate()")}}, {{domxref("KeyframeEffectReadOnly.KeyframeEffectReadOnly", "KeyframeEffectReadOnly()")}}, and {{domxref("KeyframeEffect.KeyframeEffect", "KeyframeEffect()")}} to describe timing properties for animation effects. These properties are all optional, although without setting a duration the animation will not play.

- -

Simply put, these properties describe how the {{Glossary("user agent")}} should go about making the transition from keyframe to keyframe, and how to behave when the animation begins and ends.

- -

Properties

- -
-
{{domxref("EffectTiming.delay", "delay")}} {{optional_inline}}
-
The number of milliseconds to delay the start of the animation. Defaults to 0.
-
{{domxref("EffectTiming.direction", "direction")}} {{optional_inline}}
-
Whether the animation runs forwards (normal), backwards (reverse), switches direction after each iteration (alternate), or runs backwards and switches direction after each iteration (alternate-reverse). Defaults to "normal".
-
{{domxref("EffectTiming.duration", "duration")}} {{optional_inline}}
-
The number of milliseconds each iteration of the animation takes to complete. Defaults to 0. Although this is technically optional, keep in mind that your animation will not run if this value is 0.
-
{{domxref("EffectTiming.easing", "easing")}} {{optional_inline}}
-
The rate of the animation's change over time. Accepts the pre-defined values "linear", "ease", "ease-in", "ease-out", and "ease-in-out", or a custom "cubic-bezier" value like "cubic-bezier(0.42, 0, 0.58, 1)". Defaults to "linear".
-
{{domxref("EffectTiming.endDelay", "endDelay")}} {{optional_inline}}
-
The number of milliseconds to delay after the end of an animation. This is primarily of use when sequencing animations based on the end time of another animation. Defaults to 0. 
-
{{domxref("EffectTiming.fill", "fill")}} {{optional_inline}}
-
Dictates whether the animation's effects should be reflected by the element(s) prior to playing ("backwards"), retained after the animation has completed playing ("forwards"), or both. Defaults to "none".
-
{{domxref("EffectTiming.iterationStart", "iterationStart")}} {{optional_inline}}
-
Describes at what point in the iteration the animation should start. 0.5 would indicate starting halfway through the first iteration for example, and with this value set, an animation with 2 iterations would end halfway through a third iteration. Defaults to 0.0.
-
{{domxref("EffectTiming.iterations", "iterations")}} {{optional_inline}}
-
The number of times the animation should repeat. Defaults to 1, and can also take a value of {{jsxref("Infinity")}} to make it repeat for as long as the element exists.
-
- -

Specifications

- - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('Web Animations', '#the-effecttiming-dictionaries', 'EffectTiming' )}}{{Spec2('Web Animations')}}Initial definition
- -

Browser compatibility

- - - -

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

- -

See also

- - diff --git a/files/zh-cn/web/api/keyframeeffect/keyframeeffect/index.html b/files/zh-cn/web/api/keyframeeffect/keyframeeffect/index.html new file mode 100644 index 0000000000..08c21a6791 --- /dev/null +++ b/files/zh-cn/web/api/keyframeeffect/keyframeeffect/index.html @@ -0,0 +1,106 @@ +--- +title: EffectTiming.easing +slug: Web/API/KeyframeEffect/KeyframeEffect +translation_of: Web/API/EffectTiming/easing +original_slug: Web/API/EffectTiming/easing +--- +
{{ SeeCompatTable() }}{{ APIRef("Web Animations") }}
+ +

这个{{domxref("EffectTiming")}} 词的 easing 属性在 Web Animations API 指定用于缩放时间以产生缓和效果的计时函数，easing 是动画随时间变化的速率。

+ +
+

{{domxref("Element.animate()")}}, {{domxref("KeyframeEffectReadOnly.KeyframeEffectReadOnly", "KeyframeEffectReadOnly()")}}, and {{domxref("KeyframeEffect.KeyframeEffect", "KeyframeEffect()")}} all accept an object of timing properties including easing. The value of easing corresponds directly to {{domxref("AnimationEffectTimingReadOnly.easing")}} in {{domxref("AnimationEffectReadOnly.timing", "timing")}} objects returned by {{domxref("AnimationEffectReadOnly")}}, {{domxref("KeyframeEffectReadOnly")}}, and {{domxref("KeyframeEffect")}}.

+
+ +

Syntax

+ +
var timingProperties = {
+  easing: {{cssxref("single-transition-timing-function")}}
+}
+
+timingProperties.easing = {{cssxref("single-transition-timing-function")}}
+
+ +

Value

+ +

A string defining the timing function to use for easing transitions during the animation process. Accepts several pre-defined {{domxref("DOMString")}} values, a steps() timing function like steps(5, end), or a custom cubic-bezier value like cubic-bezier(0.42, 0, 0.58, 1). Defaults to linear. Available values include:

+ +
+
linear
+
A constant rate of change, neither accelerating nor deccelerating. 
+
cubic-bezier(<number>, <number>, <number>, <number>)
+
A diagram showing the points of a cubic bezier timing function.
+ Specifies a cubic Bézier timing function. The four numbers specify points P1 and P2 of the curve as (x1, y1, x2, y2). Both x values must be in the range [0, 1] or the definition is invalid.
+
ease
+
A decelerated rate of change, going from fast to slow. Equivalent to cubic-bezier(0.25, 0.1, 0.25, 1).
+
ease-in
+
An accelerated rate of change, going from slow to fast. Equivalent to cubic-bezier(0.42, 0, 1, 1).
+
ease-out
+
变化速率变慢了，从快到慢， 等价于cubic-bezier(0, 0, 0.58, 1).
+
ease-in-out
+
This rate of change speeds up in the middle. Equivalent to cubic-bezier(0.42, 0, 0.58, 1).
+ + +
steps(<integer>[, [ start | end ] ]?)
+
A diagram of the various steps timing functions.
+ Specifies a step timing function, which breaks the animation down into a number of equal time intervals. The browser flips to a different static frame when each interval is reached, rather than animating smoothly. The first parameter specifies the number of intervals in the function. It must be a positive integer (greater than 0). The second parameter, which is optional, specifies the point at which the change of values occur within the interval. If the second parameter is omitted, it is given the value end.
+
step-start
+
Equivalent to steps(1, start)
+
step-end
+
Equivalent to steps(1, end).
+
+ +

Examples

+ +

In the Red Queen's Race example, we animate Alice and the Red Queen by passing an easing of steps(7, end) to animate():

+ +
// Define the key frames
+var spriteFrames = [
+  { transform: 'translateY(0)' },
+  { transform: 'translateY(-100%)' }
+];
+
+// Get the element that represents Alice and the Red Queen
+var redQueen_alice_sprite = document.getElementById('red-queen_and_alice_sprite');
+
+// Animate Alice and the Red Queen using steps()
+var redQueen_alice = redQueen_alice_sprite.animate(
+spriteFrames, {
+  easing: 'steps(7, end)',
+  direction: "reverse",
+  duration: 600,
+  playbackRate: 1,
+  iterations: Infinity
+});
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Web Animations', '#time-transformations', 'easing' )}}{{Spec2('Web Animations')}}Editor's draft.
+ +

Browser compatibility

+ + + +

{{Compat("api.EffectTiming.easing", 2)}}

+ +

See also

+ + diff --git a/files/zh-cn/web/api/rtcconfiguration/index.html b/files/zh-cn/web/api/rtcconfiguration/index.html deleted file mode 100644 index ace1a5c5b6..0000000000 --- a/files/zh-cn/web/api/rtcconfiguration/index.html +++ /dev/null @@ -1,66 +0,0 @@ ---- -title: RTCConfiguration -slug: Web/API/RTCConfiguration -translation_of: Web/API/RTCConfiguration ---- -

{{APIRef("WebRTC")}}{{draft}}

- -

The RTCConfiguration dictionary is used to provide configuration options for an {{domxref("RTCPeerConnection")}}. It may be passed into the constructor when instantiating a connection, or used with the {{domxref("RTCPeerConnection.getConfiguration()")}} and {{domxref("RTCPeerConnection.setConfiguration()")}} methods, which allow inspecting and changing the configuration while a connection is established.

- -

The options include ICE server and transport settings and identity information.

- -

Properties

- -
-
bundlePolicy {{optional_inline}}
-
Specifies how to handle negotiation of candidates when the remote peer is not compatible with the SDP BUNDLE standard. This must be one of the values from the enum RTCBundlePolicy. If this value isn't included in the dictionary, "balanced" is assumed.
-
certificates {{optional_inline}}
-
An {{jsxref("Array")}} of objects of type {{domxref("RTCCertificate")}} which are used by the connection for authentication. If this property isn't specified, a set of certificates is generated automatically for each {{domxref("RTCPeerConnection")}} instance. Although only one certificate is used by a given connection, providing certificates for multiple algorithms may improve the odds of successfully connecting in some circumstances. See {{anch("Using certificates")}} below for additional information. -
This configuration option cannot be changed after it is first specified; once the certificates have been set, this property is ignored in future calls to {{domxref("RTCPeerConnection.setConfiguration()")}}.
-
-
iceCandidatePoolSize {{optional_inline}}
-
一个16bit无符号整型值，代表预获取的ICE candidate pool的大小。 默认为 0 (意味着不会发生candidate的预获取)。在某些情况下，由于预获取了ICE candidate，在 {{domxref("RTCPeerConnection.setLocalDescription()")}} 被调用时，被预获取的candidate可被立刻检查，从而导致可以更快的建立连接。 -
改变 ICE candidate pool的大小将触发启动 ICE gathering。
-
-
iceServers {{optional_inline}}
-
An array of {{domxref("RTCIceServer")}} objects, each describing one server which may be used by the ICE agent; these are typically STUN and/or TURN servers. If this isn't specified, the ICE agent may choose to use its own ICE servers; otherwise, the connection attempt will be made with no STUN or TURN server available, which limits the connection to local peers.
-
iceTransportPolicy {{optional_inline}}
-
The current ICE transport policy; this must be one of the values from the RTCIceTransportPolicy enum. If this isn't specified, "all" is assumed.
-
peerIdentity {{optional_inline}}
-
A {{domxref("DOMString")}} which specifies the target peer identity for the {{domxref("RTCPeerConnection")}}. If this value is set (it defaults to null), the RTCPeerConnection will not connect to a remote peer unless it can successfully authenticate with the given name.
-
rtcpMuxPolicy {{optional_inline}}
-
The RTCP mux policy to use when gathering ICE candidates, in order to support non-multiplexed RTCP. The value must be one of those from the RTCRtcpMuxPolicy enum. The default is "require".
-
- -

Constants

- -

{{page("/en-US/docs/Web/API/RTCPeerConnection", "RTCBundlePolicy enum", 0, 1)}}

- -

{{page("/en-US/docs/Web/API/RTCPeerConnection", "RTCIceTransportPolicy enum", 0, 1)}}

- -

{{page("/en-US/docs/Web/API/RTCPeerConnection", "RTCRtcpMuxPolicy enum", 0, 1)}}

- -

Using certificates

- -

When you wish to provide your own certificates for use by an {{domxref("RTCPeerConnection")}} instead of having the RTCPeerConnection generate them automatically, you do so through calls to {{domxref("RTCPeerConnection.generateCertificate()")}}.

- -

This attribute supports providing multiple certificates because even though a given DTLS connection uses only one certificate, providing multiple certificates allows support for multiple encryption algorithms. The implementation of RTCPeerConnection will choose which certificate to use based on the algorithms it and the remote peer support, as determined during DTLS handshake.

- -

If you don't provide certificates, new ones are generated automatically. One obvious benefit to providing your own is identity key continuity—if you use the same certificate for subsequent calls, the remote peer can tell you're the same caller. This also avoids the cost of generating new keys.

- -

<<<link to added info on identity>>>

- -

Example

- -

The configuration below establishes two ICE servers. The first one, stun:stun.services.mozilla.com, requires authentication, so the username and password are provided. The second server has two URLs: stun:stun.example.com and stun:stun-1.example.com.

- -
var configuration = { iceServers: [{
-                          urls: "stun:stun.services.mozilla.com",
-                          username: "louis@mozilla.com",
-                          credential: "webrtcdemo"
-                      }, {
-                          urls: ["stun:stun.example.com", "stun:stun-1.example.com"]
-                      }]
-};
-
-var pc = new RTCPeerConnection(configuration);
-- cgit v1.2.3-54-g00ecf