diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001194352468.gif b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001194352468.gif new file mode 100644 index 0000000000000000000000000000000000000000..58feeb2988e8d9a643234691ae4d5cf5ccef6d4f Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001194352468.gif differ diff --git a/en/application-dev/reference/arkui-ts/ts-components-canvas-lottie.md b/en/application-dev/reference/arkui-ts/ts-components-canvas-lottie.md index 4226a3a65c56afd755b339b962c89f4b33625afa..f3dc2a9263413f89a7d16f164aa05c7303436e69 100644 --- a/en/application-dev/reference/arkui-ts/ts-components-canvas-lottie.md +++ b/en/application-dev/reference/arkui-ts/ts-components-canvas-lottie.md @@ -1,10 +1,11 @@ # Lottie +**Lottie** allows you to implement animation-specific operations. -> **NOTE**
-> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version. +> **NOTE** +> +> The APIs of this module are supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version. -**Lottie** allows you to implement animation-specific operations. ## Required Permissions @@ -13,7 +14,6 @@ None ## Modules to Import - ``` import lottie from '@ohos/lottieETS' ``` @@ -21,6 +21,8 @@ import lottie from '@ohos/lottieETS' > **NOTE** > > In the **Terminal** window, run the `npm install @ohos/lottieETS` command to download Lottie. +> +> To install an OpenHarmony npm third-party package, run the `npm config set @ohos:registry=https://repo.harmonyos.com/npm/` command to set the repository address. ## lottie.loadAnimation @@ -29,18 +31,18 @@ loadAnimation( path: string, container: object, render: string, loop: boolean, autoplay: boolean, name: string ): AnimationItem -Loads an animation. Before calling this method, declare the **Animator('__lottie_ets')** object and check that the canvas layout is complete. This method can be used together with a lifecycle callback of the **Canvas** component, for example, **onAppear()** and **onPageShow()**. +Loads an animation. Before calling this method, declare the **Animator('\__lottie\_ets')** object and check that the canvas layout is complete. This method can be used together with a lifecycle callback of the **Canvas** component, for example, **onAppear()** and **onPageShow()**. - Parameters - | Name | Type | Mandatory | Description | - | -------- | -------- | -------- | -------- | - | path | string | Yes | Path of the animation resource file in the HAP file. The resource file must be in JSON format. Example: **path: "common/lottie/data.json"**. | - | container | object | Yes | Canvas drawing context. A **CanvasRenderingContext2D** object must be declared in advance. | - | render | string | Yes | Rendering type. The value can only be **"canvas"**. | - | loop | boolean \| number | No | If the value is of the Boolean type, this parameter indicates whether to repeat the animation cyclically after the animation ends; the default value is **true**. If the value is of the number type and is greater than or equal to 1, this parameter indicates the number of times the animation plays. | - | autoplay | boolean | No | Whether to automatically play the animation. The default value is **true**. | - | name | string | No | Custom animation name. In later versions, the name can be used to reference and control the animation. The default value is null. | - | initialSegment | [number, number] | No | Start frame and end frame of the animation, respectively. | + | Name | Type | Mandatory | Description | + | -------------- | --------------------------- | ---- | ---------------------------------------- | + | path | string | Yes | Path of the animation resource file in the HAP file. The resource file must be in JSON format. Example: **path: "common/lottie/data.json"**. | + | container | object | Yes | Canvas drawing context. A **CanvasRenderingContext2D** object must be declared in advance.| + | render | string | Yes | Rendering type. The value can only be **"canvas"**. | + | loop | boolean \| number | No | If the value is of the Boolean type, this parameter indicates whether to repeat the animation cyclically after the animation ends; the default value is **true**. If the value is of the number type and is greater than or equal to 1, this parameter indicates the number of times the animation plays.| + | autoplay | boolean | No | Whether to automatically play the animation. The default value is **true**. | + | name | string | No | Custom animation name. In later versions, the name can be used to reference and control the animation. The default value is null. | + | initialSegment | [number, number] | No | Start frame and end frame of the animation, respectively. | ## lottie.destroy @@ -50,15 +52,15 @@ destroy(name: string): void Destroys the animation. This method must be called when a page exits. This method can be used together with a lifecycle callback of the **Canvas** component, for example, **onDisappear()** and **onPageHide()**. - Parameters - | Name | Type | Mandatory | Description | - | -------- | -------- | -------- | -------- | - | name | string | Yes | Name of the animation to destroy, which is the same as the **name** in the **loadAnimation** interface. By default, all animations are destroyed. | + | Name | Type | Mandatory | Description | + | ---- | ------ | ---- | ---------------------------------------- | + | name | string | Yes | Name of the animation to destroy, which is the same as the **name** in the **loadAnimation** interface. By default, all animations are destroyed.| - Example - - ``` + ```ts + // xxx.ets import lottie from '@ohos/lottieETS' - + @Entry @Component struct Index { @@ -66,12 +68,12 @@ Destroys the animation. This method must be called when a page exits. This metho private animateName: string = "animate" private animatePath: string = "common/lottie/data.json" private animateItem: any = null - - private onPageHide(): void { + + onPageHide(): void { console.log('onPageHide') lottie.destroy() } - + build() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Canvas(this.controller) @@ -89,7 +91,7 @@ Destroys the animation. This method must be called when a page exits. This metho path: this.animatePath, }) }) - + Animator('__lottie_ets') // declare Animator('__lottie_ets') when use lottie Button('load animation') .onClick(() => { @@ -107,7 +109,7 @@ Destroys the animation. This method must be called when a page exits. This metho initialSegment: [10, 50], }) }) - + Button('destroy animation') .onClick(() => { lottie.destroy(this.animateName) @@ -120,7 +122,7 @@ Destroys the animation. This method must be called when a page exits. This metho } ``` - ![en-us_image_0000001256978355](figures/en-us_image_0000001256978355.gif) + ![en-us_image_0000001194352468](figures/en-us_image_0000001194352468.gif) ## lottie.play @@ -130,13 +132,12 @@ play(name: string): void Plays a specified animation. - Parameters - | Name | Type | Mandatory | Description | - | -------- | -------- | -------- | -------- | - | name | string | Yes | Name of the animation to play, which is the same as the **name** in the **loadAnimation** interface. By default, all animations are played. | + | Name | Type | Mandatory | Description | + | ---- | ------ | ---- | ---------------------------------------- | + | name | string | Yes | Name of the animation to play, which is the same as the **name** in the **loadAnimation** interface. By default, all animations are played.| - Example - - ``` + ```ts lottie.play(this.animateName) ``` @@ -148,13 +149,12 @@ pause(name: string): void Pauses a specified animation. The next time **lottie.play()** is called, the animation starts from the current frame. - Parameters - | Name | Type | Mandatory | Description | - | -------- | -------- | -------- | -------- | - | name | string | Yes | Name of the animation to pause, which is the same as the **name** in the **loadAnimation** interface. By default, all animations are paused. | + | Name | Type | Mandatory | Description | + | ---- | ------ | ---- | ---------------------------------------- | + | name | string | Yes | Name of the animation to pause, which is the same as the **name** in the **loadAnimation** interface. By default, all animations are paused.| - Example - - ``` + ```ts lottie.pause(this.animateName) ``` @@ -166,13 +166,12 @@ togglePause(name: string): void Pauses or plays a specified animation. This method is equivalent to the switching between **lottie.play()** and **lottie.pause()**. - Parameters - | Name | Type | Mandatory | Description | - | -------- | -------- | -------- | -------- | - | name | string | Yes | Name of the target animation, which is the same as the **name** in the **loadAnimation** interface. By default, all animations are paused. | + | Name | Type | Mandatory | Description | + | ---- | ------ | ---- | ---------------------------------------- | + | name | string | Yes | Name of the target animation, which is the same as the **name** in the **loadAnimation** interface. By default, all animations are paused.| - Example - - ``` + ```ts lottie.togglePause(this.animateName) ``` @@ -184,13 +183,12 @@ stop(name: string): void Stops the specified animation. The next time **lottie.play()** is called, the animation starts from the first frame. - Parameters - | Name | Type | Mandatory | Description | - | -------- | -------- | -------- | -------- | - | name | string | Yes | Name of the target animation, which is the same as the **name** in the **loadAnimation** interface. By default, all animations are paused. | + | Name | Type | Mandatory | Description | + | ---- | ------ | ---- | ---------------------------------------- | + | name | string | Yes | Name of the target animation, which is the same as the **name** in the **loadAnimation** interface. By default, all animations are paused.| - Example - - ``` + ```ts lottie.stop(this.animateName) ``` @@ -202,14 +200,13 @@ setSpeed(speed: number, name: string): void Sets the playback speed of the specified animation. - Parameters - | Name | Type | Mandatory | Description | - | -------- | -------- | -------- | -------- | - | speed | number | Yes | Playback speed. The value is a floating-point number. If the value is greater than 0, the animation plays in forward direction. If the value is less than 0, the animation plays in reversed direction. If the value is 0, the animation is paused. If the value is 1.0 or -1.0, the animation plays at the normal speed. | - | name | string | Yes | Name of the target animation, which is the same as the **name** in the **loadAnimation** interface. By default, all animations are stopped. | + | Name | Type | Mandatory | Description | + | ----- | ------ | ---- | ---------------------------------------- | + | speed | number | Yes | Playback speed. The value is a floating-point number. If the value is greater than 0, the animation plays forward. If the value is less than 0, the animation plays in backward. If the value is 0, the animation is paused. If the value is **1.0** or **-1.0**, the animation plays at the normal speed.| + | name | string | Yes | Name of the target animation, which is the same as the **name** in the **loadAnimation** interface. By default, all animations are stopped.| - Example - - ``` + ```ts lottie.setSpeed(5, this.animateName) ``` @@ -221,14 +218,13 @@ setDirection(direction: AnimationDirection, name: string): void Sets the direction in which the specified animation plays. - Parameters - | Name | Type | Mandatory | Description | - | -------- | -------- | -------- | -------- | - | direction | AnimationDirection | Yes | Direction in which the animation plays. **1**: forwards; **-1**: backwards. When set to play backwards, the animation plays from the current playback progress to the first frame. When this setting is combined with **loop** being set to **true**, the animation plays backwards continuously. When the value of **speed** is less than 0, the animation also plays backwards.
**AnimationDirection**: 1 \| -1. | - | name | string | Yes | Name of the target animation, which is the same as the **name** in the **loadAnimation** interface. By default, all animations are set. | + | Name | Type | Mandatory | Description | + | --------- | ------------------ | ---- | ---------------------------------------- | + | direction | AnimationDirection | Yes | Direction in which the animation plays. **1**: forwards; **-1**: backwards. When set to play backwards, the animation plays from the current playback progress to the first frame. When this setting is combined with **loop** being set to **true**, the animation plays backwards continuously. When the value of **speed** is less than 0, the animation also plays backwards.
AnimationDirection: 1 \| -1 | + | name | string | Yes | Name of the target animation, which is the same as the **name** in the **loadAnimation** interface. By default, all animations are set.| - Example - - ``` + ```ts lottie.setDirection(-1, this.animateName) ``` @@ -237,28 +233,28 @@ Sets the direction in which the specified animation plays. Defines an **AnimationItem** object, which is returned by the **loadAnimation** interface and has attributes and interfaces. The attributes are described as follows: -| Name | Type | Description | -| -------- | -------- | -------- | -| name | string | Animation name. | -| isLoaded | boolean | Whether the animation is loaded. | -| currentFrame | number | Frame that is being played. The default precision is a floating-point number greater than or equal to 0.0. After **setSubframe(false)** is called, the value is a positive integer without decimal points. | -| currentRawFrame | number | Number of frames that are being played. The precision is a floating point number greater than or equal to 0.0. | -| firstFrame | number | First frame of the animation segment that is being played. | -| totalFrames | number | Total number of frames in the animation segment that is being played. | -| frameRate | number | Frame rate (frame/s). | -| frameMult | number | Frame rate (frame/ms). | -| playSpeed | number | Playback speed. The value is a floating-point number. If the value is greater than 0, the animation plays in forward direction. If the value is less than 0, the animation plays in reversed direction. If the value is 0, the animation is paused. If the value is **1.0** or **-1.0**, the animation plays at the normal speed. | -| playDirection | number | Playback direction. The options are **1** (forward) and **-1** (backward). | -| playCount | number | Number of times the animation plays. | -| isPaused | boolean | Whether the current animation is paused. The value **true** means that the animation is paused. | -| autoplay | boolean | Whether to automatically play the animation upon completion of the loading. The value **false** means that the **play()** interface needs to be called to start playing. | -| loop | boolean \| number | If the value is of the Boolean type, this parameter indicates whether to repeat the animation cyclically after the animation ends. If the value is of the number type and is greater than or equal to 1, this parameter indicates the number of times the animation plays. | -| renderer | any | Animation rendering object, which depends on the rendering type. | -| animationID | string | Animation ID. | -| timeCompleted | number | Number of frames that are played for an animation sequence. The value is affected by the setting of **AnimationSegment** and is the same as the value of **totalFrames**. | -| segmentPos | number | ID of the current animation segment. The value is a positive integer greater than or equal to 0. | -| isSubframeEnabled | boolean | Whether the precision of **currentFrame** is a floating point number. | -| segments | AnimationSegment \| AnimationSegment[] | Current segment of the animation. | +| Name | Type | Description | +| ----------------- | ---------------------------------------- | ---------------------------------------- | +| name | string | Animation name. | +| isLoaded | boolean | Whether the animation is loaded. | +| currentFrame | number | Frame that is being played. The default precision is a floating-point number greater than or equal to 0.0. After **setSubframe(false)** is called, the value is a positive integer without decimal points.| +| currentRawFrame | number | Number of frames that are being played. The precision is a floating point number greater than or equal to 0.0. | +| firstFrame | number | First frame of the animation segment that is being played. | +| totalFrames | number | Total number of frames in the animation segment that is being played. | +| frameRate | number | Frame rate (frame/s). | +| frameMult | number | Frame rate (frame/ms). | +| playSpeed | number | Playback speed. The value is a floating-point number. If the value is greater than 0, the animation plays forward. If the value is less than 0, the animation plays backward. If the value is 0, the animation is paused.|If the value is **1.0** or **-1.0**, the animation plays at the normal speed.| +| playDirection | number | Playback direction. The options are **1** (forward) and **-1** (backward). | +| playCount | number | Number of times the animation plays. | +| isPaused | boolean | Whether the current animation is paused. The value **true** means that the animation is paused. | +| autoplay | boolean | Whether to automatically play the animation upon completion of the loading. The value **false** means that the **play()** interface needs to be called to start playing.| +| loop | boolean \| number | If the value is of the Boolean type, this parameter indicates whether to repeat the animation cyclically after the animation ends. If the value is of the number type and is greater than or equal to 1, this parameter indicates the number of times the animation plays. | +| renderer | any | Animation rendering object, which depends on the rendering type. | +| animationID | string | Animation ID. | +| timeCompleted | number | Number of frames that are played for an animation sequence. The value is affected by the setting of **AnimationSegment** and is the same as the value of **totalFrames**.| +| segmentPos | number | ID of the current animation segment. The value is a positive integer greater than or equal to 0. | +| isSubframeEnabled | boolean | Whether the precision of **currentFrame** is a floating point number. | +| segments | AnimationSegment \| AnimationSegment[] | Current segment of the animation. | ## AnimationItem.play @@ -268,13 +264,12 @@ play(name?: string): void Plays an animation. - Parameters - | Name | Type | Mandatory | Description | - | -------- | -------- | -------- | -------- | - | name | string | No | Name of the target animation. By default, the value is null. | + | Name | Type | Mandatory | Description | + | ---- | ------ | ---- | --------------- | + | name | string | No | Name of the target animation. By default, the value is null.| - Example - - ``` + ```ts this.animateItem.play() ``` @@ -286,13 +281,12 @@ destroy(name?: string): void Destroys an animation. - Parameters - | Name | Type | Mandatory | Description | - | -------- | -------- | -------- | -------- | - | name | string | No | Name of the target animation. By default, the value is null. | + | Name | Type | Mandatory | Description | + | ---- | ------ | ---- | --------------- | + | name | string | No | Name of the target animation. By default, the value is null.| - Example - - ``` + ```ts this.animateItem.destroy() ``` @@ -304,13 +298,12 @@ pause(name?: string): void Pauses an animation. When the **play** interface is called next time, the animation is played from the current frame. - Parameters - | Name | Type | Mandatory | Description | - | -------- | -------- | -------- | -------- | - | name | string | No | Name of the target animation. By default, the value is null. | + | Name | Type | Mandatory | Description | + | ---- | ------ | ---- | --------------- | + | name | string | No | Name of the target animation. By default, the value is null.| - Example - - ``` + ```ts this.animateItem.pause() ``` @@ -322,13 +315,12 @@ togglePause(name?: string): void Pauses or plays an animation. This method is equivalent to the switching between **play** and **pause**. - Parameters - | Name | Type | Mandatory | Description | - | -------- | -------- | -------- | -------- | - | name | string | No | Name of the target animation. By default, the value is null. | + | Name | Type | Mandatory | Description | + | ---- | ------ | ---- | --------------- | + | name | string | No | Name of the target animation. By default, the value is null.| - Example - - ``` + ```ts this.animateItem.togglePause() ``` @@ -340,13 +332,12 @@ stop(name?: string): void Stops an animation. When the **play** interface is called next time, the animation is played from the first frame. - Parameters - | Name | Type | Mandatory | Description | - | -------- | -------- | -------- | -------- | - | name | string | No | Name of the target animation. By default, the value is null. | + | Name | Type | Mandatory | Description | + | ---- | ------ | ---- | --------------- | + | name | string | No | Name of the target animation. By default, the value is null.| - Example - - ``` + ```ts this.animateItem.stop() ``` @@ -358,13 +349,12 @@ setSpeed(speed: number): void Sets the playback speed of an animation. - Parameters - | Name | Type | Mandatory | Description | - | -------- | -------- | -------- | -------- | - | speed | number | Yes | Playback speed. The value is a floating-point number. If the value is greater than 0, the animation plays in forward direction. If the value is less than 0, the animation plays in reversed direction. If the value is 0, the animation is paused. If the value is **1.0** or **-1.0**, the animation plays at the normal speed. | + | Name | Type | Mandatory | Description | + | ----- | ------ | ---- | ---------------------------------------- | + | speed | number | Yes | Playback speed. The value is a floating-point number. If the value is greater than 0, the animation plays forward. If the value is less than 0, the animation plays backward. If the value is 0, the animation is paused.| - Example - - ``` + ```ts this.animateItem.setSpeed(5); ``` @@ -376,13 +366,12 @@ setDirection(direction: AnimationDirection): void Sets the playback direction of an animation. - Parameters - | Name | Type | Mandatory | Description | - | -------- | -------- | -------- | -------- | - | direction | AnimationDirection | Yes | Direction in which the animation plays. **1**: forwards; **-1**: backwards. When set to play backwards, the animation plays from the current playback progress to the first frame. When this setting is combined with **loop** being set to **true**, the animation plays backwards continuously. When the value of **speed** is less than 0, the animation also plays backwards.
**AnimationDirection**: 1 \| -1. | + | Name | Type | Mandatory | Description | + | --------- | ------------------ | ---- | ---------------------------------------- | + | direction | AnimationDirection | Yes | Direction in which the animation plays. **1**: forwards; **-1**: backwards. When set to play backwards, the animation plays from the current playback progress to the first frame. When this setting is combined with **loop** being set to **true**, the animation plays backwards continuously. When the value of **speed** is less than 0, the animation also plays backwards.
AnimationDirection: 1 \| -1.| - Example - - ``` + ```ts this.animateItem.setDirection(-1) ``` @@ -394,15 +383,14 @@ goToAndStop(value: number, isFrame?: boolean): void Sets the animation to stop at the specified frame or time. - Parameters - | Name | Type | Mandatory | Description | - | -------- | -------- | -------- | -------- | - | value | number | Yes | Frame ID (greater than or equal to 0) or time progress (ms) at which the animation will stop. | - | isFrame | boolean | No | Whether to set the animation to stop at the specified frame. The value **true** means to set the animation to stop at the specified frame, and **false** means to set the animation to stop at the specified time progress. The default value is **false**. | - | name | string | No | Name of the target animation. By default, the value is null. | + | Name | Type | Mandatory | Description | + | ------- | ------- | ---- | ---------------------------------------- | + | value | number | Yes | Frame ID (greater than or equal to 0) or time progress (ms) at which the animation will stop. | + | isFrame | boolean | No | Whether to set the animation to stop at the specified frame. The value **true** means to set the animation to stop at the specified frame, and **false** means to set the animation to stop at the specified time progress. The default value is **false**.| + | name | string | No | Name of the target animation. By default, the value is null. | - Example - - ``` + ```ts // Set the animation to stop at the specified frame. this.animateItem.goToAndStop(25, true) // Set the animation to stop at the specified time progress. @@ -412,20 +400,19 @@ Sets the animation to stop at the specified frame or time. ## AnimationItem.goToAndPlay -goToAndPlay( value: number, isFrame: boolean, name?: string): void +goToAndPlay(value: number, isFrame: boolean, name?: string): void Sets the animation to start from the specified frame or time progress. - Parameters - | Name | Type | Mandatory | Description | - | -------- | -------- | -------- | -------- | - | value | number | Yes | Frame ID (greater than or equal to 0) or time progress (ms) at which the animation will start. | - | isFrame | boolean | Yes | Whether to set the animation to start from the specified frame. The value **true** means to set the animation to start from the specified frame, and **false** means to set the animation to start from the specified time progress. The default value is **false**. | - | name | string | No | Name of the target animation. By default, the value is null. | + | Name | Type | Mandatory | Description | + | ------- | ------- | ---- | ---------------------------------------- | + | value | number | Yes | Frame ID (greater than or equal to 0) or time progress (ms) at which the animation will start. | + | isFrame | boolean | Yes | Whether to set the animation to start from the specified frame. The value **true** means to set the animation to start from the specified frame, and **false** means to set the animation to start from the specified time progress. The default value is **false**.| + | name | string | No | Name of the target animation. By default, the value is null. | - Example - - ``` + ```ts // Set the animation to stop at the specified frame. this.animateItem.goToAndPlay(25, true) // Set the animation to stop at the specified time progress. @@ -440,14 +427,13 @@ playSegments(segments: AnimationSegment | AnimationSegment[], forceFlag: boolean Sets the animation to play only the specified segment. - Parameters - | Name | Type | Mandatory | Description | - | -------- | -------- | -------- | -------- | - | segments | AnimationSegment = [number, number] \| AnimationSegment[] | Yes | Segment or segment list.
If all segments in the segment list are played, only the last segment is played in the next cycle. | - | forceFlag | boolean | Yes | Whether the settings take effect immediately. The value **true** means the settings take effect immediately, and **false** means the settings take effect until the current cycle of playback is completed. | + | Name | Type | Mandatory | Description | + | --------- | ---------------------------------------- | ---- | ---------------------------------------- | + | segments | AnimationSegment = [number, number] \| AnimationSegment[] | Yes | Segment or segment list.
If all segments in the segment list are played, only the last segment is played in the next cycle.| + | forceFlag | boolean | Yes | Whether the settings take effect immediately. The value **true** means the settings take effect immediately, and **false** means the settings take effect until the current cycle of playback is completed. | - Example - - ``` + ```ts // Set the animation to play the specified segment. this.animateItem.playSegments([10, 20], false) // Set the animation to play the specified segment list. @@ -462,13 +448,12 @@ resetSegments(forceFlag: boolean): void Resets the settings configured by the **playSegments** method to play all the frames. - Parameters - | Name | Type | Mandatory | Description | - | -------- | -------- | -------- | -------- | - | forceFlag | boolean | Yes | Whether the settings take effect immediately. The value **true** means the settings take effect immediately, and **false** means the settings take effect until the current cycle of playback is completed. | + | Name | Type | Mandatory | Description | + | --------- | ------- | ---- | ------------------------------ | + | forceFlag | boolean | Yes | Whether the settings take effect immediately. The value **true** means the settings take effect immediately, and **false** means the settings take effect until the current cycle of playback is completed.| - Example - - ``` + ```ts this.animateItem.resetSegments(true) ``` @@ -480,8 +465,7 @@ resize(): void Resizes the animation layout. - Example - - ``` + ```ts this.animateItem.resize() ``` @@ -493,13 +477,12 @@ setSubframe(useSubFrame: boolean): void Sets the precision of the **currentFrame** attribute to display floating-point numbers. - Parameters - | Name | Type | Mandatory | Description | - | -------- | -------- | -------- | -------- | - | useSubFrames | boolean | Yes | Whether the **currentFrame** attribute displays floating-point numbers. By default, the attribute displays floating-point numbers.
**true**: The **currentFrame** attribute displays floating-point numbers.
**false**: The **currentFrame** attribute displays an integer and does not display floating-point numbers. | + | Name | Type | Mandatory | Description | + | ------------ | ------- | ---- | ---------------------------------------- | + | useSubFrames | boolean | Yes | Whether the **currentFrame** attribute displays floating-point numbers. By default, the attribute displays floating-point numbers.
**true**: The **currentFrame** attribute displays floating-point numbers.
**false**: The **currentFrame** attribute displays an integer and does not display floating-point numbers.| - Example - - ``` + ```ts this.animateItem.setSubframe(false) ``` @@ -511,13 +494,12 @@ getDuration(inFrames?: boolean): void Obtains the duration (irrelevant to the playback speed) or number of frames for playing an animation sequence. The settings are related to the input parameter **initialSegment** of the **Lottie.loadAnimation** interface. - Parameters - | Name | Type | Mandatory | Description | - | -------- | -------- | -------- | -------- | - | inFrames | boolean | No | Whether to obtain the duration or number of frames. **true**: number of frames. **false**: duration, in ms. The default value is **false**. | + | Name | Type | Mandatory | Description | + | -------- | ------- | ---- | ---------------------------------------- | + | inFrames | boolean | No | Whether to obtain the duration or number of frames.
**true**: number of frames.
**false**: duration, in ms. The default value is **false**.| - Example - - ``` + ```ts this.animateItem.getDuration(true) ``` @@ -529,19 +511,18 @@ addEventListener<T = any>(name: AnimationEventName, callback: AnimationEve Adds an event listener. After the event is complete, the specified callback function is triggered. This method returns the function object that can delete the event listener. - Parameters - | Name | Type | Mandatory | Description | - | -------- | -------- | -------- | -------- | - | name | AnimationEventName | Yes | Animation event type. The available options are as follows:
'enterFrame', 'loopComplete', 'complete', 'segmentStart', 'destroy', 'config_ready', 'data_ready', 'DOMLoaded', 'error', 'data_failed', 'loaded_images' | - | callback | AnimationEventCallback<T> | Yes | Custom callback. | + | Name | Type | Mandatory | Description | + | -------- | ------------------------------- | ---- | ---------------------------------------- | + | name | AnimationEventName | Yes | Animation event type. The available options are as follows:
'enterFrame', 'loopComplete', 'complete', 'segmentStart', 'destroy', 'config_ready', 'data_ready', 'DOMLoaded', 'error', 'data_failed', 'loaded_images'| + | callback | AnimationEventCallback<T> | Yes | Custom callback. | - Example - - ``` + ```ts private callbackItem: any = function() { console.log("grunt loopComplete") } let delFunction = this.animateItem.addEventListener('loopComplete', this.animateName) - + // Delete the event listener. delFunction() ``` @@ -554,14 +535,13 @@ removeEventListener<T = any>(name: AnimationEventName, callback?: Animatio Removes an event listener. - Parameters - | Name | Type | Mandatory | Description | - | -------- | -------- | -------- | -------- | - | name | AnimationEventName | Yes | Animation event type. The available options are as follows:
'enterFrame', 'loopComplete', 'complete', 'segmentStart', 'destroy', 'config_ready', 'data_ready', 'DOMLoaded', 'error', 'data_failed', 'loaded_images' | - | callback | AnimationEventCallback<T> | No | Custom callback. By default, the value is null, meaning that all callbacks of the event will be removed. | + | Name | Type | Mandatory | Description | + | -------- | ------------------------------- | ---- | ---------------------------------------- | + | name | AnimationEventName | Yes | Animation event type. The available options are as follows:
'enterFrame', 'loopComplete', 'complete', 'segmentStart', 'destroy', 'config_ready', 'data_ready', 'DOMLoaded', 'error', 'data_failed', 'loaded_images'| + | callback | AnimationEventCallback<T> | No | Custom callback. By default, the value is null, meaning that all callbacks of the event will be removed. | - Example - - ``` + ```ts this.animateItem.removeEventListener('loopComplete', this.animateName) ``` @@ -573,18 +553,17 @@ triggerEvent<T = any>(name: AnimationEventName, args: T): void Directly triggers all configured callbacks of a specified event. - Parameters - | Name | Type | Mandatory | Description | - | -------- | -------- | -------- | -------- | - | name | AnimationEventName | Yes | Animation event type. | - | args | any | Yes | Custom callback parameters. | + | Name | Type | Mandatory | Description | + | ---- | ------------------ | ---- | --------- | + | name | AnimationEventName | Yes | Animation event type. | + | args | any | Yes | Custom callback parameters.| - Example - - ``` + ```ts private triggerCallBack: any = function(item) { console.log("trigger loopComplete, name:" + item.name) } - + this.animateItem.addEventListener('loopComplete', this.triggerCallBack) this.animateItem.triggerEvent('loopComplete', this.animateItem) this.animateItem.removeEventListener('loopComplete', this.triggerCallBack) diff --git a/en/application-dev/reference/arkui-ts/ts-methods-custom-dialog-box.md b/en/application-dev/reference/arkui-ts/ts-methods-custom-dialog-box.md index 68180ebedaca905366a8ed10a203129aadb230ff..bf91837477f19c99f1c9cdc48d76bf70d8fc16d6 100644 --- a/en/application-dev/reference/arkui-ts/ts-methods-custom-dialog-box.md +++ b/en/application-dev/reference/arkui-ts/ts-methods-custom-dialog-box.md @@ -1,11 +1,10 @@ # Custom Dialog Box +A custom dialog box is a dialog box you customize by using APIs of the **CustomDialogController** class. You can set the style and content to your preference for a custom dialog box. -> **NOTE**
-> This method is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. - - -A custom dialog box is a dialog box you customize by using APIs of the **CustomDialogController** class. +> **NOTE** +> +> The APIs of this module are supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. ## APIs @@ -14,38 +13,36 @@ CustomDialogController(value:{builder: CustomDialog, cancel?: () => void, aut - Parameters - | Name | Type | Mandatory | Default Value | Description | - | -------- | -------- | -------- | -------- | -------- | - | builder | [CustomDialog](../../ui/ts-component-based-customdialog.md) | Yes | - | Constructor of the custom dialog box content. | - | cancel | () => void | No | - | Callback invoked when the dialog box is closed after the overlay exits. | - | autoCancel | boolean | No | true | Whether to allow users to click the overlay to exit. | - | alignment | DialogAlignment | No | DialogAlignment.Default | Alignment mode of the dialog box in the vertical direction. | - | offset | {
dx: Length \|[Resource](../../ui/ts-types.md#resource),
dy: Length \|[Resource](../../ui/ts-types.md#resource)
} | No | - | Offset of the dialog box relative to the alignment position. | - | customStyle | boolean | No | false | Whether the style of the dialog box is customized. | - | gridCount8+ | number | No | - | Count of grid columns occupied by the dialog box. | - -- DialogAlignment enums - | Name | Description | - | -------- | -------- | - | Top | Vertical top alignment. | - | Center | Vertical center alignment. | - | Bottom | Vertical bottom alignment. | - | Default | Default alignment. | - | TopStart8+ | Top left alignment. | - | TopEnd8+ | Top right alignment. | - | CenterStart8+ | Center left alignment. | - | CenterEnd8+ | Center right alignment. | - | BottomStart8+ | Bottom left alignment. | - | BottomEnd8+ | Bottom right alignment. | + | Name | Type | Mandatory | Default Value | Description | + | ---------------------- | ---------------------------------------- | ---- | ----------------------- | ---------------------- | + | builder | [CustomDialog](../../ui/ts-component-based-customdialog.md) | Yes | - | Constructor of the custom dialog box content. | + | cancel | () => void | No | - | Callback invoked when the dialog box is closed after the overlay exits. | + | autoCancel | boolean | No | true | Whether to allow users to click the overlay to exit. | + | alignment | DialogAlignment | No | DialogAlignment.Default | Alignment mode of the dialog box in the vertical direction. | + | offset | {
dx: Length \| [Resource](../../ui/ts-types.md#resource)
dy: Length \| [Resource](../../ui/ts-types.md#resource)
} | No | - | Offset of the dialog box relative to the alignment position.| + | customStyle | boolean | No | false | Whether to use a custom style for the dialog box. | + | gridCount8+ | number | No | - | Number of grid columns occupied by the dialog box. | + +- DialogAlignment + | Name | Description | + | ------------------------ | ------- | + | Top | Vertical top alignment.| + | Center | Vertical center alignment.| + | Bottom | Vertical bottom alignment.| + | Default | Default alignment. | + | TopStart8+ | Top left alignment. | + | TopEnd8+ | Top right alignment. | + | CenterStart8+ | Center left alignment. | + | CenterEnd8+ | Center right alignment. | + | BottomStart8+ | Bottom left alignment. | + | BottomEnd8+ | Bottom right alignment. | ## CustomDialogController - ### Objects to Import - -``` +```ts dialogController : CustomDialogController = new CustomDialogController(value:{builder: CustomDialog, cancel?: () => void, autoCancel?: boolean}) ``` @@ -59,25 +56,30 @@ Opens the content of the custom dialog box. If the content has been displayed, t ### close close(): void + Closes the custom dialog box. If the dialog box is closed, this API does not take effect. ## Example - ```ts // xxx.ets @CustomDialog struct CustomDialogExample { + @Link textValue: string + @Link inputValue: string controller: CustomDialogController cancel: () => void confirm: () => void build() { Column() { - Text('Software uninstall').width('70%').fontSize(20).margin({ top: 10, bottom: 10 }) - Image($r('app.media.icon')).width(80).height(80) - Text('Whether to uninstall a software?').fontSize(16).margin({ bottom: 10 }) + Text('Change text').fontSize(20).margin({ top: 10, bottom: 10 }) + TextInput({ placeholder: '', text: this.textValue }).height(60).width('90%') + .onChange((value: string) => { + this.textValue = value + }) + Text('Whether to change a text?').fontSize(16).margin({ bottom: 10 }) Flex({ justifyContent: FlexAlign.SpaceAround }) { Button('cancel') .onClick(() => { @@ -86,6 +88,7 @@ struct CustomDialogExample { }).backgroundColor(0xffffff).fontColor(Color.Black) Button('confirm') .onClick(() => { + this.inputValue = this.textValue this.controller.close() this.confirm() }).backgroundColor(0xffffff).fontColor(Color.Red) @@ -97,8 +100,10 @@ struct CustomDialogExample { @Entry @Component struct CustomDialogUser { + @State textValue: string = '' + @State inputValue: string = 'click me' dialogController: CustomDialogController = new CustomDialogController({ - builder: CustomDialogExample({ cancel: this.onCancel, confirm: this.onAccept }), + builder: CustomDialogExample({ cancel: this.onCancel, confirm: this.onAccept, textValue: $textValue, inputValue: $inputValue }), cancel: this.existApp, autoCancel: true }) @@ -115,7 +120,7 @@ struct CustomDialogUser { build() { Column() { - Button('click me') + Button(this.inputValue) .onClick(() => { this.dialogController.open() }).backgroundColor(0x317aff) diff --git a/en/application-dev/reference/arkui-ts/ts-methods-datepicker-dialog.md b/en/application-dev/reference/arkui-ts/ts-methods-datepicker-dialog.md index 5d6478b3a83bbe35877559d7a59008558929e1ce..e4a9121e826398fe574b303ed2afd34b68996320 100644 --- a/en/application-dev/reference/arkui-ts/ts-methods-datepicker-dialog.md +++ b/en/application-dev/reference/arkui-ts/ts-methods-datepicker-dialog.md @@ -1,9 +1,11 @@ # Date Picker Dialog Box -> **NOTE**
-> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version. +A date picker dialog box is a dialog box that allows users to select a date from the given range. + +> **NOTE** +> +> The APIs of this module are supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version. -You can display a date picker in a dialog box to allow users to select a date from the given range. ## Required Permissions @@ -13,23 +15,24 @@ None show(options?: DatePickerDialogOptions) -Displays a date picker dialog box. +Shows a date picker dialog box. -- options parameters - | Name | Type | Mandatory | Default Value | Description | +- DatePickerDialogOptions + | Name| Type| Mandatory| Default Value| Description| | -------- | -------- | -------- | -------- | -------- | - | start | Date | No | Date('1970-1-1') | Start date of the picker. | - | end | Date | No | Date('2100-12-31') | End date of the picker. | - | selected | Date | No | Current system date | Date of the selected item. | - | lunar | boolean | No | false | Whether to display the lunar calendar. | - | onAccept | (value: [DatePickerResult](ts-basic-components-datepicker.md#DatePickerResult)) => void | No | - | Callback invoked when the OK button in the dialog box is clicked. | - | onCancel | () => void | No | - | Triggered when the Cancel button in the dialog box is clicked. | - | onChange | (value: [DatePickerResult](ts-basic-components-datepicker.md#DatePickerResult)) => void | No | - | Callback invoked when the selected item in the picker changes. | + | start | Date | No| Date('1970-1-1') | Start date of the picker.| + | end | Date | No| Date('2100-12-31') | End date of the picker.| + | selected | Date | No| Current system date| Date of the selected item.| + | lunar | boolean | No| false | Whether to display the lunar calendar.| + | onAccept | (value: [DatePickerResult](ts-basic-components-datepicker.md#DatePickerResult)) => void | No| - | Callback invoked when the OK button in the dialog box is clicked. | + | onCancel | () => void | No| - | Callback invoked when the Cancel button in the dialog box is clicked. | + | onChange | (value: [DatePickerResult](ts-basic-components-datepicker.md#DatePickerResult)) => void | No| - | Callback invoked when the selected item in the picker changes. | ## Example ### Date Picker Sample Code (With Lunar Calendar) -``` +```ts +// xxx.ets @Entry @Component struct DatePickerDialogExample01 { @@ -62,7 +65,8 @@ struct DatePickerDialogExample01 { } ``` ### Date Picker Sample Code (No Lunar Calendar) -``` +```ts +// xxx.ets @Entry @Component struct DatePickerDialogExample02 { diff --git a/en/application-dev/reference/arkui-ts/ts-methods-textpicker-dialog.md b/en/application-dev/reference/arkui-ts/ts-methods-textpicker-dialog.md index 7f22b7a2e6d66f4bb99bc57dabdeb32109885725..21250bdd01ae520063a032651c71f476562755c2 100644 --- a/en/application-dev/reference/arkui-ts/ts-methods-textpicker-dialog.md +++ b/en/application-dev/reference/arkui-ts/ts-methods-textpicker-dialog.md @@ -1,10 +1,10 @@ # Text Picker Dialog Box -You can display a text picker in a dialog box to allow users to select text from the given range. +A text picker dialog box is a dialog box that allows users to select text from the given range. > **NOTE** > -> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version. +> The APIs of this module are supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version. ## Required Permissions @@ -23,10 +23,10 @@ Shows a text picker in the given settings. | range | string[] | Yes| - | Data selection range of the picker.| | selected | number | No| 0 | Index of the selected item in the range.| | value | string | No | - | Value of the selected item. This parameter does not take effect when the **selected** parameter is set. If the value is not within the range, the first item in the range is used instead.| - | defaultPickerItemHeight | number | No| - | Default height of an item in the picker.| - | onAccept | (value: TextPickerResult) => void | No| - | Triggered when the OK button in the dialog box is clicked.| - | onCancel | () => void | No| - | Triggered when the Cancel button in the dialog box is clicked.| - | onChange | (value: TextPickerResult) => void | No| - | Triggered when the selected item in the picker changes.| + | defaultPickerItemHeight | number \| string | No| - | Default height of an item in the picker.| + | onAccept | (value: TextPickerResult) => void | No| - | Callback invoked when the OK button in the dialog box is clicked. | + | onCancel | () => void | No| - | Callback invoked when the Cancel button in the dialog box is clicked. | + | onChange | (value: TextPickerResult) => void | No| - | Callback invoked when the selected item in the picker changes. | - TextPickerResult | Name| Type| Description| diff --git a/en/application-dev/reference/arkui-ts/ts-methods-timepicker-dialog.md b/en/application-dev/reference/arkui-ts/ts-methods-timepicker-dialog.md index 829a27b92c2559fb6adfb0bf37e72e63e9ea3e6b..c5b840828bce86c77a917dbcb5a110c992bbba8c 100644 --- a/en/application-dev/reference/arkui-ts/ts-methods-timepicker-dialog.md +++ b/en/application-dev/reference/arkui-ts/ts-methods-timepicker-dialog.md @@ -1,9 +1,11 @@ # Time Picker Dialog Box -> **NOTE**
-> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version. +A time picker dialog box is a dialog box that allows users to select a time from the given range, which is from 00:00 to 23:59 by default. + +> **NOTE** +> +> The APIs of this module are supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version. -You can display a time picker in a dialog box to allow users to select a time from the given range, which is from 00:00 to 23:59 by default. ## Required Permissions @@ -15,19 +17,20 @@ show(options?: TimePickerDialogOptions) Shows a time picker dialog box. -- options parameters - | Name | Type | Mandatory | Default Value | Description | - | -------- | -------- | -------- | -------- | -------- | - | selected | Date | No | Current system time | Time of the selected item. | - | useMilitaryTime | boolean | No | false | Whether to display time in 24-hour format. | - | onAccept | (value: [TimePickerResult](ts-basic-components-timepicker.md#TimePickerResult)) => void | No | - | Callback invoked when the OK button in the dialog box is clicked. | - | onCancel | () => void | No | - | Triggered when the Cancel button in the dialog box is clicked. | - | onChange | (value: [TimePickerResult](ts-basic-components-timepicker.md#TimePickerResult)) => void | No | - | Callback invoked when the selected item in the picker changes. | +- TimePickerDialogOptions + | Name| Type| Mandatory| Default Value| Description| + | -------- | -------- | -------- | -------- | -------- | + | selected | Date | No| Current system time| Time of the selected item.| + | useMilitaryTime | boolean | No| false | Whether to display time in 24-hour format.| + | onAccept | (value: [TimePickerResult](ts-basic-components-timepicker.md#TimePickerResult)) => void | No| - | Callback invoked when the OK button in the dialog box is clicked. | + | onCancel | () => void | No| - | Callback invoked when the Cancel button in the dialog box is clicked. | + | onChange | (value: [TimePickerResult](ts-basic-components-timepicker.md#TimePickerResult)) => void | No| - | Callback invoked when the selected item in the picker changes. | ## Example ### Time Picker Sample Code (24-Hour Clock) -``` +```ts +// xxx.ets @Entry @Component struct TimePickerDialogExample01 { @@ -55,7 +58,8 @@ struct TimePickerDialogExample01 { } ``` ### Time Picker Sample Code (12-Hour Clock) -``` +```ts +// xxx.ets @Entry @Component struct TimePickerDialogExample02 { diff --git a/en/application-dev/reference/arkui-ts/ts-motion-path-animation.md b/en/application-dev/reference/arkui-ts/ts-motion-path-animation.md index 410181d6801fb0a478419b90f7c5e3659ab5715a..acaad24b36b2bb216beb3a5c9997c26d4c2c9241 100644 --- a/en/application-dev/reference/arkui-ts/ts-motion-path-animation.md +++ b/en/application-dev/reference/arkui-ts/ts-motion-path-animation.md @@ -1,24 +1,21 @@ # Motion Path Animation -You can apply a motion path animation to a component, by setting the motion path of the component in a translation animation. +The motion path animation is used to animate a component along a custom path. -> **NOTE** +> **NOTE** > -> This animation is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. - - +> The APIs of this module are supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. ## Attributes -| Name | Type | Default Value | Description | +| Parameter| Type| Default Value| Description| | -------- | -------- | -------- | -------- | -| motionPath | {
path: string,
from?: number,
to?: number,
rotatable?: boolean
}
**NOTE**
In a path, **start** and **end** can be used to replace the start point and end point. Example:
'Mstart.x start.y L50 50 Lend.x end.y Z' | {
"",
0.0,
1.0,
false
} | Motion path of the component. The input parameters are described as follows:
- **path**: motion path of the translation animation. The **svg** path string is used.
- **from**: start point of the motion path. The default value is **0.0**.
- **to**: end point of the motion path. The default value is **1.0**.
- **rotatable**: whether to rotate along the path. | +| motionPath | {
path: string,
from?: number,
to?: number,
rotatable?: boolean
}
**NOTE**
In a path, **start** and **end** can be used to replace the start point and end point. Example:
'Mstart.x start.y L50 50 Lend.x end.y Z'| {
"",
0.0,
1.0,
false
} | Motion path of the component. The input parameters are described as follows:
- **path**: motion path of the translation animation. The value is an SVG path string.
- **from**: start point of the motion path. The default value is **0.0**.
- **to**: end point of the motion path. The default value is **1.0**.
- **rotatable**: whether to rotate along the path.| ## Example - ```ts // xxx.ets @Entry diff --git a/en/application-dev/reference/arkui-ts/ts-page-transition-animation.md b/en/application-dev/reference/arkui-ts/ts-page-transition-animation.md index 991a54fbd93dbc21c5d82cf3a1176a1fcea730c5..4e482e26c39ad1083ee4f2053cc4224589d60a3e 100644 --- a/en/application-dev/reference/arkui-ts/ts-page-transition-animation.md +++ b/en/application-dev/reference/arkui-ts/ts-page-transition-animation.md @@ -1,6 +1,6 @@ # Page Transition -Customize the page transition animations by configuring the page entrance and exit components in the global **pageTransition** method. +The page transition navigates users between pages. You can customize page transitions by configuring the page entrance and exit components in the global **pageTransition** API. > **NOTE** > @@ -70,16 +70,12 @@ Customization method 1: The entrance animation of the current page is configured struct PageTransitionExample1 { @State scale1: number = 1 @State opacity1: number = 1 - @State active: boolean = false build() { Column() { Navigator({ target: 'pages/page1', type: NavigationType.Push }) { Image($r('app.media.bg1')).width("100%").height("100%") } - .onClick(() => { - this.active = true - }) }.scale({ x: this.scale1 }).opacity(this.opacity1) } // Customization method 1: Customize the transition process. @@ -105,7 +101,6 @@ struct PageTransitionExample1 { struct AExample { @State scale2: number = 1 @State opacity2: number = 1 - @State active: boolean = false build() { Column() { @@ -141,16 +136,12 @@ Customization method 2: The entrance animation of the current page is configured struct PageTransitionExample { @State scale1: number = 1 @State opacity1: number = 1 - @State active: boolean = false build() { Column() { Navigator({ target: 'pages/page1', type: NavigationType.Push }) { Image($r('app.media.bg1')).width("100%").height("100%") } - .onClick(() => { - this.active = true - }) }.scale({ x: this.scale1 }).opacity(this.opacity1) } @@ -172,16 +163,12 @@ struct PageTransitionExample { struct PageTransitionExample1 { @State scale2: number = 1 @State opacity2: number = 1 - @State active: boolean = false - + build() { Column() { Navigator({ target: 'pages/index', type: NavigationType.Push }) { Image($r('app.media.bg2')).width ("100%").height("100%") } - .onClick(() => { - this.active = true - }) }.scale({ x: this.scale2 }).opacity(this.opacity2) }