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/effecttiming/easing/index.html | 105 +++++++++++++++++++++ 1 file changed, 105 insertions(+) create mode 100644 files/zh-cn/web/api/effecttiming/easing/index.html (limited to 'files/zh-cn/web/api/effecttiming/easing') diff --git a/files/zh-cn/web/api/effecttiming/easing/index.html b/files/zh-cn/web/api/effecttiming/easing/index.html new file mode 100644 index 0000000000..0ee0bfea9f --- /dev/null +++ b/files/zh-cn/web/api/effecttiming/easing/index.html @@ -0,0 +1,105 @@ +--- +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

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