animate

function

定义一个动画步骤，它把一些样式信息和时序信息组合在一起。

Defines an animation step that combines styling information with timing information.

      
      animate(timings: string | number, styles: AnimationStyleMetadata | AnimationKeyframesSequenceMetadata = null): AnimationAnimateMetadata

参数

timings

string | number

为父动画设置 AnimateTimings。它的字符串格式为 "持续时间 [延迟][缓动效果]"。

Sets AnimateTimings for the parent animation. A string in the format "duration [delay][easing]".

持续时间和延迟都用一个动画和一个可选的时间单位来表示，比如 "1s" 代表一秒，"10ms" 代表十毫秒。默认单位是毫秒。
Duration and delay are expressed as a number and optional time unit, such as "1s" or "10ms" for one second and 10 milliseconds, respectively. The default unit is milliseconds.
缓动效果的值控制该动画在运行期间如何加速和减速。它的取值是 ease、ease-in、ease-out、 ease-in-out 之一或一个 cubic-bezier() 函数调用。如果未提供，则没有缓动效果。
The easing value controls how the animation accelerates and decelerates during its runtime. Value is one of ease, ease-in, ease-out, ease-in-out, or a cubic-bezier() function call. If not supplied, no easing is applied.

比如，字符串 "1s 100ms ease-out" 指定了一个 1000 毫秒的持续时间，一个 100 毫秒的延迟和一个 "ease-out" 缓动效果，它会快结束时减速。

For example, the string "1s 100ms ease-out" specifies a duration of 1000 milliseconds, and delay of 100 ms, and the "ease-out" easing style, which decelerates near the end of the duration.

styles

AnimationStyleMetadata | AnimationKeyframesSequenceMetadata

为父动画设置动画样式。调用 style() 或 keyframes() 函数会返回要应用于父动画中的一组 CSS 样式，如果为 null，则使用目标状态中的样式，当描述一个某个动画的最后一步时，这很有用。参见 transitions() 中对"播放到最终状态"的说明。

Sets AnimationStyles for the parent animation. A function call to either style() or keyframes() that returns a collection of CSS style entries to be applied to the parent animation. When null, uses the styles from the destination state. This is useful when describing an animation step that will complete an animation; see "Animating to the final state" in transitions().

可选. 默认值是 null.

返回值

一个用于封装动画步骤的对象。

AnimationAnimateMetadata: An object that encapsulates the animation step.

使用说明

在一个 sequence()（动画序列）、group()（动画分组）或 transition()（转场动画）中调用本函数，以定义一个动画步骤，来把指定的样式数据在父动画上播放指定的时长。

Call within an animation sequence(), group(), or transition() call to specify an animation step that applies given style data to the parent animation for a given amount of time.

语法范例

Syntax Examples

时序范例

Timing examples

下面的例子展示了各种 timings（时序）规范。

The following examples show various timings specifications.

animate(500)：持续 500 毫秒。
animate(500) : Duration is 500 milliseconds.
animate("1s")：持续 1000 毫秒。
animate("1s") : Duration is 1000 milliseconds.
animate("100ms 0.5s")：持续 100 毫秒，延迟 500 毫秒。
animate("100ms 0.5s") : Duration is 100 milliseconds, delay is 500 milliseconds.
animate("5s ease-in")：持续 5000 毫秒，缓动进入（ease-in）。
animate("5s ease-in") : Duration is 5000 milliseconds, easing in.
animate("5s 10ms cubic-bezier(.17,.67,.88,.1)")：持续 5000 毫秒，延迟 10 毫秒，基于一条 Bezier 曲线进行缓动。
animate("5s 10ms cubic-bezier(.17,.67,.88,.1)") : Duration is 5000 milliseconds, delay is 10 milliseconds, easing according to a bezier curve.

样式范例

Style examples

下面的例子调用 style() 来设置单个的 CSS 样式。

The following example calls style() to set a single CSS style.

      
      animate(500, style({ background: "red" }))

下面的例子调用 keyframes() 来为各个相邻的关键帧分别设置 CSS 样式。

The following example calls keyframes() to set a CSS style to different values for successive keyframes.

      
      animate(500, keyframes(
 [
  style({ background: "blue" })),
  style({ background: "red" }))
 ])

参数

返回值

使用说明link

语法范例link

Syntax Exampleslink

使用说明

语法范例

Syntax Examples