From 959e43ae0f5daaa7402c2201f9d5465bf15d1ee1 Mon Sep 17 00:00:00 2001 From: "ester.zhou" Date: Mon, 8 Aug 2022 11:17:26 +0800 Subject: [PATCH] update js-components-common-animation.md (6545) Signed-off-by: ester.zhou --- .../js-components-common-animation.md | 484 +++--------------- 1 file changed, 85 insertions(+), 399 deletions(-) diff --git a/en/application-dev/reference/arkui-js/js-components-common-animation.md b/en/application-dev/reference/arkui-js/js-components-common-animation.md index 417c9af4ab..e64610107f 100644 --- a/en/application-dev/reference/arkui-js/js-components-common-animation.md +++ b/en/application-dev/reference/arkui-js/js-components-common-animation.md @@ -1,396 +1,81 @@ -# Animation Styles - -Components support dynamic rotation, translation, and scaling effects. These effects can be set in the **style** attribute or CSS files. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Type

-

Default Value

-

Description

-

transform-origin

-

string6+ | <percentage> | <length> string6+ | <percentage> | <length>

-

center center

-

Origin position of the transformed element. The unit can be px or a percentage (relative to the animation target component). If only one value is specified, the other one is 50%. The available values for the first string are left, center, and right. The available values for the second string are top, center, and bottom.

-

Example:

-

transform-origin: 200px 30%

-

transform-origin: 100px top

-

transform-origin: center center

-

transform

-

string

-

-

-

Translation, rotation, and scaling attributes.

-

For details, see Table 1.

-

animation6+

-

string

-

0s ease 0s 1 normal none running none

-

Animation attributes in the format of duration | timing-function | delay | iteration-count | direction | fill-mode | play-state | name. The order of the parameters is not specified, but the duration and delay parameters are parsed based on where they are placed.

-

animation-name

-

string

-

-

-

@keyframes rule. For details, see Table 2.

-

animation-delay

-

<time>

-

0

-

Delay for playing the animation, in ms or s, for example, 1000 ms or 1s. The default unit is ms.

-

animation-duration

-

<time>

-

0

-

Animation duration, in ms or s, for example, 1000 ms or 1s. The default unit is ms.

-
NOTE:

animation-duration must be specified. Otherwise, the duration is 0, which means the animation will not be played.

-
-

animation-iteration-count

-

number | infinite

-

1

-

Number of times that an animation is played. The animation is played once by default. You can set the value to infinite to play the animation infinitely.

-

animation-timing-function

-

string

-

ease

-

Speed curve of an animation, which makes the animation more fluent.

-

Available values are as follows:

-
  • linear: The animation speed keeps unchanged.
  • ease: The animation starts at a low speed and then accelerates. It slows down before the animation ends. cubic-bezier(0.25, 0.1, 0.25, 1.0)
  • ease-in: The animation starts at a low speed. cubic-bezier(0.42, 0.0, 1.0, 1.0)
  • ease-out: The animation ends at a low speed. cubic-bezier(0.0, 0.0, 0.58, 1.0)
  • ease-in-out: The animation starts and ends at a low speed. cubic-bezier(0.42, 0.0, 0.58, 1.0)
  • friction: Damping curve, cubic-bezier(0.2, 0.0, 0.2, 1.0)
  • extreme-deceleration: Extreme deceleration curve, cubic-bezier(0.0, 0.0, 0.0, 1.0) curve
  • sharp: Sharp curve, cubic-bezier(0.33, 0.0, 0.67, 1.0)
  • rhythm: Rhythm curve, cubic-bezier(0.7, 0.0, 0.2, 1.0)
  • smooth: Smooth curve, cubic-bezier(0.4, 0.0, 0.4, 1.0)
  • cubic-bezier: You can customize an animation speed curve in the cubic-bezier() function. The x and y values of each input parameter must be between 0 and 1.
  • steps: step curve 6+. Syntax: steps(number[, end|start]); The number parameter is mandatory. The value must be a positive integer. The second parameter is optional. It indicates that the start point or end point of each interval changes step by step. The value can be end or start. The default value is end.
-

animation-direction6+

-

string

-

normal

-

Mode of playing the animation.

-
  • normal: Plays the animation in forward loop mode.
  • reverse: Plays the animation in reverse loop mode.
  • alternate: Plays the animation in alternating loop mode. When the animation is played for an odd number of times, the playback is in forward direction. When the animation is played for an even number of times, the playback is in backward direction.
  • alternate-reverse: Plays the animation in reverse-alternating loop mode. When the animation is played for an odd number of times, the playback is in backward direction. When the animation is played for an even number of times, the playback is in forward direction.
-

animation-fill-mode

-

string

-

none

-

Start and end styles of the animation

-
  • none: No style is applied to the target before or after the animation is executed.
  • forwards: The target keeps the state at the end of the animation (defined in the last key frame) after the animation is executed.
  • backwards6+: The animation uses the value defined in the first key frame during the animation-delay. When animation-direction is set to normal or alternate, the value in the from key frame is used. When animation-direction is set to reverse or alternate-reverse, the value in the to key frame is used..
  • both6+: The animation follows the forwards and backwards rules.
-

animation-play-state6+

-

string

-

running

-

Current state of the animation.

-
  • paused: paused
  • running: playing
-

transition6+

-

string

-

all 0 ease 0

-

Transition effect when the component status is switched. The following four attributes can be set through the transition attribute:

-
  • transition-property: name of the CSS property for setting the transition effect. Currently, the width, height, and background color are supported.
  • transition-duration: duration required for completing the transition effect, in seconds.
  • transition-timing-function: time curve of the transition effect. The curve provided by the style animation is supported.
  • transition-delay: delay for starting the transition effect, in seconds.
-
- -**Table 1** Methods of the **transform** attribute - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Type

-

Description

-

none6+

-

-

-

No conversion is performed.

-

matrix6+

-

<number>

-

A matrix of six values, which represent scaleX, skewY, skewX, scaleY, translateX, translateY.

-

matrix3d6+

-

<number>

-

A 4x4 matrix of 16 values.

-

translate

-

<length>| <percent>

-

Moves an element along the x-axis and y-axis.

-

translate3d6+

-

<length>| <percent>

-

Three input parameters, indicating the translation distance of the x-axis, y-axis, and z-axis, respectively.

-

translateX

-

<length>| <percent>

-

Moves an element along the x-axis.

-

translateY

-

<length>| <percent>

-

Moves an element along the y-axis.

-

translateZ6+

-

<length>| <percent>

-

Translation distance of the z-axis

-

scale

-

<number>

-

Changes the size of an element. You need to set the target width and height on the x-axis and y-axis.

-

scale3d6+

-

<number>

-

Three input parameters, indicating the scale ratio of the x-axis, y-axis, and z-axis, respectively.

-

scaleX

-

<number>

-

Changes the element width.

-

scaleY

-

<number>

-

Changes the element height.

-

scaleZ6+

-

<number>

-

Scale ratio of the z-axis.

-

rotate

-

<deg> | <rad> | <grad>6+ | <turn>6+

-

Rotates an element. You can set the element to rotate around its x-axis or y-axis.

-

rotate3d6+

-

<deg> | <rad> | <grad> | <turn>

-

Four input parameters: The first three parameters are the rotation vectors of the x-axis, y-axis, and z-axis, and the fourth parameter is the rotation angle.

-

rotateX

-

<deg> | <rad> | <grad>6+ | <turn>6+

-

Rotates an element around the x-axis.

-

rotateY

-

<deg> | <rad> | <grad>6+ | <turn>6+

-

Rotates an element around the y-axis.

-

rotateZ6+

-

<deg> | <rad> | <grad> | <turn>

-

Rotation angle in the z-axis direction.

-

skew6+

-

<deg> | <rad> | <grad> | <turn>

-

Two input parameters, indicating the 2D skew angle of the x-axis and y-axis, respectively.

-

skewX6+

-

<deg> | <rad> | <grad> | <turn>

-

2D skew angle of the x-axis.

-

skewY6+

-

<deg> | <rad> | <grad> | <turn>

-

2D skew angle of the y-axis.

-

perspective6+

-

<number>

-

Distance from the lens to the element's surface in the 3D perspective scenario.

-
- -**Table 2** Attributes available for the @keyframes rule - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Type

-

Default Value

-

Description

-

background-color

-

<color>

-

-

-

Background color applied to the component after the animation is played.

-

opacity

-

number

-

1

-

Opacity value applied to the component after the animation is played. The value ranges from 0 to 1. The default value is 1.

-

width

-

<length>

-

-

-

Width value applied to the component after the animation is played.

-

height

-

<length>

-

-

-

Height value applied to the component after the animation is played.

-

transform

-

string

-

-

-

Transformation type applied to a component. For details, see Table 1.

-

background-position6+

-

string | <percentage> | <length> string | <percentage> | <length>

-

50% 50%

-

Set the background image for a window. The unit can be percentage or px. The first value indicates the horizontal position, and the second value indicates the vertical position. If only one value is specified, the other one is 50%. The available values for the first string are left, center, and right. The available values for the second string are top, center, and bottom.

-

Example:

-
  • background-position: 200px 30%
  • background-position: 100px top
  • background-position: center center
-
- -If there is no default value for when an animation will start or end, use **from** and **to** to specify the start and end of the display. You can use a percentage value to specify an intermediate state of the animation.6+ The following is an example: - -``` +# Animation Styles + +Components support dynamic rotation, translation, and scaling effects. These effects can be set in the **style** attribute or CSS files. + +> **NOTE** +> +> The initial APIs of this component are supported since API version 7. Newly added APIs will be marked with a superscript to indicate their earliest API version. + +| Name | Type | Default Value | Description | +| ------------------------- | ------------------------------------------------------------ | ------------------------------------- | ------------------------------------------------------------ | +| transform-origin | string6+ \| \ \| \ string6+ \| \ \| \ | center center | Origin position of the transformed element. The unit can be px or a percentage (relative to the animation target component). If only one value is specified, the other one is **50%**. The available values for the first string are **left**, **center**, and **right**. The available values for the second string are **top**, **center**, and **bottom**.
Example:
transform-origin: 200px 30%
transform-origin: 100px topt
ransform-origin: center center | +| transform | string | - | Translation, rotation, and scaling attributes.
For details, see **transform**. | +| animation6+ | string | 0s ease 0s 1 normal none running none | Animation attributes in the format of **duration \| timing-function \| delay \| iteration-count \| direction \| fill-mode \| play-state \| name**. The order of the parameters is not specified, but the **duration** and **delay** parameters are parsed based on where they are placed. | +| animation-name | string | - | @keyframes rule. For details, see **@keyframes**. | +| animation-delay | \