From 736d4380be211783a97e40ed12e4def885539dee Mon Sep 17 00:00:00 2001 From: "ester.zhou" Date: Mon, 5 Jun 2023 13:47:54 +0800 Subject: [PATCH] Update docs (18613) Signed-off-by: ester.zhou --- en/application-dev/ui/Readme-EN.md | 92 +- .../ui/arkts-animation-overview.md | 27 + .../ui/arkts-common-components-button.md | 261 ++++ .../arkts-common-components-custom-dialog.md | 100 ++ ...ts-common-components-progress-indicator.md | 135 +++ .../arkts-common-components-radio-button.md | 106 ++ .../arkts-common-components-text-display.md | 421 +++++++ .../ui/arkts-common-components-text-input.md | 151 +++ .../arkts-common-components-video-player.md | 268 +++++ .../ui/arkts-common-components-xcomponent.md | 302 +++++ .../arkts-common-events-device-input-event.md | 375 ++++++ .../ui/arkts-common-events-focus-event.md | 1061 +++++++++++++++++ .../arkts-common-events-touch-screen-event.md | 303 +++++ .../arkts-drawing-customization-on-canvas.md | 348 ++++++ en/application-dev/ui/arkts-event-overview.md | 23 + .../ui/arkts-geometric-shape-drawing.md | 288 +++++ .../ui/arkts-gesture-events-binding.md | 125 ++ .../arkts-gesture-events-combined-gestures.md | 202 ++++ .../ui/arkts-gesture-events-single-gesture.md | 377 ++++++ .../arkts-layout-development-create-grid.md | 337 ++++++ .../arkts-layout-development-flex-layout.md | 626 ++++++++++ .../arkts-layout-development-media-query.md | 258 ++++ .../ui/arkts-layout-development-overview.md | 79 ++ ...ts-layout-development-performance-boost.md | 68 ++ ...rkts-layout-development-relative-layout.md | 158 +++ .../arkts-layout-development-stack-layout.md | 135 +++ .../ui/arkts-navigation-navigation.md | 204 ++++ .../ui/arkts-navigation-tabs.md | 371 ++++++ .../ui/arkts-page-transition-animation.md | 361 ++++++ ...-performance-improvement-recommendation.md | 222 +++- .../arkts-popup-and-menu-components-menu.md | 111 ++ en/application-dev/ui/arkts-routing.md | 326 +++++ .../ui/arkts-spring-animation.md | 166 +++ ...s-transition-animation-within-component.md | 256 ++++ .../ui/arkts-ui-development-overview.md | 95 ++ en/application-dev/ui/arkts-zoom-animation.md | 98 ++ .../ui/figures/2023022700701(1).jpg | Bin 0 -> 3332 bytes .../ui/figures/2023022701120(1).jpg | Bin 0 -> 4006 bytes .../ui/figures/2023022792216(1).jpg | Bin 0 -> 2806 bytes .../ui/figures/2023022793003(1).jpg | Bin 0 -> 2632 bytes .../ui/figures/2023022793350(1).jpg | Bin 0 -> 2627 bytes .../ui/figures/2023022793719(1).jpg | Bin 0 -> 2198 bytes .../ui/figures/2023022794031(1).jpg | Bin 0 -> 2618 bytes .../ui/figures/2023022794521(1).jpg | Bin 0 -> 4016 bytes .../ui/figures/2023022795105(1).jpg | Bin 0 -> 3622 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 .../ui/figures/2023032422159.jpg | Bin 0 -> 8740 bytes en/application-dev/ui/figures/GIF.gif | Bin 0 -> 250296 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 .../ui/figures/bottom-navigation.gif | Bin 0 -> 118821 bytes en/application-dev/ui/figures/column.jpg | Bin 0 -> 65442 bytes .../ui/figures/common-page-structure.png | Bin 0 -> 37687 bytes en/application-dev/ui/figures/create.png | Bin 0 -> 1513 bytes en/application-dev/ui/figures/creation-2.jpg | Bin 0 -> 2723 bytes .../ui/figures/custom-navigation-bar.png | Bin 0 -> 18620 bytes en/application-dev/ui/figures/drawimage.PNG | Bin 0 -> 24627 bytes .../figures/en-us_image_0000001511421208.png | Bin 0 -> 9329 bytes .../figures/en-us_image_0000001511421216.png | Bin 0 -> 8285 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_0000001511421260.png | Bin 0 -> 4548 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_0000001511421320.png | Bin 0 -> 17841 bytes .../figures/en-us_image_0000001511421324.gif | Bin 0 -> 660532 bytes .../figures/en-us_image_0000001511421360.gif | Bin 0 -> 81328 bytes .../figures/en-us_image_0000001511421364.gif | Bin 0 -> 209359 bytes .../figures/en-us_image_0000001511421368.png | Bin 0 -> 44289 bytes .../figures/en-us_image_0000001511580828.png | Bin 0 -> 10284 bytes .../figures/en-us_image_0000001511580836.png | Bin 0 -> 10763 bytes .../figures/en-us_image_0000001511580840.png | Bin 0 -> 3890 bytes .../figures/en-us_image_0000001511580844.png | Bin 0 -> 1561 bytes .../figures/en-us_image_0000001511580864.png | Bin 0 -> 9673 bytes .../figures/en-us_image_0000001511580868.png | Bin 0 -> 9112 bytes .../figures/en-us_image_0000001511580872.png | Bin 0 -> 4689 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_0000001511580888.png | Bin 0 -> 13958 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_0000001511580944.png | Bin 0 -> 19768 bytes .../figures/en-us_image_0000001511580976.gif | Bin 0 -> 149755 bytes .../figures/en-us_image_0000001511580980.gif | Bin 0 -> 1812918 bytes .../figures/en-us_image_0000001511740428.png | Bin 0 -> 7425 bytes .../figures/en-us_image_0000001511740436.png | Bin 0 -> 7022 bytes .../figures/en-us_image_0000001511740444.png | Bin 0 -> 14891 bytes .../figures/en-us_image_0000001511740468.png | Bin 0 -> 5778 bytes .../figures/en-us_image_0000001511740472.png | Bin 0 -> 25656 bytes .../figures/en-us_image_0000001511740480.png | Bin 0 -> 24729 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_0000001511740584.gif | Bin 0 -> 74478 bytes .../figures/en-us_image_0000001511900392.png | Bin 0 -> 17075 bytes .../figures/en-us_image_0000001511900400.png | Bin 0 -> 7066 bytes .../figures/en-us_image_0000001511900428.png | Bin 0 -> 28059 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_0000001511900468.gif | Bin 0 -> 64007 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_0000001511900504.png | Bin 0 -> 13215 bytes .../figures/en-us_image_0000001511900508.gif | Bin 0 -> 439529 bytes .../figures/en-us_image_0000001511900540.gif | Bin 0 -> 50927 bytes .../figures/en-us_image_0000001511900544.png | Bin 0 -> 9247 bytes .../figures/en-us_image_0000001562700385.png | Bin 0 -> 25824 bytes .../figures/en-us_image_0000001562700393.png | Bin 0 -> 23495 bytes .../figures/en-us_image_0000001562700409.png | Bin 0 -> 2578 bytes .../figures/en-us_image_0000001562700417.png | Bin 0 -> 4328 bytes .../figures/en-us_image_0000001562700425.png | Bin 0 -> 4904 bytes .../figures/en-us_image_0000001562700437.png | Bin 0 -> 4561 bytes .../figures/en-us_image_0000001562700441.png | Bin 0 -> 1522 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_0000001562700457.png | Bin 0 -> 15924 bytes .../figures/en-us_image_0000001562700461.png | Bin 0 -> 11512 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_0000001562700493.png | Bin 0 -> 20387 bytes .../figures/en-us_image_0000001562700529.png | Bin 0 -> 12947 bytes .../figures/en-us_image_0000001562700533.gif | Bin 0 -> 274239 bytes .../figures/en-us_image_0000001562700537.png | Bin 0 -> 5321 bytes .../figures/en-us_image_0000001562820753.png | Bin 0 -> 20380 bytes .../figures/en-us_image_0000001562820757.png | Bin 0 -> 6051 bytes .../figures/en-us_image_0000001562820761.png | Bin 0 -> 5583 bytes .../figures/en-us_image_0000001562820765.png | Bin 0 -> 2989 bytes .../figures/en-us_image_0000001562820789.png | Bin 0 -> 20000 bytes .../figures/en-us_image_0000001562820801.png | Bin 0 -> 8779 bytes .../figures/en-us_image_0000001562820805.png | Bin 0 -> 39283 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_0000001562820821.png | Bin 0 -> 18040 bytes .../figures/en-us_image_0000001562820825.png | Bin 0 -> 24892 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_0000001562820905.gif | Bin 0 -> 947883 bytes .../figures/en-us_image_0000001562940473.png | Bin 0 -> 38567 bytes .../figures/en-us_image_0000001562940477.png | Bin 0 -> 20321 bytes .../figures/en-us_image_0000001562940481.png | Bin 0 -> 1344 bytes .../figures/en-us_image_0000001562940505.png | Bin 0 -> 21332 bytes .../figures/en-us_image_0000001562940513.png | Bin 0 -> 19074 bytes .../figures/en-us_image_0000001562940521.png | Bin 0 -> 5310 bytes .../figures/en-us_image_0000001562940525.png | Bin 0 -> 3733 bytes .../figures/en-us_image_0000001562940529.png | Bin 0 -> 46229 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_0000001562940617.gif | Bin 0 -> 220849 bytes .../figures/en-us_image_0000001562940621.png | Bin 0 -> 150579 bytes .../figures/en-us_image_0000001563060641.png | Bin 0 -> 6051 bytes .../figures/en-us_image_0000001563060653.png | Bin 0 -> 23596 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_0000001563060685.png | Bin 0 -> 1498 bytes .../figures/en-us_image_0000001563060693.png | Bin 0 -> 6140 bytes .../figures/en-us_image_0000001563060701.png | Bin 0 -> 6158 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_0000001563060793.png | Bin 0 -> 27222 bytes .../figures/en-us_image_0000001563060797.png | Bin 0 -> 10346 bytes en/application-dev/ui/figures/exclusive.gif | Bin 0 -> 7328 bytes .../ui/figures/final-effect.gif | Bin 0 -> 152349 bytes .../ui/figures/fixed-navigation.gif | Bin 0 -> 103141 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 .../ui/figures/forEachTransition2.gif | Bin 0 -> 820506 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/hoverEffect.gif | Bin 0 -> 564101 bytes .../ui/figures/ifElseTransition.gif | Bin 0 -> 1322045 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 en/application-dev/ui/figures/onDestroy.png | Bin 0 -> 25366 bytes en/application-dev/ui/figures/onHover.gif | Bin 0 -> 114759 bytes en/application-dev/ui/figures/onLoad.png | Bin 0 -> 26121 bytes en/application-dev/ui/figures/onMouse1.gif | Bin 0 -> 3904072 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/picture-1.png | Bin 0 -> 40406 bytes en/application-dev/ui/figures/pinch.png | Bin 0 -> 94462 bytes en/application-dev/ui/figures/portralit.jpg | Bin 0 -> 15736 bytes en/application-dev/ui/figures/progress.gif | Bin 0 -> 135894 bytes .../ui/figures/progress_captule.png | Bin 0 -> 23855 bytes .../ui/figures/progress_circle.png | Bin 0 -> 24236 bytes .../ui/figures/progress_ring.png | Bin 0 -> 15847 bytes .../ui/figures/progress_scalering.png | Bin 0 -> 28367 bytes .../ui/figures/relative-layout.png | Bin 0 -> 9895 bytes .../ui/figures/restricted-navigation.gif | Bin 0 -> 308844 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/scenario-1.jpg | Bin 0 -> 3977 bytes en/application-dev/ui/figures/scenario-2.jpg | Bin 0 -> 3432 bytes .../ui/figures/scrollable-navigation.gif | Bin 0 -> 241650 bytes en/application-dev/ui/figures/sequence.gif | Bin 0 -> 148392 bytes .../ui/figures/sharedTransition.gif | Bin 0 -> 616677 bytes .../ui/figures/side-navigation.png | Bin 0 -> 6346 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 .../figures/switching-to-a-specified-tab.gif | Bin 0 -> 110406 bytes en/application-dev/ui/figures/tabs-layout.png | Bin 0 -> 16437 bytes .../ui/figures/tabs-tabscontent.png | Bin 0 -> 10600 bytes en/application-dev/ui/figures/tap.gif | Bin 0 -> 3195 bytes .../ui/figures/top-navigation.gif | Bin 0 -> 296777 bytes en/application-dev/ui/figures/untitled.png | Bin 0 -> 14976 bytes en/application-dev/ui/figures/viewport-2.jpg | Bin 0 -> 4175 bytes en/application-dev/ui/figures/viewport-3.jpg | Bin 0 -> 4259 bytes .../ui/ui-ts-animation-feature.md | 344 ------ .../ui/ui-ts-building-category-grid-layout.md | 371 ------ .../ui/ui-ts-building-category-list-layout.md | 232 ---- .../ui/ui-ts-building-data-model.md | 86 -- .../ui/ui-ts-components-intro.md | 13 - en/application-dev/ui/ui-ts-components-web.md | 263 ---- .../ui/ui-ts-creating-simple-page.md | 518 -------- ...ts-custom-component-lifecycle-callbacks.md | 239 ---- .../ui/ui-ts-developing-intro.md | 158 --- .../ui/ui-ts-drawing-feature.md | 415 ------- en/application-dev/ui/ui-ts-layout-flex.md | 579 --------- .../ui/ui-ts-layout-grid-container-new.md | 395 ------ en/application-dev/ui/ui-ts-layout-grid.md | 273 ----- en/application-dev/ui/ui-ts-layout-linear.md | 370 ------ .../ui/ui-ts-layout-mediaquery.md | 161 --- en/application-dev/ui/ui-ts-layout-stack.md | 61 - en/application-dev/ui/ui-ts-overview.md | 50 - ...i-ts-page-redirection-data-transmission.md | 264 ---- ...-performance-improvement-recommendation.md | 318 ----- 263 files changed, 8805 insertions(+), 5141 deletions(-) create mode 100644 en/application-dev/ui/arkts-animation-overview.md create mode 100644 en/application-dev/ui/arkts-common-components-button.md create mode 100644 en/application-dev/ui/arkts-common-components-custom-dialog.md create mode 100644 en/application-dev/ui/arkts-common-components-progress-indicator.md create mode 100644 en/application-dev/ui/arkts-common-components-radio-button.md create mode 100644 en/application-dev/ui/arkts-common-components-text-display.md create mode 100644 en/application-dev/ui/arkts-common-components-text-input.md create mode 100644 en/application-dev/ui/arkts-common-components-video-player.md create mode 100644 en/application-dev/ui/arkts-common-components-xcomponent.md create mode 100644 en/application-dev/ui/arkts-common-events-device-input-event.md create mode 100644 en/application-dev/ui/arkts-common-events-focus-event.md create mode 100644 en/application-dev/ui/arkts-common-events-touch-screen-event.md create mode 100644 en/application-dev/ui/arkts-drawing-customization-on-canvas.md create mode 100644 en/application-dev/ui/arkts-event-overview.md create mode 100644 en/application-dev/ui/arkts-geometric-shape-drawing.md create mode 100644 en/application-dev/ui/arkts-gesture-events-binding.md create mode 100644 en/application-dev/ui/arkts-gesture-events-combined-gestures.md create mode 100644 en/application-dev/ui/arkts-gesture-events-single-gesture.md create mode 100644 en/application-dev/ui/arkts-layout-development-create-grid.md create mode 100644 en/application-dev/ui/arkts-layout-development-flex-layout.md create mode 100644 en/application-dev/ui/arkts-layout-development-media-query.md create mode 100644 en/application-dev/ui/arkts-layout-development-overview.md create mode 100644 en/application-dev/ui/arkts-layout-development-performance-boost.md create mode 100644 en/application-dev/ui/arkts-layout-development-relative-layout.md create mode 100644 en/application-dev/ui/arkts-layout-development-stack-layout.md create mode 100644 en/application-dev/ui/arkts-navigation-navigation.md create mode 100644 en/application-dev/ui/arkts-navigation-tabs.md create mode 100644 en/application-dev/ui/arkts-page-transition-animation.md create mode 100644 en/application-dev/ui/arkts-popup-and-menu-components-menu.md create mode 100644 en/application-dev/ui/arkts-routing.md create mode 100644 en/application-dev/ui/arkts-spring-animation.md create mode 100644 en/application-dev/ui/arkts-transition-animation-within-component.md create mode 100644 en/application-dev/ui/arkts-ui-development-overview.md create mode 100644 en/application-dev/ui/arkts-zoom-animation.md create mode 100644 en/application-dev/ui/figures/2023022700701(1).jpg create mode 100644 en/application-dev/ui/figures/2023022701120(1).jpg create mode 100644 en/application-dev/ui/figures/2023022792216(1).jpg create mode 100644 en/application-dev/ui/figures/2023022793003(1).jpg create mode 100644 en/application-dev/ui/figures/2023022793350(1).jpg create mode 100644 en/application-dev/ui/figures/2023022793719(1).jpg create mode 100644 en/application-dev/ui/figures/2023022794031(1).jpg create mode 100644 en/application-dev/ui/figures/2023022794521(1).jpg create mode 100644 en/application-dev/ui/figures/2023022795105(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/2023032422159.jpg create mode 100644 en/application-dev/ui/figures/GIF.gif 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/bottom-navigation.gif 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/create.png create mode 100644 en/application-dev/ui/figures/creation-2.jpg create mode 100644 en/application-dev/ui/figures/custom-navigation-bar.png create mode 100644 en/application-dev/ui/figures/drawimage.PNG create mode 100644 en/application-dev/ui/figures/en-us_image_0000001511421208.png create mode 100644 en/application-dev/ui/figures/en-us_image_0000001511421216.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_0000001511421260.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_0000001511421320.png create mode 100644 en/application-dev/ui/figures/en-us_image_0000001511421324.gif create mode 100644 en/application-dev/ui/figures/en-us_image_0000001511421360.gif create mode 100644 en/application-dev/ui/figures/en-us_image_0000001511421364.gif create mode 100644 en/application-dev/ui/figures/en-us_image_0000001511421368.png create mode 100644 en/application-dev/ui/figures/en-us_image_0000001511580828.png create mode 100644 en/application-dev/ui/figures/en-us_image_0000001511580836.png create mode 100644 en/application-dev/ui/figures/en-us_image_0000001511580840.png create mode 100644 en/application-dev/ui/figures/en-us_image_0000001511580844.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_0000001511580868.png create mode 100644 en/application-dev/ui/figures/en-us_image_0000001511580872.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_0000001511580888.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_0000001511580944.png create mode 100644 en/application-dev/ui/figures/en-us_image_0000001511580976.gif create mode 100644 en/application-dev/ui/figures/en-us_image_0000001511580980.gif create mode 100644 en/application-dev/ui/figures/en-us_image_0000001511740428.png create mode 100644 en/application-dev/ui/figures/en-us_image_0000001511740436.png create mode 100644 en/application-dev/ui/figures/en-us_image_0000001511740444.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_0000001511740472.png create mode 100644 en/application-dev/ui/figures/en-us_image_0000001511740480.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_0000001511740584.gif create mode 100644 en/application-dev/ui/figures/en-us_image_0000001511900392.png create mode 100644 en/application-dev/ui/figures/en-us_image_0000001511900400.png create mode 100644 en/application-dev/ui/figures/en-us_image_0000001511900428.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_0000001511900468.gif 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_0000001511900504.png create mode 100644 en/application-dev/ui/figures/en-us_image_0000001511900508.gif create mode 100644 en/application-dev/ui/figures/en-us_image_0000001511900540.gif create mode 100644 en/application-dev/ui/figures/en-us_image_0000001511900544.png create mode 100644 en/application-dev/ui/figures/en-us_image_0000001562700385.png create mode 100644 en/application-dev/ui/figures/en-us_image_0000001562700393.png create mode 100644 en/application-dev/ui/figures/en-us_image_0000001562700409.png create mode 100644 en/application-dev/ui/figures/en-us_image_0000001562700417.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_0000001562700437.png create mode 100644 en/application-dev/ui/figures/en-us_image_0000001562700441.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_0000001562700457.png create mode 100644 en/application-dev/ui/figures/en-us_image_0000001562700461.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_0000001562700493.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_0000001562700533.gif create mode 100644 en/application-dev/ui/figures/en-us_image_0000001562700537.png create mode 100644 en/application-dev/ui/figures/en-us_image_0000001562820753.png create mode 100644 en/application-dev/ui/figures/en-us_image_0000001562820757.png create mode 100644 en/application-dev/ui/figures/en-us_image_0000001562820761.png create mode 100644 en/application-dev/ui/figures/en-us_image_0000001562820765.png create mode 100644 en/application-dev/ui/figures/en-us_image_0000001562820789.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_0000001562820805.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_0000001562820821.png create mode 100644 en/application-dev/ui/figures/en-us_image_0000001562820825.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_0000001562820905.gif create mode 100644 en/application-dev/ui/figures/en-us_image_0000001562940473.png create mode 100644 en/application-dev/ui/figures/en-us_image_0000001562940477.png create mode 100644 en/application-dev/ui/figures/en-us_image_0000001562940481.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_0000001562940513.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_0000001562940525.png create mode 100644 en/application-dev/ui/figures/en-us_image_0000001562940529.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_0000001562940617.gif create mode 100644 en/application-dev/ui/figures/en-us_image_0000001562940621.png create mode 100644 en/application-dev/ui/figures/en-us_image_0000001563060641.png create mode 100644 en/application-dev/ui/figures/en-us_image_0000001563060653.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_0000001563060685.png create mode 100644 en/application-dev/ui/figures/en-us_image_0000001563060693.png create mode 100644 en/application-dev/ui/figures/en-us_image_0000001563060701.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_0000001563060793.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/final-effect.gif create mode 100644 en/application-dev/ui/figures/fixed-navigation.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/forEachTransition2.gif 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/hoverEffect.gif create mode 100644 en/application-dev/ui/figures/ifElseTransition.gif 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/onDestroy.png create mode 100644 en/application-dev/ui/figures/onHover.gif create mode 100644 en/application-dev/ui/figures/onLoad.png create mode 100644 en/application-dev/ui/figures/onMouse1.gif 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/picture-1.png 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/progress.gif create mode 100644 en/application-dev/ui/figures/progress_captule.png create mode 100644 en/application-dev/ui/figures/progress_circle.png create mode 100644 en/application-dev/ui/figures/progress_ring.png create mode 100644 en/application-dev/ui/figures/progress_scalering.png create mode 100644 en/application-dev/ui/figures/relative-layout.png create mode 100644 en/application-dev/ui/figures/restricted-navigation.gif 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/scenario-1.jpg create mode 100644 en/application-dev/ui/figures/scenario-2.jpg create mode 100644 en/application-dev/ui/figures/scrollable-navigation.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/side-navigation.png 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/switching-to-a-specified-tab.gif create mode 100644 en/application-dev/ui/figures/tabs-layout.png create mode 100644 en/application-dev/ui/figures/tabs-tabscontent.png create mode 100644 en/application-dev/ui/figures/tap.gif create mode 100644 en/application-dev/ui/figures/top-navigation.gif create mode 100644 en/application-dev/ui/figures/untitled.png create mode 100644 en/application-dev/ui/figures/viewport-2.jpg create mode 100644 en/application-dev/ui/figures/viewport-3.jpg delete mode 100644 en/application-dev/ui/ui-ts-animation-feature.md delete mode 100644 en/application-dev/ui/ui-ts-building-category-grid-layout.md delete mode 100644 en/application-dev/ui/ui-ts-building-category-list-layout.md delete mode 100644 en/application-dev/ui/ui-ts-building-data-model.md delete mode 100644 en/application-dev/ui/ui-ts-components-intro.md delete mode 100644 en/application-dev/ui/ui-ts-components-web.md delete mode 100644 en/application-dev/ui/ui-ts-creating-simple-page.md delete mode 100644 en/application-dev/ui/ui-ts-custom-component-lifecycle-callbacks.md delete mode 100644 en/application-dev/ui/ui-ts-developing-intro.md delete mode 100644 en/application-dev/ui/ui-ts-drawing-feature.md delete mode 100644 en/application-dev/ui/ui-ts-layout-flex.md delete mode 100644 en/application-dev/ui/ui-ts-layout-grid-container-new.md delete mode 100644 en/application-dev/ui/ui-ts-layout-grid.md delete mode 100644 en/application-dev/ui/ui-ts-layout-linear.md delete mode 100644 en/application-dev/ui/ui-ts-layout-mediaquery.md delete mode 100644 en/application-dev/ui/ui-ts-layout-stack.md delete mode 100644 en/application-dev/ui/ui-ts-overview.md delete mode 100644 en/application-dev/ui/ui-ts-page-redirection-data-transmission.md delete mode 100644 en/application-dev/ui/ui-ts-performance-improvement-recommendation.md diff --git a/en/application-dev/ui/Readme-EN.md b/en/application-dev/ui/Readme-EN.md index 09b8c42877..2828cf8846 100644 --- a/en/application-dev/ui/Readme-EN.md +++ b/en/application-dev/ui/Readme-EN.md @@ -1,36 +1,68 @@ # UI Development - [ArkUI Overview](arkui-overview.md) -- ArkTS-based Declarative Development Paradigm - - [Overview](ui-ts-overview.md) - - [Declarative UI Development Guidelines](ui-ts-developing-intro.md) - - Declarative UI Development Examples - - [Creating a Simple Page](ui-ts-creating-simple-page.md) - - Building a Comprehensive Example - - [Building a Food Data Model](ui-ts-building-data-model.md) - - [Building a Food Category List Layout](ui-ts-building-category-list-layout.md) - - [Building a Food Category Grid Layout](ui-ts-building-category-grid-layout.md) - - [Implementing Page Redirection and Data Transmission](ui-ts-page-redirection-data-transmission.md) - - Adding a Splash Screen Animation - - [Using the Drawing Feature](ui-ts-drawing-feature.md) - - [Using the Animation Feature](ui-ts-animation-feature.md) - - [Common Components](ui-ts-components-intro.md) - - Common Layout Development - - Adaptive Layouts - - [Linear Layout](ui-ts-layout-linear.md) - - [Statck Layout](ui-ts-layout-stack.md) - - [Flex Layout](ui-ts-layout-flex.md) - - [Grid Layout](ui-ts-layout-grid.md) - - Responsive Layouts - - [Grid Layout](ui-ts-layout-grid-container-new.md) - - [Media Query](ui-ts-layout-mediaquery.md) - - [Custom Component Lifecycle Callbacks](ui-ts-custom-component-lifecycle-callbacks.md) - - [Web Component Development](ui-ts-components-web.md) - - [Recommendations for Improving Performance](ui-ts-performance-improvement-recommendation.md) -- JavaScript-compatible Web-like Development Paradigm - - [Overview](ui-js-overview.md) - - Framework Overview - - [File Organization](js-framework-file.md) +- UI Development (ArkTS-based Declarative Development Paradigm) + - [UI Development (ArkTS-based Declarative Development Paradigm) Overview](arkts-ui-development-overview.md) + - Layout Development + - [Layout Overview](arkts-layout-development-overview.md) + - Building a Layout + - [Linear Layout](arkts-layout-development-linear.md) + - [Stack Layout](arkts-layout-development-stack-layout.md) + - [Flex Layout](arkts-layout-development-flex-layout.md) + - [Relative Layout](arkts-layout-development-relative-layout.md) + - [Responsive Grid Layout](arkts-layout-development-grid-layout.md) + - [Media Query](arkts-layout-development-media-query.md) + - [Creating a List](arkts-layout-development-create-list.md) + - [Creating a Grid](arkts-layout-development-create-grid.md) + - [Creating a Swiper](arkts-layout-development-create-looping.md) + - [Improving Layout Performance](arkts-layout-development-performance-boost.md) + - Adding a Component + - Adding a Common Component + - [Button](arkts-common-components-button.md) + - [Radio Button](arkts-common-components-radio-button.md) + - [Toggle](arkts-common-components-switch.md) + - [Progress Indicator](arkts-common-components-progress-indicator.md) + - [Text Display](arkts-common-components-text-display.md) + - [Text Input](arkts-common-components-text-input.md) + - [Custom Dialog Box](arkts-common-components-custom-dialog.md) + - [Video Playback](arkts-common-components-video-player.md) + - [XComponent](arkts-common-components-xcomponent.md) + - Adding a Bubble and Menu + - [Bubble](arkts-popup-and-menu-components-popup.md) + - [Menu](arkts-popup-and-menu-components-menu.md) + - Setting Page Routing and Component Navigation + - [Page Routing](arkts-routing.md) + - Component Navigation + - [Navigation](arkts-navigation-navigation.md) + - [Tabs](arkts-navigation-tabs.md) + - Using Graphics + - [Displaying Images](arkts-graphics-display.md) + - [Drawing Geometric Shapes](arkts-geometric-shape-drawing.md) + - [Drawing Custom Graphics on the Canvas](arkts-drawing-customization-on-canvas.md) + - Using Animation + - [Animation Overview](arkts-animation-overview.md) + - Animation Within a Page + - [Layout Update Animation](arkts-layout-update-animation.md) + - [Transition Animation Within a Component](arkts-transition-animation-within-component.md) + - [Spring Curve Animation](arkts-spring-animation.md) + - Animation Between Pages + - [Zoom Animation](arkts-zoom-animation.md) + - [Page Transition Animation](arkts-page-transition-animation.md) + - Using Interaction Events + - [Interaction Event Overview](arkts-event-overview.md) + - Universal Events + - [Touchscreen Event](arkts-common-events-touch-screen-event.md) + - [Keyboard and Mouse Event](arkts-common-events-device-input-event.md) + - [Focus Event](arkts-common-events-focus-event.md) + - Gesture Events + - [Gesture Binding](arkts-gesture-events-binding.md) + - [Single Gesture](arkts-gesture-events-single-gesture.md) + - [Combined Gestures](arkts-gesture-events-combined-gestures.md) + - [Recommendations for Improving Performance](arkts-performance-improvement-recommendation.md) +- UI Development (JavaScript-compatible Web-like Development Paradigm) + - [UI Development (JavaScript-compatible Web-like Development Paradigm) Overview](ui-js-overview.md) + - Framework Overview + - [File Organization](js-framework-file.md) - ["js" Tag](js-framework-js-tag.md) - [app.js](js-framework-js-file.md) - Syntax diff --git a/en/application-dev/ui/arkts-animation-overview.md b/en/application-dev/ui/arkts-animation-overview.md new file mode 100644 index 0000000000..d75619d1c1 --- /dev/null +++ b/en/application-dev/ui/arkts-animation-overview.md @@ -0,0 +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 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 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 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 + +![en-us_image_0000001562700385](figures/en-us_image_0000001562700385.png) + + +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 + + +![en-us_image_0000001562820753](figures/en-us_image_0000001562820753.png) + + +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-button.md b/en/application-dev/ui/arkts-common-components-button.md new file mode 100644 index 0000000000..82c893d33a --- /dev/null +++ b/en/application-dev/ui/arkts-common-components-button.md @@ -0,0 +1,261 @@ +# Button + + +The **\