diff --git a/en/application-dev/reference/arkui-js/js-components-container-div.md b/en/application-dev/reference/arkui-js/js-components-container-div.md index e35eb42639301cfb6ce1a9a45880217ce1daf54b..1cbd9ac9be8e5f4f0dfd3a9db2f91c45d19b10f4 100644 --- a/en/application-dev/reference/arkui-js/js-components-container-div.md +++ b/en/application-dev/reference/arkui-js/js-components-container-div.md @@ -275,7 +275,7 @@ In addition to the [universal methods](js-components-common-methods.md), the fol top:0, }, dragstart(e){ - prompt.showToast({ + promptAction.showToast({ message: 'Start to be dragged' }) }, @@ -385,25 +385,25 @@ In addition to the [universal methods](js-components-common-methods.md), the fol ```js // xxx.js - import prompt from '@system.prompt'; + import promptAction from '@ohos.promptAction'; export default { pinchstart(e){ - prompt.showToast({ + promptAction.showToast({ message: 'pinchstart!!!' }) }, pinchupdate(e){ - prompt.showToast({ + promptAction.showToast({ message: 'Two-finger pinch update' }) }, pinchend(e){ - prompt.showToast({ + promptAction.showToast({ message: 'Finished with two fingers pinching' }) }, pinchcancel(e){ - prompt.showToast({ + promptAction.showToast({ message: 'Finger pinching is interrupted' }) } diff --git a/en/application-dev/reference/arkui-ts/ts-media-components-video.md b/en/application-dev/reference/arkui-ts/ts-media-components-video.md index e5cedbf9e226c3b37ce9c0a525c70376075f6187..b2903343a1acb957d5563cc100a0e150a463732f 100644 --- a/en/application-dev/reference/arkui-ts/ts-media-components-video.md +++ b/en/application-dev/reference/arkui-ts/ts-media-components-video.md @@ -24,9 +24,9 @@ Video(value: {src?: string | Resource, currentProgressRate?: number | string | P | Name | Type | Mandatory| Description | | ------------------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | -| src | string \| [Resource](ts-types.md) | No | Path of the video source, which can be a local path or a URL.
The video resources can be stored in the **video** or **rawfile** folder under **resources**.
The path can include a **dataability://** prefix, which indicates that the path is provided by a Data ability. For details about the path, see [Data Ability Development](../../application-models/dataability-overview.md).
**NOTE**
The supported video formats are MP4, MKV, WebM, and TS.| +| src | string \| [Resource](ts-types.md) | No | Path of the video source, which can be a local path or a URL.
The video resources can be stored in the **video** or **rawfile** folder under **resources**.
The path can include a **dataability://** prefix, which indicates that the path is provided by a Data ability. For details about the path, see [Data Ability Development](../../application-models/dataability-overview.md).
- Strings with the **file:///data/storage** prefix are supported, which are used to read resources in the application sandbox. Ensure that the application has the read permission to the files in the specified path.
**NOTE**
The supported video formats are MP4, MKV, WebM, and TS. | | currentProgressRate | number \| string \| PlaybackSpeed8+ | No | Video playback speed.
**NOTE**
The value of the number type can only be **0.75**, **1.0**, **1.25**, **1.75**, or **2.0**.
Default value: 1.0 \| PlaybackSpeed.Speed_Forward_1_00_X | -| previewUri | string \|PixelMap \| [Resource](ts-types.md) | No | Path of the preview image. (The PixelMap type is not supported currently.) | +| previewUri | string \|PixelMap \| [Resource](ts-types.md) | No | Path of the preview image. | | controller | [VideoController](#videocontroller) | No | Video controller. | ## PlaybackSpeed8+ diff --git a/en/application-dev/reference/arkui-ts/ts-pixel-units.md b/en/application-dev/reference/arkui-ts/ts-pixel-units.md index 4f7099cc28fffbe5b72c6fa3ddd5fe0cfa1b969f..8a820840da5c7a8d5ad232f16f548acd585ed262 100644 --- a/en/application-dev/reference/arkui-ts/ts-pixel-units.md +++ b/en/application-dev/reference/arkui-ts/ts-pixel-units.md @@ -3,12 +3,12 @@ The framework provides four pixel units, with vp as the reference data unit. -| Name | Description | -| ---- | ---------------------------------------- | -| px | Physical pixel unit of the screen. | -| vp | Pixel unit specific to the screen density. Pixels in this unit are converted into physical pixels of the screen based on the screen pixel density. This unit is used for values whose unit is not specified.| -| fp | Font pixel, which is similar to vp and varies according to the system font size. | -| lpx | Logical pixel unit of the window. It is the ratio of the actual screen width to the logical width (configured by **designWidth**). For example, if **designWidth** is set to **720** (default value), then 1lpx is equal to 2px for a screen with an actual width of 1440 physical pixels.| +| Name| Description | +| ---- | ------------------------------------------------------------ | +| px | Physical pixel unit of the screen. | +| vp | Pixel unit specific to the screen density. Pixels in this unit are converted into physical pixels of the screen based on the screen pixel density. This unit is used for values whose unit is not specified. On a screen with an actual width of 1440 physical pixels, 1 vp is approximately equal to 3 px.| +| fp | Font pixel, which is similar to vp and varies according to the system font size.| +| lpx | Logical pixel unit of the window. It is the ratio of the actual screen width to the logical width (configured by **designWidth**). For example, if **designWidth** is set to **720** (default value), then 1 lpx is equal to 2 px for a screen with an actual width of 1440 physical pixels.| ## Pixel Unit Conversion @@ -37,33 +37,71 @@ struct Example { Flex({ wrap: FlexWrap.Wrap }) { Column() { Text("width(220)") - .width(220).height(40).backgroundColor(0xF9CF93) - .textAlign(TextAlign.Center).fontColor(Color.White).fontSize('12vp') + .width(220) + .height(40) + .backgroundColor(0xF9CF93) + .textAlign(TextAlign.Center) + .fontColor(Color.White) + .fontSize('12vp') }.margin(5) + Column() { Text("width('220px')") - .width('220px').height(40).backgroundColor(0xF9CF93) - .textAlign(TextAlign.Center).fontColor(Color.White) + .width('220px') + .height(40) + .backgroundColor(0xF9CF93) + .textAlign(TextAlign.Center) + .fontColor(Color.White) }.margin(5) + Column() { Text("width('220vp')") - .width('220vp').height(40).backgroundColor(0xF9CF93) - .textAlign(TextAlign.Center).fontColor(Color.White).fontSize('12vp') + .width('220vp') + .height(40) + .backgroundColor(0xF9CF93) + .textAlign(TextAlign.Center) + .fontColor(Color.White) + .fontSize('12vp') }.margin(5) + Column() { Text("width('220lpx') designWidth:720") - .width('220lpx').height(40).backgroundColor(0xF9CF93) - .textAlign(TextAlign.Center).fontColor(Color.White).fontSize('12vp') + .width('220lpx') + .height(40) + .backgroundColor(0xF9CF93) + .textAlign(TextAlign.Center) + .fontColor(Color.White) + .fontSize('12vp') }.margin(5) + Column() { Text("width(vp2px(220) + 'px')") - .width(vp2px(220) + 'px').height(40).backgroundColor(0xF9CF93) - .textAlign(TextAlign.Center).fontColor(Color.White).fontSize('12vp') + .width(vp2px(220) + 'px') + .height(40) + .backgroundColor(0xF9CF93) + .textAlign(TextAlign.Center) + .fontColor(Color.White) + .fontSize('12vp') }.margin(5) + Column() { Text("fontSize('12fp')") - .width(220).height(40).backgroundColor(0xF9CF93) - .textAlign(TextAlign.Center).fontColor(Color.White).fontSize('12fp') + .width(220) + .height(40) + .backgroundColor(0xF9CF93) + .textAlign(TextAlign.Center) + .fontColor(Color.White) + .fontSize('12fp') + }.margin(5) + + Column() { + Text("width(px2vp(220))") + .width(px2vp(220)) + .height(40) + .backgroundColor(0xF9CF93) + .textAlign(TextAlign.Center) + .fontColor(Color.White) + .fontSize('12fp') }.margin(5) }.width('100%') } diff --git a/en/application-dev/reference/arkui-ts/ts-transition-animation-component.md b/en/application-dev/reference/arkui-ts/ts-transition-animation-component.md index cd072648a81f68b080ae88b9a90cf6a157376dc6..ff60c8526b70cd848293f696699a6bd5f4fe26c0 100644 --- a/en/application-dev/reference/arkui-ts/ts-transition-animation-component.md +++ b/en/application-dev/reference/arkui-ts/ts-transition-animation-component.md @@ -19,10 +19,10 @@ Configure the component transition animations for when a component is inserted o | Name| Type| Mandatory| Description| | -------- | -------- | -------- | -------- | | type | [TransitionType](ts-appendix-enums.md#transitiontype) | No| Transition type, which includes component addition and deletion by default.
Default value: **TransitionType.All**
Since API version 9, this API is supported in ArkTS widgets.
**NOTE**
If **type** is not specified, insertion and deletion use the same transition type.| -| opacity | number | No| Opacity of the component during transition, which is the value of the start point of insertion and the end point of deletion.
Default value: **1**
Value range: [0, 1]
Since API version 9, this API is supported in ArkTS widgets.
**NOTE**
A value less than 0 evaluates to the value **0**. A value greater than 1 evaluates to the value **1**.| +| opacity | number | No| Opacity of the component during transition, which is the value of the start point of insertion and the end point of deletion.
Default value: **1**
Value range: [0, 1]
Since API version 9, this API is supported in ArkTS widgets.
**NOTE**
A value less than 0 or greater than 1 evaluates to the value **1**.| | translate | {
x? : number \| string,
y? : number \| string,
z? : number \| string
} | No| Translation of the component during transition, which is the value of the start point of insertion and the end point of deletion.
-**x**: distance to translate along the x-axis.
-**y**: distance to translate along the y-axis.
-**z**: distance to translate along the z-axis.
Since API version 9, this API is supported in ArkTS widgets.| | scale | {
x? : number,
y? : number,
z? : number,
centerX? : number \| string,
centerY? : number \| string
} | No| Scaling of the component during transition, which is the value of the start point of insertion and the end point of deletion.
- **x**: scale factor along the x-axis.
- **y**: scale factor along the y-axis.
- **z**: scale factor along the z-axis.
- **centerX** and **centerY**: x coordinate and y coordinate of the scale center, respectively. The default values are both **"50%"**.
- If the center point is 0, it indicates the upper left corner of the component.
Since API version 9, this API is supported in ArkTS widgets.| -| rotate | {
x?: number,
y?: number,
z?: number,
angle?: number \| string,
centerX?: number \| string,
centerY?: number \| string
} | No| Rotation of the component during transition, which is the value of the start point of insertion and the end point of deletion.
- **x**: rotation vector along the x-axis.
- **y**: rotation vector along the y-axis.
- **z**: rotation vector along the z-axis.
- **centerX** and **centerY**: x coordinate and y coordinate of the rotation center, respectively. The default values are both **"50%"**.
- If the center point is (0, 0), it indicates the upper left corner of the component.
Since API version 9, this API is supported in ArkTS widgets.| +| rotate | {
x?: number,
y?: number,
z?: number,
angle: number \| string,
centerX?: number \| string,
centerY?: number \| string
} | No| Rotation of the component during transition, which is the value of the start point of insertion and the end point of deletion.
- **x**: rotation vector along the x-axis.
- **y**: rotation vector along the y-axis.
- **z**: rotation vector along the z-axis.
- **centerX** and **centerY**: x coordinate and y coordinate of the rotation center, respectively. The default values are both **"50%"**.
- If the center point is (0, 0), it indicates the upper left corner of the component.
Since API version 9, this API is supported in ArkTS widgets.| ## Example diff --git a/en/application-dev/ui/arkts-animation-overview.md b/en/application-dev/ui/arkts-animation-overview.md index 420a573762be5303597b80341e7a17e16ffbb31c..d75619d1c1acb3bb0d0273d7f44738101b43e59e 100644 --- a/en/application-dev/ui/arkts-animation-overview.md +++ b/en/application-dev/ui/arkts-animation-overview.md @@ -1,27 +1,27 @@ # Animation Overview -The principle of animation is that the UI appearance is changed for multiple times within a period of time. Because human eyes generate visual persistence, what you finally see is a continuous animation. A change of the UI is called an animation frame, which corresponds to a screen refresh. An important indicator that determines the animation smoothness is the frame rate (FPS), that is, the number of animation frames per second. The higher the frame rate, the smoother the animation. +The principle of animation is that the UI appearance is changed for multiple times within a period of time. Because human eyes retain persistence of vision, what you finally see is a continuous animation. A change of the UI is called an animation frame, which corresponds to a screen refresh. An important indicator that determines the animation smoothness is the frame rate (FPS), that is, the number of animation frames per second. The higher the frame rate, the smoother the animation. -In ArkUI, an animation is generated by changing the attribute value and specifying the animation parameters. Animation parameters include parameters such as animation duration and change rule (that is, curve). After the attribute value changes, the original state is transited to the new state according to the animation parameter, that is, an animation is formed. +In ArkUI, an animation is generated by changing the attribute value and specifying the animation parameters. Animation parameters include animation duration, change rule (that is, curve), and more. After the attribute value changes, the original state is transited to the new state according to the animation parameters. In this way, an animation is formed. -The animation capability provided by the ArkUI can be classified into intra-page animation and inter-page animation based on the page classification mode. As shown in the following figure, an animation on a page refers to an animation that can occur on a page, and an animation between pages refers to an animation that occurs only when two pages jump. +The animation capability provided by ArkUI can be classified into intra-page animation and inter-page animation based on the page classification mode. As shown in the following figure, an animation on a page refers to an animation that can occur on a page, and an animation between pages refers to an animation that occurs only with redirection between pages. - Figure 1 Animation by page + **Figure 1** Animation by page ![en-us_image_0000001562700385](figures/en-us_image_0000001562700385.png) -Based on the basic capability, the animation can be divided into three parts: attribute animation, explicit animation, and transition animation. as shown in the following figure. +By capability, the animation can be divided into three parts: attribute animation, explicit animation, and transition animation, as shown in the following figure. - Figure 2 Animation classified by basic capability + **Figure 2** Animation classified by basic capability ![en-us_image_0000001562820753](figures/en-us_image_0000001562820753.png) -Based on the page classification mode and application scenarios, this document provides the usage methods and precautions of various animations for developers to quickly learn animations. +This topic will introduce you to the usage and precautions of animations by the preceding classification and use cases. diff --git a/en/application-dev/ui/arkts-common-components-video-player.md b/en/application-dev/ui/arkts-common-components-video-player.md index 39cab59adf7576d52bfafc8c9bc9631bd85e06e8..27d68175306f3fa7095417f953c5e1a75f760b52 100644 --- a/en/application-dev/ui/arkts-common-components-video-player.md +++ b/en/application-dev/ui/arkts-common-components-video-player.md @@ -13,7 +13,7 @@ You can create a **\