EffectTiming.easing - Web API 接口参考 编辑

这是一个实验中的功能
此功能某些浏览器尚在开发中，请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀。由于该功能对应的标准文档可能被重新修订，所以在未来版本的浏览器中该功能的语法和行为可能随之改变。

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

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

Syntax

var timingProperties = {
  easing: single-transition-timing-function
}

timingProperties.easing = single-transition-timing-function

Value

A string defining the timing function to use for easing transitions during the animation process. Accepts several pre-defined 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>)

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).

frames(<integer>)

Specifies a frames timing function, which breaks the animation down into a number of equal time intervals but also displays the start (0%) and end (100%) states for an equal amount of time to the other intervals. The browser flips to a different static frame when each interval is reached, rather than animating smoothly. See GitHub for a simple example that illustrates the difference between steps() and frames().

steps(<integer>[, [ start | end ] ]?)

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

Specification	Status	Comment
Web Animations easing	Working Draft	Editor's draft.

Browser compatibility

BCD tables only load in the browser

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.

See also

• Web Animations API
• Element.animate(), KeyframeEffect(), and AnimationEffect.updateTiming() all accept an object of timing properties including this one.
• The value of this property corresponds to the one in EffectTiming (which is returned from AnimationEffect.getTiming() and AnimationEffect.getComputedTiming()).
• CSS's animation-timing-function and transition-timing-function.