diff --git a/en/application-dev/reference/apis/js-apis-animator.md b/en/application-dev/reference/apis/js-apis-animator.md index d3fbcfa4e05459bfb3bad3964d5cb30eec215a56..462e56f7d18c0df2661e1ce1944bce0d159fcffe 100644 --- a/en/application-dev/reference/apis/js-apis-animator.md +++ b/en/application-dev/reference/apis/js-apis-animator.md @@ -1,9 +1,9 @@ -# Animation +# Animation -> **NOTE:**
-> The initial APIs of this module are supported since API version 6. Newly added APIs will be marked with a superscript to indicate their earliest API version. +>![](../../public_sys-resources/icon-note.gif) **NOTE:** +>The initial APIs of this module are supported since API version 6. Newly added APIs will be marked with a superscript to indicate their earliest API version. -## Modules to Import +## Modules to Import **requestAnimationFrame**: none @@ -15,67 +15,29 @@ import animator from '@ohos.animator'; ``` -## Required Permissions +## Required Permissions None -## requestAnimationFrame +## requestAnimationFrame requestAnimationFrame\(handler\[, \[ ...args\]\]\): number Requests an animation frame. -- Parameters +- Parameters - - - - - - - - - - - - - - - - - - -

Name

-

Type

-

Mandatory

-

Description

-

handler

-

Function

-

Yes

-

Handler used to request a frame. When requestAnimationFrame calls the handler, the timestamp is passed to the first parameter to indicate the time when requestAnimationFrame starts to execute the callback.

-

...args

-

Array<any>

-

No

-

Additional parameter, which is passed to the handler as a parameter during function callback.

-
+ | Name | Type | Mandatory | Description | + | ------- | ----------- | --------- | ------------------------------------------------------------ | + | handler | Function | Yes | Handler used to request a frame. When **requestAnimationFrame** calls the **handler**, the timestamp is passed to the first parameter to indicate the time when **requestAnimationFrame** starts to execute the callback. | + | ...args | Array\ | No | Additional parameter, which is passed to the **handler** as a parameter during function callback. | - Return values - - - - - - - - - -

Type

-

Description

-

number

-

Request ID.

-
- + | Type | Description | + | ------ | ----------- | + | number | Request ID. | + - Example ``` @@ -125,7 +87,7 @@ Requests an animation frame. ``` -## cancelAnimationFrame +## cancelAnimationFrame cancelAnimationFrame\(requestId: number\): void @@ -133,29 +95,10 @@ Cancels the animation frame request. - Parameters - - - - - - - - - - - - - -

Name

-

Type

-

Mandatory

-

Description

-

requestId

-

number

-

Yes

-

ID of the frame request.

-
- + | Name | Type | Mandatory | Description | +| --------- | ------ | --------- | ------------------------ | + | requestId | number | Yes | ID of the frame request. | + - Example ``` @@ -209,224 +152,52 @@ Cancels the animation frame request. ``` -## createAnimator +## createAnimator createAnimator\(options\[...\]\): void Creates an animation object. -- Parameters +- Parameters + + | Name | Type | Mandatory | Description | + | ------- | ------ | --------- | ------------------------------------------------------------ | + | options | Object | Yes | Attributes of the **Animator** to be created. For details, see the options table. | - - - - - - - - - - - - - -

Name

-

Type

-

Mandatory

-

Description

-

options

-

Object

-

Yes

-

Attributes of the Animator to be created. For details, see the options table.

-
- -- Description of options - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Type

-

Mandatory

-

Description

-

duration

-

number

-

No

-

Duration for playing an animation, in milliseconds. The default value is 0.

-

easing

-

string

-

No

-

Animation easing curve. The default value is ease.

-

delay

-

number

-

No

-

Animation delay duration, in milliseconds. The default value is 0, indicating that there is no delay.

-

fill

-

string

-

No

-

Animation start/stop mode. The default value is none. For details, see animation-fill-mode.

-

direction

-

string

-

No

-

Animation playback mode. The default value is normal. For details, see animation-direction.

-

iterations

-

number

-

No

-

Number of times that an animation is played. The default value is 1. If this parameter is set to 0, the animation is not played. If this parameter is set to -1, the animation is played for an unlimited number of times.

-

begin

-

number

-

No

-

Start point of the animation easing. If this parameter is not set, the default value 0 is used.

-

end

-

number

-

No

-

End point of the animation easing. If this parameter is not set, the default value 1 is used.

-
+- Description of options + + | Name | Type | Mandatory | Description | + | ---------- | ------ | --------- | ------------------------------------------------------------ | + | duration | number | No | Duration for playing an animation, in milliseconds. The default value is **0**. | + | easing | string | No | Animation easing curve. The default value is **ease**. | + | delay | number | No | Animation delay duration, in milliseconds. The default value is **0**, indicating that there is no delay. | + | fill | string | No | Animation start/stop mode. The default value is **none**. | + | direction | string | No | Animation playback mode. The default value is **normal**. | + | iterations | number | No | Number of times that an animation is played. The default value is **1**. If this parameter is set to **0**, the animation is not played. If this parameter is set to **-1**, the animation is played for an unlimited number of times. | + | begin | number | No | Start point of the animation easing. If this parameter is not set, the default value **0** is used. | + | end | number | No | End point of the animation easing. If this parameter is not set, the default value **1** is used. | - animator interfaces - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Type

-

Description

-

update

-

options

-

Updates the animation parameters. The input parameters are the same as those of createAnimator.

-

play

-

-

-

Starts an animation.

-

finish

-

-

-

Ends an animation.

-

pause

-

-

-

Pauses an animation.

-

cancel

-

-

-

Cancels an animation.

-

reverse

-

-

-

Reverses an animation.

-
+ | Name | Type | Description | + | ------- | ------- | ------------------------------------------------------------ | + | update | options | Updates the animation parameters. The input parameters are the same as those of **createAnimator**. | + | play | - | Starts an animation. | + | finish | - | Ends an animation. | + | pause | - | Pauses an animation. | + | cancel | - | Cancels an animation. | + | reverse | - | Reverses an animation. | - **animator** supported events: - - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Type

-

Description

-

frame

-

number

-

The frame is requested.

-

cancel

-

-

-

The animation is forcibly canceled.

-

finish

-

-

-

The animation playback is complete.

-

repeat

-

-

-

The animation replays.

-
- + | Name | Type | Description | + | ------ | ------ | ----------------------------------- | + | frame | number | The frame is requested. | + | cancel | - | The animation is forcibly canceled. | + | finish | - | The animation playback is complete. | + | repeat | - | The animation replays. | + - Example ``` @@ -474,6 +245,4 @@ Creates an animation object. this.animator.play(); } } - ``` - - + ``` \ No newline at end of file