From 4bad9da8a2b1821fe021c48a63f4933642f14ec4 Mon Sep 17 00:00:00 2001 From: "ester.zhou" Date: Fri, 2 Jun 2023 14:24:49 +0800 Subject: [PATCH] Update docs (18259) Signed-off-by: ester.zhou --- .../arkui-ts/ts-media-components-video.md | 4 +- .../reference/arkui-ts/ts-pixel-units.md | 74 ++++-- .../ui/arkts-animation-overview.md | 14 +- .../arkts-common-components-video-player.md | 26 +- .../ui/arkts-common-events-focus-event.md | 4 +- .../arkts-common-events-touch-screen-event.md | 42 ++-- .../ui/arkts-geometric-shape-drawing.md | 12 +- .../ui/arkts-gesture-events-binding.md | 24 +- .../arkts-gesture-events-combined-gestures.md | 50 ++-- .../ui/arkts-gesture-events-single-gesture.md | 50 ++-- .../arkts-layout-development-create-grid.md | 32 ++- .../arkts-layout-development-media-query.md | 27 +-- ...ts-layout-development-performance-boost.md | 8 +- .../ui/arkts-navigation-navigation.md | 50 ++-- .../ui/arkts-page-transition-animation.md | 138 +++++------ ...-performance-improvement-recommendation.md | 222 +++++++++++++++++- .../arkts-popup-and-menu-components-menu.md | 30 +-- en/application-dev/ui/arkts-routing.md | 140 +++++------ .../ui/arkts-ui-development-overview.md | 74 +++--- .../ui/figures/2023022792216(1).jpg | Bin 0 -> 2806 bytes .../ui/figures/2023032401632.jpg | Bin 0 -> 15048 bytes .../ui/figures/2023032405917.jpg | Bin 0 -> 7246 bytes .../ui/figures/2023032411518.jpg | Bin 0 -> 12662 bytes .../alignment-relative-anchor-horizontal.png | Bin 0 -> 10013 bytes .../alignment-relative-anchor-vertical.png | Bin 0 -> 10103 bytes .../ui/figures/arkui-arkts-framework.png | Bin 0 -> 27376 bytes en/application-dev/ui/figures/column.jpg | Bin 0 -> 65442 bytes .../ui/figures/common-page-structure.png | Bin 0 -> 37687 bytes .../ui/figures/custom-navigation-bar.png | Bin 18841 -> 18620 bytes .../figures/en-us_image_0000001181823160.gif | Bin 69793 -> 87236 bytes .../figures/en-us_image_0000001224086459.gif | Bin 90342 -> 161141 bytes .../figures/en-us_image_0000001511421252.png | Bin 0 -> 8231 bytes .../figures/en-us_image_0000001511421256.png | Bin 0 -> 8858 bytes .../figures/en-us_image_0000001511421280.png | Bin 0 -> 5735 bytes .../figures/en-us_image_0000001511421288.png | Bin 0 -> 7081 bytes .../figures/en-us_image_0000001511421292.png | Bin 0 -> 19002 bytes .../figures/en-us_image_0000001511421368.png | Bin 0 -> 44289 bytes .../figures/en-us_image_0000001511580864.png | Bin 0 -> 9673 bytes .../figures/en-us_image_0000001511580876.png | Bin 0 -> 5388 bytes .../figures/en-us_image_0000001511580884.png | Bin 0 -> 4235 bytes .../figures/en-us_image_0000001511580908.png | Bin 0 -> 4955 bytes .../figures/en-us_image_0000001511580924.png | Bin 0 -> 52518 bytes .../figures/en-us_image_0000001511740468.png | Bin 0 -> 5778 bytes .../figures/en-us_image_0000001511740484.png | Bin 0 -> 6140 bytes .../figures/en-us_image_0000001511740512.gif | Bin 0 -> 9721940 bytes .../figures/en-us_image_0000001511740532.png | Bin 0 -> 17480 bytes .../figures/en-us_image_0000001511740580.png | Bin 0 -> 14928 bytes .../figures/en-us_image_0000001511900436.png | Bin 0 -> 7959 bytes .../figures/en-us_image_0000001511900440.png | Bin 0 -> 6465 bytes .../figures/en-us_image_0000001511900448.png | Bin 0 -> 8897 bytes .../figures/en-us_image_0000001511900452.png | Bin 0 -> 7032 bytes .../figures/en-us_image_0000001511900460.png | Bin 0 -> 8059 bytes .../figures/en-us_image_0000001511900464.png | Bin 0 -> 4770 bytes .../figures/en-us_image_0000001511900472.png | Bin 0 -> 29851 bytes .../figures/en-us_image_0000001511900480.png | Bin 0 -> 2674 bytes .../figures/en-us_image_0000001511900544.png | Bin 0 -> 9247 bytes .../figures/en-us_image_0000001562700425.png | Bin 0 -> 4904 bytes .../figures/en-us_image_0000001562700445.png | Bin 0 -> 8984 bytes .../figures/en-us_image_0000001562700449.png | Bin 0 -> 11635 bytes .../figures/en-us_image_0000001562700453.png | Bin 0 -> 4955 bytes .../figures/en-us_image_0000001562700469.png | Bin 0 -> 53969 bytes .../figures/en-us_image_0000001562700473.png | Bin 0 -> 25835 bytes .../figures/en-us_image_0000001562700529.png | Bin 0 -> 12947 bytes .../figures/en-us_image_0000001562700537.png | Bin 0 -> 5321 bytes .../figures/en-us_image_0000001562820801.png | Bin 0 -> 8779 bytes .../figures/en-us_image_0000001562820809.png | Bin 0 -> 5879 bytes .../figures/en-us_image_0000001562820813.png | Bin 0 -> 14464 bytes .../figures/en-us_image_0000001562820817.png | Bin 0 -> 4550 bytes .../figures/en-us_image_0000001562820833.png | Bin 0 -> 10577 bytes .../figures/en-us_image_0000001562820845.png | Bin 0 -> 19506 bytes .../figures/en-us_image_0000001562820901.png | Bin 0 -> 2720 bytes .../figures/en-us_image_0000001562940505.png | Bin 0 -> 21332 bytes .../figures/en-us_image_0000001562940521.png | Bin 0 -> 5310 bytes .../figures/en-us_image_0000001562940533.png | Bin 0 -> 21239 bytes .../figures/en-us_image_0000001562940541.png | Bin 0 -> 4211 bytes .../figures/en-us_image_0000001562940549.gif | Bin 0 -> 110643 bytes .../figures/en-us_image_0000001562940565.png | Bin 0 -> 13452 bytes .../figures/en-us_image_0000001562940613.png | Bin 0 -> 2559 bytes .../figures/en-us_image_0000001562940621.png | Bin 0 -> 150579 bytes .../figures/en-us_image_0000001563060677.png | Bin 0 -> 5753 bytes .../figures/en-us_image_0000001563060681.png | Bin 0 -> 6892 bytes .../figures/en-us_image_0000001563060713.png | Bin 0 -> 6121 bytes .../figures/en-us_image_0000001563060729.png | Bin 0 -> 7879 bytes .../figures/en-us_image_0000001563060797.png | Bin 0 -> 10346 bytes en/application-dev/ui/figures/exclusive.gif | Bin 0 -> 7328 bytes .../ui/figures/flex-layout-direction.png | Bin 0 -> 13522 bytes en/application-dev/ui/figures/flex-layout.png | Bin 0 -> 12686 bytes .../ui/figures/flex-spindle-alignment.png | Bin 0 -> 58505 bytes en/application-dev/ui/figures/free1.jpg | Bin 0 -> 17174 bytes en/application-dev/ui/figures/free3.jpg | Bin 0 -> 23678 bytes en/application-dev/ui/figures/landscape.jpg | Bin 0 -> 15719 bytes .../ui/figures/layout-element-omposition.png | Bin 0 -> 29735 bytes .../ui/figures/layout-performace-2.gif | Bin 0 -> 26006 bytes .../ui/figures/layout-performace-3.gif | Bin 0 -> 40574 bytes .../ui/figures/layout-performace-5.gif | Bin 0 -> 42450 bytes .../ui/figures/layout-performace-6.gif | Bin 0 -> 44067 bytes .../ui/figures/layout-performance-1.png | Bin 0 -> 8207 bytes .../ui/figures/layout-performance-4.png | Bin 0 -> 28804 bytes en/application-dev/ui/figures/list1.gif | Bin 0 -> 1766566 bytes en/application-dev/ui/figures/longPress.gif | Bin 0 -> 4239 bytes en/application-dev/ui/figures/menu-bar-2.jpg | Bin 0 -> 21872 bytes en/application-dev/ui/figures/menu-bar.jpg | Bin 0 -> 22207 bytes en/application-dev/ui/figures/mini.jpg | Bin 0 -> 15802 bytes .../ui/figures/pageTransition_None.gif | Bin 0 -> 4149858 bytes .../ui/figures/pageTransition_PushPop.gif | Bin 0 -> 5154390 bytes en/application-dev/ui/figures/pan.gif | Bin 0 -> 63177 bytes en/application-dev/ui/figures/parallel.gif | Bin 0 -> 7172 bytes en/application-dev/ui/figures/pinch.png | Bin 0 -> 94462 bytes en/application-dev/ui/figures/portralit.jpg | Bin 0 -> 15736 bytes .../ui/figures/relative-layout.png | Bin 0 -> 9895 bytes en/application-dev/ui/figures/rotation.png | Bin 0 -> 156598 bytes .../router-add-query-box-before-back.gif | Bin 0 -> 131941 bytes .../ui/figures/router-back-to-home.gif | Bin 0 -> 56114 bytes .../ui/figures/router-jump-to-detail.gif | Bin 0 -> 25367 bytes en/application-dev/ui/figures/sequence.gif | Bin 0 -> 148392 bytes .../ui/figures/sharedTransition.gif | Bin 0 -> 616677 bytes .../ui/figures/single-page-1.jpg | Bin 0 -> 24600 bytes en/application-dev/ui/figures/springCurve.gif | Bin 0 -> 257594 bytes .../ui/figures/springMotion.gif | Bin 0 -> 197011 bytes .../ui/figures/stack-layout-sample.png | Bin 0 -> 9355 bytes .../ui/figures/stack-layout.png | Bin 0 -> 5348 bytes en/application-dev/ui/figures/stroke.jpg | Bin 0 -> 4118 bytes .../ui/figures/strokeLineJoin.jpg | Bin 0 -> 2890 bytes .../ui/figures/strokeopacity.jpg | Bin 0 -> 4124 bytes en/application-dev/ui/figures/swipe.gif | Bin 0 -> 8479 bytes en/application-dev/ui/figures/tabs-layout.png | Bin 12204 -> 16437 bytes en/application-dev/ui/figures/tap.gif | Bin 0 -> 3195 bytes .../{viewport (2).jpg => viewport-2.jpg} | Bin .../{viewport (3).jpg => viewport-3.jpg} | Bin 129 files changed, 646 insertions(+), 375 deletions(-) create mode 100644 en/application-dev/ui/figures/2023022792216(1).jpg create mode 100644 en/application-dev/ui/figures/2023032401632.jpg create mode 100644 en/application-dev/ui/figures/2023032405917.jpg create mode 100644 en/application-dev/ui/figures/2023032411518.jpg create mode 100644 en/application-dev/ui/figures/alignment-relative-anchor-horizontal.png create mode 100644 en/application-dev/ui/figures/alignment-relative-anchor-vertical.png create mode 100644 en/application-dev/ui/figures/arkui-arkts-framework.png create mode 100644 en/application-dev/ui/figures/column.jpg create mode 100644 en/application-dev/ui/figures/common-page-structure.png create mode 100644 en/application-dev/ui/figures/en-us_image_0000001511421252.png create mode 100644 en/application-dev/ui/figures/en-us_image_0000001511421256.png create mode 100644 en/application-dev/ui/figures/en-us_image_0000001511421280.png create mode 100644 en/application-dev/ui/figures/en-us_image_0000001511421288.png create mode 100644 en/application-dev/ui/figures/en-us_image_0000001511421292.png create mode 100644 en/application-dev/ui/figures/en-us_image_0000001511421368.png create mode 100644 en/application-dev/ui/figures/en-us_image_0000001511580864.png create mode 100644 en/application-dev/ui/figures/en-us_image_0000001511580876.png create mode 100644 en/application-dev/ui/figures/en-us_image_0000001511580884.png create mode 100644 en/application-dev/ui/figures/en-us_image_0000001511580908.png create mode 100644 en/application-dev/ui/figures/en-us_image_0000001511580924.png create mode 100644 en/application-dev/ui/figures/en-us_image_0000001511740468.png create mode 100644 en/application-dev/ui/figures/en-us_image_0000001511740484.png create mode 100644 en/application-dev/ui/figures/en-us_image_0000001511740512.gif create mode 100644 en/application-dev/ui/figures/en-us_image_0000001511740532.png create mode 100644 en/application-dev/ui/figures/en-us_image_0000001511740580.png create mode 100644 en/application-dev/ui/figures/en-us_image_0000001511900436.png create mode 100644 en/application-dev/ui/figures/en-us_image_0000001511900440.png create mode 100644 en/application-dev/ui/figures/en-us_image_0000001511900448.png create mode 100644 en/application-dev/ui/figures/en-us_image_0000001511900452.png create mode 100644 en/application-dev/ui/figures/en-us_image_0000001511900460.png create mode 100644 en/application-dev/ui/figures/en-us_image_0000001511900464.png create mode 100644 en/application-dev/ui/figures/en-us_image_0000001511900472.png create mode 100644 en/application-dev/ui/figures/en-us_image_0000001511900480.png create mode 100644 en/application-dev/ui/figures/en-us_image_0000001511900544.png create mode 100644 en/application-dev/ui/figures/en-us_image_0000001562700425.png create mode 100644 en/application-dev/ui/figures/en-us_image_0000001562700445.png create mode 100644 en/application-dev/ui/figures/en-us_image_0000001562700449.png create mode 100644 en/application-dev/ui/figures/en-us_image_0000001562700453.png create mode 100644 en/application-dev/ui/figures/en-us_image_0000001562700469.png create mode 100644 en/application-dev/ui/figures/en-us_image_0000001562700473.png create mode 100644 en/application-dev/ui/figures/en-us_image_0000001562700529.png create mode 100644 en/application-dev/ui/figures/en-us_image_0000001562700537.png create mode 100644 en/application-dev/ui/figures/en-us_image_0000001562820801.png create mode 100644 en/application-dev/ui/figures/en-us_image_0000001562820809.png create mode 100644 en/application-dev/ui/figures/en-us_image_0000001562820813.png create mode 100644 en/application-dev/ui/figures/en-us_image_0000001562820817.png create mode 100644 en/application-dev/ui/figures/en-us_image_0000001562820833.png create mode 100644 en/application-dev/ui/figures/en-us_image_0000001562820845.png create mode 100644 en/application-dev/ui/figures/en-us_image_0000001562820901.png create mode 100644 en/application-dev/ui/figures/en-us_image_0000001562940505.png create mode 100644 en/application-dev/ui/figures/en-us_image_0000001562940521.png create mode 100644 en/application-dev/ui/figures/en-us_image_0000001562940533.png create mode 100644 en/application-dev/ui/figures/en-us_image_0000001562940541.png create mode 100644 en/application-dev/ui/figures/en-us_image_0000001562940549.gif create mode 100644 en/application-dev/ui/figures/en-us_image_0000001562940565.png create mode 100644 en/application-dev/ui/figures/en-us_image_0000001562940613.png create mode 100644 en/application-dev/ui/figures/en-us_image_0000001562940621.png create mode 100644 en/application-dev/ui/figures/en-us_image_0000001563060677.png create mode 100644 en/application-dev/ui/figures/en-us_image_0000001563060681.png create mode 100644 en/application-dev/ui/figures/en-us_image_0000001563060713.png create mode 100644 en/application-dev/ui/figures/en-us_image_0000001563060729.png create mode 100644 en/application-dev/ui/figures/en-us_image_0000001563060797.png create mode 100644 en/application-dev/ui/figures/exclusive.gif create mode 100644 en/application-dev/ui/figures/flex-layout-direction.png create mode 100644 en/application-dev/ui/figures/flex-layout.png create mode 100644 en/application-dev/ui/figures/flex-spindle-alignment.png create mode 100644 en/application-dev/ui/figures/free1.jpg create mode 100644 en/application-dev/ui/figures/free3.jpg create mode 100644 en/application-dev/ui/figures/landscape.jpg create mode 100644 en/application-dev/ui/figures/layout-element-omposition.png create mode 100644 en/application-dev/ui/figures/layout-performace-2.gif create mode 100644 en/application-dev/ui/figures/layout-performace-3.gif create mode 100644 en/application-dev/ui/figures/layout-performace-5.gif create mode 100644 en/application-dev/ui/figures/layout-performace-6.gif create mode 100644 en/application-dev/ui/figures/layout-performance-1.png create mode 100644 en/application-dev/ui/figures/layout-performance-4.png create mode 100644 en/application-dev/ui/figures/list1.gif create mode 100644 en/application-dev/ui/figures/longPress.gif create mode 100644 en/application-dev/ui/figures/menu-bar-2.jpg create mode 100644 en/application-dev/ui/figures/menu-bar.jpg create mode 100644 en/application-dev/ui/figures/mini.jpg create mode 100644 en/application-dev/ui/figures/pageTransition_None.gif create mode 100644 en/application-dev/ui/figures/pageTransition_PushPop.gif create mode 100644 en/application-dev/ui/figures/pan.gif create mode 100644 en/application-dev/ui/figures/parallel.gif create mode 100644 en/application-dev/ui/figures/pinch.png create mode 100644 en/application-dev/ui/figures/portralit.jpg create mode 100644 en/application-dev/ui/figures/relative-layout.png create mode 100644 en/application-dev/ui/figures/rotation.png create mode 100644 en/application-dev/ui/figures/router-add-query-box-before-back.gif create mode 100644 en/application-dev/ui/figures/router-back-to-home.gif create mode 100644 en/application-dev/ui/figures/router-jump-to-detail.gif create mode 100644 en/application-dev/ui/figures/sequence.gif create mode 100644 en/application-dev/ui/figures/sharedTransition.gif create mode 100644 en/application-dev/ui/figures/single-page-1.jpg create mode 100644 en/application-dev/ui/figures/springCurve.gif create mode 100644 en/application-dev/ui/figures/springMotion.gif create mode 100644 en/application-dev/ui/figures/stack-layout-sample.png create mode 100644 en/application-dev/ui/figures/stack-layout.png create mode 100644 en/application-dev/ui/figures/stroke.jpg create mode 100644 en/application-dev/ui/figures/strokeLineJoin.jpg create mode 100644 en/application-dev/ui/figures/strokeopacity.jpg create mode 100644 en/application-dev/ui/figures/swipe.gif create mode 100644 en/application-dev/ui/figures/tap.gif rename en/application-dev/ui/figures/{viewport (2).jpg => viewport-2.jpg} (100%) rename en/application-dev/ui/figures/{viewport (3).jpg => viewport-3.jpg} (100%) 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 e5cedbf9e2..b2903343a1 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 4f7099cc28..8a820840da 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/ui/arkts-animation-overview.md b/en/application-dev/ui/arkts-animation-overview.md index 420a573762..d75619d1c1 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 39cab59adf..27d6817530 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 **\