diff --git a/en/application-dev/reference/arkui-js/Readme-EN.md b/en/application-dev/reference/arkui-js/Readme-EN.md index 8c0dd7f96ee0f57ad2e542760f552313e3fca391..0bae01a30905cc52e46f5af1cffb9d478717b49e 100644 --- a/en/application-dev/reference/arkui-js/Readme-EN.md +++ b/en/application-dev/reference/arkui-js/Readme-EN.md @@ -60,6 +60,7 @@ - [toolbar](js-components-basic-toolbar.md) - [toolbar-item](js-components-basic-toolbar-item.md) - [toggle](js-components-basic-toggle.md) + - [web](js-components-basic-web.md) - [Media Components](js-components-media.md) - [video](js-components-media-video.md) diff --git a/en/application-dev/reference/arkui-ts/Readme-EN.md b/en/application-dev/reference/arkui-ts/Readme-EN.md index 5877e10c6c2ce94cd929ca648fb1b3c6ea00e27a..2944b62d07492a0b13e5dfe214d53dd7f5ff69db 100644 --- a/en/application-dev/reference/arkui-ts/Readme-EN.md +++ b/en/application-dev/reference/arkui-ts/Readme-EN.md @@ -2,7 +2,7 @@ - Components - Universal Components - - Universal Events + - [Universal Events](ts-universal-event-index.md) - [Click Event](ts-universal-events-click.md) - [Touch Event](ts-universal-events-touch.md) - [Show/Hide Event](ts-universal-events-show-hide.md) @@ -11,7 +11,7 @@ - [Focus Event](ts-universal-focus-event.md) - [Mouse Event](ts-universal-mouse-key.md) - [Component Area Change Event](ts-universal-component-area-change-event.md) - - Universal Attributes + - [Universal Attributes](ts-universal-attributes-index.md) - [Size](ts-universal-attributes-size.md) - [Location](ts-universal-attributes-location.md) - [Layout Constraints](ts-universal-attributes-layout-constraints.md) @@ -48,38 +48,39 @@ - [SwipeGesture](ts-basic-gestures-swipegesture.md) - [Combined Gestures](ts-combined-gestures.md) - Basic Components - - [Blank](ts-basic-components-blank.md) - - [Button](ts-basic-components-button.md) - - [Checkbox](ts-basic-components-checkbox.md) - - [CheckboxGroup](ts-basic-components-checkboxgroup.md) - - [DataPanel](ts-basic-components-datapanel.md) - - [DatePicker](ts-basic-components-datepicker.md) - - [Divider](ts-basic-components-divider.md) - - [Gauge](ts-basic-components-gauge.md) - - [Image](ts-basic-components-image.md) - - [ImageAnimator](ts-basic-components-imageanimator.md) - - [Marquee](ts-basic-components-marquee.md) - - [LoadingProgress](ts-basic-components-loadingprogress.md) - - [Progress](ts-basic-components-progress.md) - - [QRCode](ts-basic-components-qrcode.md) - - [Radio](ts-basic-components-radio.md) - - [Rating](ts-basic-components-rating.md) - - [Search](ts-basic-components-search.md) - - [Select](ts-basic-components-select.md) - - [Slider](ts-basic-components-slider.md) - - [Span](ts-basic-components-span.md) - - [Text](ts-basic-components-text.md) - - [TextArea](ts-basic-components-textarea.md) - - [TextInput](ts-basic-components-textinput.md) - - [TextPicker](ts-basic-components-textpicker.md) - - [TextTimer](ts-basic-components-texttimer.md) - - [TimePicker](ts-basic-components-timepicker.md) - - [Toggle](ts-basic-components-toggle.md) - - [TextClock](ts-basic-components-textclock.md) - - [Web](ts-basic-components-web.md) - - [RichText](ts-basic-components-richtext.md) - - [Xcomponent](ts-basic-components-xcomponent.md) - - [PluginComponent](ts-basic-components-plugincomponent.md) + - [Blank](ts-basic-components-blank.md) + - [Button](ts-basic-components-button.md) + - [Checkbox](ts-basic-components-checkbox.md) + - [CheckboxGroup](ts-basic-components-checkboxgroup.md) + - [DataPanel](ts-basic-components-datapanel.md) + - [DatePicker](ts-basic-components-datepicker.md) + - [Divider](ts-basic-components-divider.md) + - [Gauge](ts-basic-components-gauge.md) + - [Image](ts-basic-components-image.md) + - [ImageAnimator](ts-basic-components-imageanimator.md) + - [LoadingProgress](ts-basic-components-loadingprogress.md) + - [Marquee](ts-basic-components-marquee.md) + - [PatternLock](ts-basic-components-patternlock.md) + - [PluginComponent](ts-basic-components-plugincomponent.md) + - [Progress](ts-basic-components-progress.md) + - [QRCode](ts-basic-components-qrcode.md) + - [Radio](ts-basic-components-radio.md) + - [Rating](ts-basic-components-rating.md) + - [RichText](ts-basic-components-richtext.md) + - [Search](ts-basic-components-search.md) + - [Select](ts-basic-components-select.md) + - [Slider](ts-basic-components-slider.md) + - [Span](ts-basic-components-span.md) + - [Text](ts-basic-components-text.md) + - [TextArea](ts-basic-components-textarea.md) + - [TextClock](ts-basic-components-textclock.md) + - [TextInput](ts-basic-components-textinput.md) + - [TextPicker](ts-basic-components-textpicker.md) + - [TextTimer](ts-basic-components-texttimer.md) + - [TimePicker](ts-basic-components-timepicker.md) + - [Toggle](ts-basic-components-toggle.md) + - [Web](ts-basic-components-web.md) + - [Xcomponent](ts-basic-components-xcomponent.md) - Container Components - [AlphabetIndexer](ts-container-alphabet-indexer.md) - [Badge](ts-container-badge.md) @@ -95,18 +96,18 @@ - [Navigator](ts-container-navigator.md) - [Navigation](ts-basic-components-navigation.md) - [Panel](ts-container-panel.md) + - [Refresh](ts-container-refresh.md) - [Row](ts-container-row.md) - [RowSplit](ts-container-rowsplit.md) - [Scroll](ts-container-scroll.md) - [ScrollBar](ts-basic-components-scrollbar.md) - [SideBarContainer](ts-container-sidebarcontainer.md) - [Stack](ts-container-stack.md) + - [Stepper](ts-basic-components-stepper.md) + - [StepperItem](ts-basic-components-stepperitem.md) - [Swiper](ts-container-swiper.md) - [Tabs](ts-container-tabs.md) - [TabContent](ts-container-tabcontent.md) - - [Refresh](ts-container-refresh.md) - - [Stepper](ts-basic-components-stepper.md) - - [StepperItem](ts-basic-components-stepperitem.md) - Media Components - [Video](ts-media-components-video.md) - Drawing Components @@ -147,5 +148,4 @@ - [Time Picker Dialog Box](ts-methods-timepicker-dialog.md) - [Text Picker Dialog Box](ts-methods-textpicker-dialog.md) - [Menu](ts-methods-menu.md) -- Appendix - - [Built-in Enums](ts-appendix-enums.md) +- [Built-in Enums](ts-appendix-enums.md) diff --git a/en/application-dev/reference/arkui-ts/figures/loadingProgress.png b/en/application-dev/reference/arkui-ts/figures/loadingProgress.png new file mode 100644 index 0000000000000000000000000000000000000000..afc52b1a469c858e3029282e193b684114803db0 Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/loadingProgress.png differ diff --git a/en/application-dev/reference/arkui-ts/ts-animation.md b/en/application-dev/reference/arkui-ts/ts-animation.md deleted file mode 100644 index ac7fe89a0c0c6620648a11317633812a8033ccf0..0000000000000000000000000000000000000000 --- a/en/application-dev/reference/arkui-ts/ts-animation.md +++ /dev/null @@ -1,11 +0,0 @@ -# Animation - -- [AnimatorProperty](ts-animatorproperty.md) -- [Explicit Animation](ts-explicit-animation.md) -- Transition Animation - - [Page Transition](ts-page-transition-animation.md) - - [Component Transition](ts-transition-animation-component.md) - - [Transition of Shared Elements](ts-transition-animation-shared-elements.md) -- [Motion Path Animation](ts-motion-path-animation.md) -- [Matrix Transformation](ts-matrix-transformation.md) -- [Interpolation Calculation](ts-interpolation-calculation.md) \ No newline at end of file diff --git a/en/application-dev/reference/arkui-ts/ts-appendix.md b/en/application-dev/reference/arkui-ts/ts-appendix.md deleted file mode 100644 index 1c5695fcbd4625299dc554d307cc7993d4603add..0000000000000000000000000000000000000000 --- a/en/application-dev/reference/arkui-ts/ts-appendix.md +++ /dev/null @@ -1,5 +0,0 @@ -# Appendix - - - -- **[Built-in Enums](ts-appendix-enums.md)** \ No newline at end of file diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-loadingprogress.md b/en/application-dev/reference/arkui-ts/ts-basic-components-loadingprogress.md new file mode 100644 index 0000000000000000000000000000000000000000..2550e50bee09c3ba09580a996a7fb4e171abe13f --- /dev/null +++ b/en/application-dev/reference/arkui-ts/ts-basic-components-loadingprogress.md @@ -0,0 +1,44 @@ +# LoadingProgress + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE** +> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version. + +The **** component is used to display the loading progress. + +## Required Permissions + +None + +## Child Components + +None + +## APIs + +LoadingProgress() + +Creates a **LoadingProgress** instance. + +## Attributes + +| Name | Type | Default Value | Description | +| ----- | ----- | ------------- | ---------------------------------------- | +| color | Color | - | Foreground color of the loading progress bar. | + +## Example + +``` +@Entry +@Component +struct LoadingProgressExample { + build() { + Column({ space: 5 }) { + Text('Orbital LoadingProgress ').fontSize(9).fontColor(0xCCCCCC).width('90%') + LoadingProgress() + .color(Color.Blue) + }.width('100%').margin({ top: 5 }) + } +} +``` + +![zh-cn_image_0000001198839004](figures/loadingProgress.png) \ No newline at end of file diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components.md b/en/application-dev/reference/arkui-ts/ts-basic-components.md deleted file mode 100644 index e36410962c24eec65a7710901de82a9e43001c3c..0000000000000000000000000000000000000000 --- a/en/application-dev/reference/arkui-ts/ts-basic-components.md +++ /dev/null @@ -1,33 +0,0 @@ -# Basic Components - -- [Blank](ts-basic-components-blank.md) -- [Button](ts-basic-components-button.md) -- [Checkbox](ts-basic-components-checkbox.md) -- [CheckboxGroup](ts-basic-components-checkboxgroup.md) -- [DataPanel](ts-basic-components-datapanel.md) -- [DatePicker](ts-basic-components-datepicker.md) -- [Divider](ts-basic-components-divider.md) -- [Gauge](ts-basic-components-gauge.md) -- [Image](ts-basic-components-image.md) -- [ImageAnimator](ts-basic-components-imageanimator.md) -- [Marquee](ts-basic-components-marquee.md) -- [LoadingProgress](ts-basic-components-loadingprogress.md) -- [Progress](ts-basic-components-progress.md) -- [QRCode](ts-basic-components-qrcode.md) -- [Radio](ts-basic-components-radio.md) -- [Rating](ts-basic-components-rating.md) -- [Search](ts-basic-components-search.md) -- [Select](ts-basic-components-select.md) -- [Slider](ts-basic-components-slider.md) -- [Span](ts-basic-components-span.md) -- [Text](ts-basic-components-text.md) -- [TextArea](ts-basic-components-textarea.md) -- [TextInput](ts-basic-components-textinput.md) -- [TextPicker](ts-basic-components-textpicker.md) -- [TextTimer](ts-basic-components-texttimer.md) -- [Toggle](ts-basic-components-toggle.md) -- [TextClock](ts-basic-components-textclock.md) -- [Web](ts-basic-components-web.md) -- [RichText](ts-basic-components-richtext.md) -- [Xcomponent](ts-basic-components-xcomponent.md) -- [PluginComponent](ts-basic-components-plugincomponent.md) \ No newline at end of file diff --git a/en/application-dev/reference/arkui-ts/ts-basic-gestures.md b/en/application-dev/reference/arkui-ts/ts-basic-gestures.md deleted file mode 100644 index 25046a17e29a8eb3effb693fcc1b698be32d24dd..0000000000000000000000000000000000000000 --- a/en/application-dev/reference/arkui-ts/ts-basic-gestures.md +++ /dev/null @@ -1,15 +0,0 @@ -# Basic Gestures - - - -- **[TapGesture](ts-basic-gestures-tapgesture.md)** - -- **[LongPressGesture](ts-basic-gestures-longpressgesture.md)** - -- **[PanGesture](ts-basic-gestures-pangesture.md)** - -- **[PinchGesture](ts-basic-gestures-pinchgesture.md)** - -- **[RotationGesture](ts-basic-gestures-rotationgesture.md)** - -- **[SwipeGesture](ts-basic-gestures-swipegesture.md)** \ No newline at end of file diff --git a/en/application-dev/reference/arkui-ts/ts-components-canvas.md b/en/application-dev/reference/arkui-ts/ts-components-canvas.md deleted file mode 100644 index c6dfbdb87c20e7b51fcc1b300e85f217ec6352bd..0000000000000000000000000000000000000000 --- a/en/application-dev/reference/arkui-ts/ts-components-canvas.md +++ /dev/null @@ -1,19 +0,0 @@ -# Canvas Components - - - -- **[Canvas](ts-components-canvas-canvas.md)** - -- **[CanvasRenderingContext2D](ts-canvasrenderingcontext2d.md)** - -- **[OffscreenCanvasRenderingConxt2D](ts-offscreencanvasrenderingcontext2d.md)** - -- **[Lottie](ts-components-canvas-lottie.md)** - -- **[Path2D](ts-components-canvas-path2d.md)** - -- **[CanvasGradient](ts-components-canvas-canvasgradient.md)** - -- **[ImageBitmap](ts-components-canvas-imagebitmap.md)** - -- **[ImageData](ts-components-canvas-imagedata.md)** \ No newline at end of file diff --git a/en/application-dev/reference/arkui-ts/ts-components-container.md b/en/application-dev/reference/arkui-ts/ts-components-container.md deleted file mode 100644 index c2454b344bc42700b5e238faacc4d8706d8fc79c..0000000000000000000000000000000000000000 --- a/en/application-dev/reference/arkui-ts/ts-components-container.md +++ /dev/null @@ -1,30 +0,0 @@ -# Container Components - - - -- [AlphabetIndexer](ts-container-alphabet-indexer.md) -- [Badge](ts-container-badge.md) -- [Column](ts-container-column.md) -- [ColumnSplit](ts-container-columnsplit.md) -- [Counter](ts-container-counter.md) -- [Flex](ts-container-flex.md) -- [GridContainer](ts-container-gridcontainer.md) -- [Grid](ts-container-grid.md) -- [GridItem](ts-container-griditem.md) -- [List](ts-container-list.md) -- [ListItem](ts-container-listitem.md) -- [Navigator](ts-container-navigator.md) -- [Navigation](ts-basic-components-navigation.md) -- [Panel](ts-container-panel.md) -- [Row](ts-container-row.md) -- [RowSplit](ts-container-rowsplit.md) -- [Scroll](ts-container-scroll.md) -- [ScrollBar](ts-basic-components-scrollbar.md) -- [SideBarContainer](ts-container-sidebarcontainer.md) -- [Stack](ts-container-stack.md) -- [Swiper](ts-container-swiper.md) -- [Tabs](ts-container-tabs.md) -- [TabContent](ts-container-tabcontent.md) -- [Refresh](ts-container-refresh.md) -- [Stepper](ts-basic-components-stepper.md) -- [StepperItem](ts-basic-components-stepperitem.md) \ No newline at end of file diff --git a/en/application-dev/reference/arkui-ts/ts-components.md b/en/application-dev/reference/arkui-ts/ts-components.md deleted file mode 100644 index 02d344c8622210f0012048ca81e64fe8b40548df..0000000000000000000000000000000000000000 --- a/en/application-dev/reference/arkui-ts/ts-components.md +++ /dev/null @@ -1,13 +0,0 @@ -# Components - -- [Universal Components](ts-universal-components.md) - -- [Basic Components](ts-basic-components.md) - -- [Container Components](ts-components-container.md) - -- [Drawing Components](ts-drawing-components.md) - -- [Media Components](ts-media-components.md) - -- [Canvas Components](ts-components-canvas.md) \ No newline at end of file diff --git a/en/application-dev/reference/arkui-ts/ts-drawing-components.md b/en/application-dev/reference/arkui-ts/ts-drawing-components.md deleted file mode 100644 index 853d7b3d98da24c39b5b057c1d254856d7df8352..0000000000000000000000000000000000000000 --- a/en/application-dev/reference/arkui-ts/ts-drawing-components.md +++ /dev/null @@ -1,19 +0,0 @@ -# Drawing Components - - - -- **[Circle](ts-drawing-components-circle.md)** - -- **[Ellipse](ts-drawing-components-ellipse.md)** - -- **[Line](ts-drawing-components-line.md)** - -- **[Polyline](ts-drawing-components-polyline.md)** - -- **[Polygon](ts-drawing-components-polygon.md)** - -- **[Path](ts-drawing-components-path.md)** - -- **[Rect](ts-drawing-components-rect.md)** - -- **[Shape](ts-drawing-components-shape.md)** \ No newline at end of file diff --git a/en/application-dev/reference/arkui-ts/ts-gesture-processing.md b/en/application-dev/reference/arkui-ts/ts-gesture-processing.md deleted file mode 100644 index e40e024a5d750d9992a1ef7ba60f0d307b6c7d89..0000000000000000000000000000000000000000 --- a/en/application-dev/reference/arkui-ts/ts-gesture-processing.md +++ /dev/null @@ -1,9 +0,0 @@ -# Gesture Processing - - - -- **[Combined Gestures](ts-combined-gestures.md)** - -- **[Gesture Binding Methods](ts-gesture-settings.md)** - -- **[Basic Gestures](ts-basic-gestures.md)** \ No newline at end of file diff --git a/en/application-dev/reference/arkui-ts/ts-global-ui-methods.md b/en/application-dev/reference/arkui-ts/ts-global-ui-methods.md deleted file mode 100644 index 6d3cd8788ac81edd831ee7835e9111c8250513a4..0000000000000000000000000000000000000000 --- a/en/application-dev/reference/arkui-ts/ts-global-ui-methods.md +++ /dev/null @@ -1,12 +0,0 @@ -# Global UI Methods - - - -- [Image Cache](ts-methods-image-cache.md) -- Pop-up Window - - [Alert Dialog Box](ts-methods-alert-dialog-box.md) - - [Action Sheet](ts-methods-action-sheet.md) - - [Custom Dialog Box](ts-methods-custom-dialog-box.md) - - [Date Picker Dialog Box](ts-methods-datepicker-dialog.md) - - [Text Picker Dialog Box](ts-methods-textpicker-dialog.md) -- [Menu](ts-methods-menu.md) \ No newline at end of file diff --git a/en/application-dev/reference/arkui-ts/ts-media-components.md b/en/application-dev/reference/arkui-ts/ts-media-components.md deleted file mode 100644 index 51006bbc82a83d001c68a55c5246f8642479027d..0000000000000000000000000000000000000000 --- a/en/application-dev/reference/arkui-ts/ts-media-components.md +++ /dev/null @@ -1,5 +0,0 @@ -# Media Components - - - -- **[Video](ts-media-components-video.md)** \ No newline at end of file diff --git a/en/application-dev/reference/arkui-ts/ts-methods-popup-window.md b/en/application-dev/reference/arkui-ts/ts-methods-popup-window.md deleted file mode 100644 index d73efbd8c8d9e8ab1a05d383a8dd2d810df0b486..0000000000000000000000000000000000000000 --- a/en/application-dev/reference/arkui-ts/ts-methods-popup-window.md +++ /dev/null @@ -1,9 +0,0 @@ -# Pop-up Window - - - -- **[Alert Dialog Box](ts-methods-alert-dialog-box.md)** - -- **[Action Sheet](ts-methods-action-sheet.md)** - -- **[Custom Dialog Box](ts-methods-custom-dialog-box.md)** \ No newline at end of file diff --git a/en/application-dev/reference/arkui-ts/ts-transition-animation.md b/en/application-dev/reference/arkui-ts/ts-transition-animation.md deleted file mode 100644 index 5fd0655ea2f80cadeb2c63392c9602929d96c81d..0000000000000000000000000000000000000000 --- a/en/application-dev/reference/arkui-ts/ts-transition-animation.md +++ /dev/null @@ -1,9 +0,0 @@ -# Transition Animation - - - -- **[Page Transition](ts-page-transition-animation.md)** - -- **[Component Transition](ts-transition-animation-component.md)** - -- **[Transition of Shared Elements](ts-transition-animation-shared-elements.md)** \ No newline at end of file diff --git a/en/application-dev/reference/arkui-ts/ts-universal-attributes.md b/en/application-dev/reference/arkui-ts/ts-universal-attributes-index.md similarity index 100% rename from en/application-dev/reference/arkui-ts/ts-universal-attributes.md rename to en/application-dev/reference/arkui-ts/ts-universal-attributes-index.md diff --git a/en/application-dev/reference/arkui-ts/ts-universal-components.md b/en/application-dev/reference/arkui-ts/ts-universal-components.md deleted file mode 100644 index 35d2a841f25a6884ca690a19fdc068d3fad4e1a8..0000000000000000000000000000000000000000 --- a/en/application-dev/reference/arkui-ts/ts-universal-components.md +++ /dev/null @@ -1,9 +0,0 @@ -# Universal Components - - - -- **[Universal Events](ts-universal-events.md)** - -- **[Universal Attributes](ts-universal-attributes.md)** - -- **[Gesture Processing](ts-gesture-processing.md)** \ No newline at end of file diff --git a/en/application-dev/reference/arkui-ts/ts-universal-events.md b/en/application-dev/reference/arkui-ts/ts-universal-events-index.md similarity index 100% rename from en/application-dev/reference/arkui-ts/ts-universal-events.md rename to en/application-dev/reference/arkui-ts/ts-universal-events-index.md diff --git a/zh-cn/application-dev/quick-start/basic-resource-file-categories.md b/zh-cn/application-dev/quick-start/basic-resource-file-categories.md index 97cdaa0ab35c5fed21c5b15950530cdca098fedb..d2ca64a3857ce8027ff494705bfc99c5790ee3dd 100644 --- a/zh-cn/application-dev/quick-start/basic-resource-file-categories.md +++ b/zh-cn/application-dev/quick-start/basic-resource-file-categories.md @@ -1,5 +1,6 @@ # 资源文件的分类 +应用开发中使用的各类资源文件，需要放入特定子目录中存储管理。 ## resources目录 @@ -24,11 +25,11 @@ resources **表1** resources目录分类 -| 分类 | base目录与限定词目录 | rawfile目录 | -| -------- | -------- | -------- | -| 组织形式 | 按照两级目录形式来组织，目录命名必须符合规范，以便根据设备状态去匹配相应目录下的资源文件。
  一级子目录为**base目录**和**限定词目录**。
- base目录是默认存在的目录。当应用的resources资源目录中没有与设备状态匹配的限定词目录时，会自动引用该目录中的资源文件。
- 限定词目录需要开发者自行创建。目录名称由一个或多个表征应用场景或设备特征的限定词组合而成，具体要求参见[限定词目录](#限定词目录)。
二级子目录为**资源目录**，用于存放字符串、颜色、布尔值等基础元素，以及媒体、动画、布局等资源文件，具体要求参见[资源组目录](#资源组目录)。 | 支持创建多层子目录，目录名称可以自定义，文件夹内可以自由放置各类资源文件。
rawfile目录的文件不会根据设备状态去匹配不同的资源。 | -| 编译方式 | 目录中的资源文件会被编译成二进制文件，并赋予资源文件ID。 | 目录中的资源文件会被直接打包进应用，不经过编译，也不会被赋予资源文件ID。 | -| 引用方式 | 通过指定资源类型（type）和资源名称（name）来引用。 | 通过指定文件路径和文件名来引用。 | +| 分类 | base目录与限定词目录 | 限定词目录 | rawfile目录 | +| ---- | ---------------------------------------- | ---------------------------------------- | ---------------------------------------- | +| 组织形式 | base目录是默认存在的目录。当应用的resources目录中没有与设备状态匹配的限定词目录时，会自动引用该目录中的资源文件。
base目录的二级子目录为**资源组目录**，用于存放字符串、颜色、布尔值等基础元素，以及媒体、动画、布局等资源文件，具体要求参见[资源组目录](#资源组目录)。 | 限定词目录需要开发者自行创建。目录名称由一个或多个表征应用场景或设备特征的限定词组合而成，具体要求参见[限定词目录](#限定词目录)。
限定词目录的二级子目录为**资源组目录**，用于存放字符串、颜色、布尔值等基础元素，以及媒体、动画、布局等资源文件，具体要求参见[资源组目录](#资源组目录)。 | 支持创建多层子目录，目录名称可以自定义，文件夹内可以自由放置各类资源文件。
rawfile目录的文件不会根据设备状态去匹配不同的资源。 | +| 编译方式 | 目录中的资源文件会被编译成二进制文件，并赋予资源文件ID。 | 目录中的资源文件会被编译成二进制文件，并赋予资源文件ID。 | 目录中的资源文件会被直接打包进应用，不经过编译，也不会被赋予资源文件ID。 | +| 引用方式 | 通过指定资源类型（type）和资源名称（name）来引用。 | 通过指定资源类型（type）和资源名称（name）来引用。 | 通过指定文件路径和文件名来引用。 | ## 限定词目录 @@ -43,17 +44,17 @@ resources - 限定词的取值范围：每类限定词的取值必须符合限定词取值要求表中的条件，否则，将无法匹配目录中的资源文件。 **表2** 限定词取值要求 - - | 限定词类型 | 含义与取值说明 | - | -------- | -------- | - | 移动国家码和移动网络码 | 移动国家码（MCC）和移动网络码（MNC）的值取自设备注册的网络。MCC后面可以跟随MNC，使用下划线（_）连接，也可以单独使用。例如：mcc460表示中国，mcc460_mnc00表示中国_中国移动。
详细取值范围，请查阅**ITU-T E.212**（国际电联相关标准）。 | - | 语言 | 表示设备使用的语言类型，由2~3个小写字母组成。例如：zh表示中文，en表示英语，mai表示迈蒂利语。
详细取值范围，请查阅**ISO 639**（ISO制定的语言编码标准）。 | - | 文字 | 表示设备使用的文字类型，由1个大写字母（首字母）和3个小写字母组成。例如：Hans表示简体中文，Hant表示繁体中文。
详细取值范围，请查阅**ISO 15924**（ISO制定的文字编码标准）。 | - | 国家或地区 | 表示用户所在的国家或地区，由2~3个大写字母或者3个数字组成。例如：CN表示中国，GB表示英国。
详细取值范围，请查阅**ISO 3166-1**（ISO制定的国家和地区编码标准）。 | - | 横竖屏 | 表示设备的屏幕方向，取值如下：
- vertical：竖屏
- horizontal：横屏 | - | 设备类型 | 表示设备的类型，取值如下：
- phone：手机
- tablet：平板
- car：车机
- tv：智慧屏
- wearable：智能穿戴 | - | 颜色模式 | 表示设备的颜色模式，取值如下：
- dark：深色模式
- light：浅色模式 | - | 屏幕密度 | 表示设备的屏幕密度（单位为dpi），取值如下：
- sdpi：表示小规模的屏幕密度（Small-scale Dots Per Inch），适用于dpi取值为(0, 120]的设备。
- mdpi：表示中规模的屏幕密度（Medium-scale Dots Per Inch），适用于dpi取值为(120, 160]的设备。
- ldpi：表示大规模的屏幕密度（Large-scale Dots Per Inch），适用于dpi取值为(160, 240]的设备。
- xldpi：表示特大规模的屏幕密度（Extra Large-scale Dots Per Inch），适用于dpi取值为(240, 320]的设备。
- xxldpi：表示超大规模的屏幕密度（Extra Extra Large-scale Dots Per Inch），适用于dpi取值为(320, 480]的设备。
- xxxldpi：表示超特大规模的屏幕密度（Extra Extra Extra Large-scale Dots Per Inch），适用于dpi取值为(480, 640]的设备。 | + +| 限定词类型 | 含义与取值说明 | +| ----------- | ---------------------------------------- | +| 移动国家码和移动网络码 | 移动国家码（MCC）和移动网络码（MNC）的值取自设备注册的网络。MCC后面可以跟随MNC，使用下划线（_）连接，也可以单独使用。例如：mcc460表示中国，mcc460_mnc00表示中国_中国移动。
详细取值范围，请查阅**ITU-T E.212**（国际电联相关标准）。 | +| 语言 | 表示设备使用的语言类型，由2~3个小写字母组成。例如：zh表示中文，en表示英语，mai表示迈蒂利语。
详细取值范围，请查阅**ISO 639**（ISO制定的语言编码标准）。 | +| 文字 | 表示设备使用的文字类型，由1个大写字母（首字母）和3个小写字母组成。例如：Hans表示简体中文，Hant表示繁体中文。
详细取值范围，请查阅**ISO 15924**（ISO制定的文字编码标准）。 | +| 国家或地区 | 表示用户所在的国家或地区，由2~3个大写字母或者3个数字组成。例如：CN表示中国，GB表示英国。
详细取值范围，请查阅**ISO 3166-1**（ISO制定的国家和地区编码标准）。 | +| 横竖屏 | 表示设备的屏幕方向，取值如下：
- vertical：竖屏
- horizontal：横屏 | +| 设备类型 | 表示设备的类型，取值如下：
- phone：手机
- tablet：平板
- car：车机
- tv：智慧屏
- wearable：智能穿戴 | +| 颜色模式 | 表示设备的颜色模式，取值如下：
- dark：深色模式
- light：浅色模式 | +| 屏幕密度 | 表示设备的屏幕密度（单位为dpi），取值如下：
- sdpi：表示小规模的屏幕密度（Small-scale Dots Per Inch），适用于dpi取值为(0, 120]的设备。
- mdpi：表示中规模的屏幕密度（Medium-scale Dots Per Inch），适用于dpi取值为(120, 160]的设备。
- ldpi：表示大规模的屏幕密度（Large-scale Dots Per Inch），适用于dpi取值为(160, 240]的设备。
- xldpi：表示特大规模的屏幕密度（Extra Large-scale Dots Per Inch），适用于dpi取值为(240, 320]的设备。
- xxldpi：表示超大规模的屏幕密度（Extra Extra Large-scale Dots Per Inch），适用于dpi取值为(320, 480]的设备。
- xxxldpi：表示超特大规模的屏幕密度（Extra Extra Extra Large-scale Dots Per Inch），适用于dpi取值为(480, 640]的设备。 | **限定词目录与设备状态的匹配规则** @@ -69,11 +70,11 @@ base目录与限定词目录下面可以创建资源组目录（包括element、 **表3** **资源组目录说明** -| 资源组目录 | 目录说明 | 资源文件 | -| -------- | -------- | -------- | -| element | 表示元素资源，以下每一类数据都采用相应的JSON文件来表征。
- boolean，布尔型
- color，颜色
- float，浮点型
- intarray，整型数组
- integer，整型
- pattern，样式
- plural，复数形式
- strarray，字符串数组
- string，字符串 | element目录中的文件名称建议与下面的文件名保持一致。每个文件中只能包含同一类型的数据。
- boolean.json
- color.json
- float.json
- intarray.json
- integer.json
- pattern.json
- plural.json
- strarray.json
- string.json | -| media | 表示媒体资源，包括图片、音频、视频等非文本格式的文件。 | 文件名可自定义，例如：icon.png。 | -| animation | 表示动画资源，采用XML文件格式。 | 文件名可自定义，例如：zoom_in.xml。 | -| layout | 表示布局资源，采用XML文件格式。 | 文件名可自定义，例如：home_layout.xml。 | -| graphic | 表示可绘制资源，采用XML文件格式。 | 文件名可自定义，例如：notifications_dark.xml。 | -| profile | 表示其他类型文件，以原始文件形式保存。 | 文件名可自定义。 | +| 资源组目录 | 目录说明 | 资源文件 | +| --------- | ---------------------------------------- | ---------------------------------------- | +| element | 表示元素资源，以下每一类数据都采用相应的JSON文件来表征。
- boolean，布尔型
- color，颜色
- float，浮点型
- intarray，整型数组
- integer，整型
- pattern，样式
- plural，复数形式
- strarray，字符串数组
- string，字符串 | element目录中的文件名称建议与下面的文件名保持一致。每个文件中只能包含同一类型的数据。
- boolean.json
- color.json
- float.json
- intarray.json
- integer.json
- pattern.json
- plural.json
- strarray.json
- string.json | +| media | 表示媒体资源，包括图片、音频、视频等非文本格式的文件。 | 文件名可自定义，例如：icon.png。 | +| animation | 表示动画资源，采用XML文件格式。 | 文件名可自定义，例如：zoom_in.xml。 | +| layout | 表示布局资源，采用XML文件格式。 | 文件名可自定义，例如：home_layout.xml。 | +| graphic | 表示可绘制资源，采用XML文件格式。 | 文件名可自定义，例如：notifications_dark.xml。 | +| profile | 表示其他类型文件，以原始文件形式保存。 | 文件名可自定义。 | diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-components-canvas-lottie.md b/zh-cn/application-dev/reference/arkui-ts/ts-components-canvas-lottie.md index 3ce5690369824712c1afecab6115ad301cc521fc..68fa3939ca5c3a0d209c7ecf5c05dfe843af52c7 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-components-canvas-lottie.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-components-canvas-lottie.md @@ -28,15 +28,15 @@ path: string, container: object, render: string, loop: boolean, autoplay: boolea 加载动画，须提前声明Animator('__lottie_ets')对象，并在Canvas完成布局后调用。可配合Canvas组件生命周期接口使用，比如onAppear()与onPageShow()。 - 参数 - | 参数 | 类型 | 必填 | 描述 | - | -------- | -------- | -------- | -------- | - | path | string | 是 | hap包内动画资源文件路径，仅支持json格式。示例：path: "common/lottie/data.json" | - | container | object | 是 | canvas绘图上下文，声明范式需提前声明CanvasRenderingContext2D。 | - | render | string | 是 | 渲染类型，仅支持“canvas”。 | - | loop | boolean \| number | 否 | 动画播放结束后，是否循环播放，默认值true。值类型为number，且大于等于1时为设置的重复播放的次数。 | - | autoplay | boolean | 否 | 是否自动播放动画，默认值true。 | - | name | string | 否 | 开发者自定义的动画名称，后续支持通过该名称引用控制动画，默认为空。 | - | initialSegment | [number, number] | 否 | 指定动画播放的起始帧号，指定动画播放的结束帧号。 | + | 参数 | 类型 | 必填 | 描述 | + | -------------- | --------------------------- | ---- | ---------------------------------------- | + | path | string | 是 | hap包内动画资源文件路径，仅支持json格式。示例：path: "common/lottie/data.json" | + | container | object | 是 | canvas绘图上下文，声明范式需提前声明CanvasRenderingContext2D。 | + | render | string | 是 | 渲染类型，仅支持“canvas”。 | + | loop | boolean \| number | 否 | 动画播放结束后，是否循环播放，默认值true。值类型为number，且大于等于1时为设置的重复播放的次数。 | + | autoplay | boolean | 否 | 是否自动播放动画，默认值true。 | + | name | string | 否 | 开发者自定义的动画名称，后续支持通过该名称引用控制动画，默认为空。 | + | initialSegment | [number, number] | 否 | 指定动画播放的起始帧号，指定动画播放的结束帧号。 | ## lottie.destroy @@ -46,14 +46,14 @@ destroy(name: string): void 销毁动画，页面退出时，必须调用。可配合Canvas组件生命周期接口使用，比如onDisappear()与onPageHide()。 - 参数 - | 参数 | 类型 | 必填 | 描述 | - | -------- | -------- | -------- | -------- | - | name | string | 是 | 被指定的动画名，同loadAnimation接口参数name, 缺省时销毁所有动画。 | + | 参数 | 类型 | 必填 | 描述 | + | ---- | ------ | ---- | ---------------------------------------- | + | name | string | 是 | 被指定的动画名，同loadAnimation接口参数name, 缺省时销毁所有动画。 | - 示例 ``` import lottie from 'lottie-web' - + @Entry @Component struct Index { @@ -61,12 +61,12 @@ destroy(name: string): void private animateName: string = "animate" private animatePath: string = "common/lottie/data.json" private animateItem: any = null - + private onPageHide(): void { console.log('onPageHide') lottie.destroy() } - + build() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Canvas(this.controller) @@ -84,7 +84,7 @@ destroy(name: string): void path: this.animatePath, }) }) - + Animator('__lottie_ets') // declare Animator('__lottie_ets') when use lottie Button('load animation') .onClick(() => { @@ -102,7 +102,7 @@ destroy(name: string): void initialSegment: [10, 50], }) }) - + Button('destroy animation') .onClick(() => { lottie.destroy(this.animateName) @@ -125,9 +125,9 @@ play(name: string): void 播放指定动画。 - 参数 - | 参数 | 类型 | 必填 | 描述 | - | -------- | -------- | -------- | -------- | - | name | string | 是 | 被指定的动画名, 同loadAnimation接口参数name，缺省时播放所有动画。 | + | 参数 | 类型 | 必填 | 描述 | + | ---- | ------ | ---- | ---------------------------------------- | + | name | string | 是 | 被指定的动画名, 同loadAnimation接口参数name，缺省时播放所有动画。 | - 示例 ``` @@ -142,9 +142,9 @@ pause(name: string): void 暂停指定动画，下次调用lottie.play()从当前帧开始。 - 参数 - | 参数 | 类型 | 必填 | 描述 | - | -------- | -------- | -------- | -------- | - | name | string | 是 | 被指定的动画名，同loadAnimation接口入参name，缺省时暂停所有动画。 | + | 参数 | 类型 | 必填 | 描述 | + | ---- | ------ | ---- | ---------------------------------------- | + | name | string | 是 | 被指定的动画名，同loadAnimation接口入参name，缺省时暂停所有动画。 | - 示例 ``` @@ -159,9 +159,9 @@ togglePause(name: string): void 暂停或播放指定动画，等效于lottie.play()与lottie.pause()切换调用。 - 参数 - | 参数 | 类型 | 必填 | 描述 | - | -------- | -------- | -------- | -------- | - | name | string | 是 | 被指定的动画名，同loadAnimation接口参数name，缺省时停止所有动画。 | + | 参数 | 类型 | 必填 | 描述 | + | ---- | ------ | ---- | ---------------------------------------- | + | name | string | 是 | 被指定的动画名，同loadAnimation接口参数name，缺省时停止所有动画。 | - 示例 ``` @@ -176,9 +176,9 @@ stop(name: string): void 停止指定动画，下次调用lottie.play()从第一帧开始。 - 参数 - | 参数 | 类型 | 必填 | 描述 | - | -------- | -------- | -------- | -------- | - | name | string | 是 | 被指定的动画名，同loadAnimation接口参数name，缺省时停止所有动画。 | + | 参数 | 类型 | 必填 | 描述 | + | ---- | ------ | ---- | ---------------------------------------- | + | name | string | 是 | 被指定的动画名，同loadAnimation接口参数name，缺省时停止所有动画。 | - 示例 ``` @@ -193,10 +193,10 @@ setSpeed(speed: number, name: string): void 设置指定动画播放速度。 - 参数 - | 参数 | 类型 | 必填 | 描述 | - | -------- | -------- | -------- | -------- | - | speed | number | 是 | 值为浮点类型, speed>0正向播放, speed<0反向播放, speed=0暂停播放, speed=1.0/-1.0正常速度播放。 | - | name | string | 是 | 被指定的动画，同loadAnimation接口参数name，缺省时停止所有动画。 | + | 参数 | 类型 | 必填 | 描述 | + | ----- | ------ | ---- | ---------------------------------------- | + | speed | number | 是 | 值为浮点类型, speed>0正向播放, speed<0反向播放, speed=0暂停播放, speed=1.0/-1.0正常速度播放。 | + | name | string | 是 | 被指定的动画，同loadAnimation接口参数name，缺省时停止所有动画。 | - 示例 ``` @@ -211,10 +211,10 @@ setDirection(direction: AnimationDirection, name: string): void 设置指定动画播放顺序。 - 参数 - | 参数 | 类型 | 必填 | 描述 | - | -------- | -------- | -------- | -------- | - | direction | AnimationDirection | 是 | 1为正向，-1为反向; 当设置为反向时，从当前播放进度开始回播直到首帧，loop值为true时可无限倒放；speed<0叠加时也是倒放。
AnimationDirection：1 \| -1 | - | name | string | 是 | 被指定的动画名，同loadAnimation接口参数name，缺省时设置所有动画方向。 | + | 参数 | 类型 | 必填 | 描述 | + | --------- | ------------------ | ---- | ---------------------------------------- | + | direction | AnimationDirection | 是 | 1为正向，-1为反向; 当设置为反向时，从当前播放进度开始回播直到首帧，loop值为true时可无限倒放；speed<0叠加时也是倒放。
AnimationDirection：1 \| -1 | + | name | string | 是 | 被指定的动画名，同loadAnimation接口参数name，缺省时设置所有动画方向。 | - 示例 ``` @@ -226,28 +226,28 @@ setDirection(direction: AnimationDirection, name: string): void loadAnimation接口的返回对象，具有属性与接口。属性描述如下： -| 参数名称 | 参数类型 | 参数描述 | -| -------- | -------- | -------- | -| name | string | 动画名称。 | -| isLoaded | boolean | 动画是否已加载。 | -| currentFrame | number | 当前播放的帧号, 默认精度为>=0.0的浮点数, 调用setSubframe(false)后精度为去小数点后的正整数。 | -| currentRawFrame | number | 当前播放帧数, 精度为>=0.0的浮点数。 | -| firstFrame | number | 当前播放片段的第一帧帧号。 | -| totalFrames | number | 当前播放片段的总帧数。 | -| frameRate | number | 帧率 (frame/s)。 | -| frameMult | number | 帧率 (frame/ms)。 | -| playSpeed | number | 值为浮点类型, speed>0正向播放, speed<0反向播放, speed=0暂停播放, speed=1.0 \| -1.0正常速度播放。 | -| playDirection | number | 播放方向, 1为正放, -1为倒放。 | -| playCount | number | 动画完成播放的次数。 | -| isPaused | boolean | 当前动画是否已暂停, 值为true动画已暂停。 | -| autoplay | boolean | 加载动画后是否自动播放, 若值为false需要再调用play()接口开始播放。 | -| loop | boolean \| number | 类型为boolean时是否循环播放, 类型为number时播放次数。 | -| renderer | any | 动画渲染对象, 根据渲染类型而定。 | -| animationID | string | 动画ID。 | -| timeCompleted | number | 当前动画片段完成单次播放的帧数, 受AnimationSegment设置影响, 与totalFrames属性值相同。 | -| segmentPos | number | 当前动画片段序号, 值为>=0的正整数。 | -| isSubframeEnabled | boolean | 关联了currentFrame的精度是否为浮点数。 | -| segments | AnimationSegment \| AnimationSegment[] | 当前动画的播放片段。 | +| 参数名称 | 参数类型 | 参数描述 | +| ----------------- | ---------------------------------------- | ---------------------------------------- | +| name | string | 动画名称。 | +| isLoaded | boolean | 动画是否已加载。 | +| currentFrame | number | 当前播放的帧号, 默认精度为>=0.0的浮点数, 调用setSubframe(false)后精度为去小数点后的正整数。 | +| currentRawFrame | number | 当前播放帧数, 精度为>=0.0的浮点数。 | +| firstFrame | number | 当前播放片段的第一帧帧号。 | +| totalFrames | number | 当前播放片段的总帧数。 | +| frameRate | number | 帧率 (frame/s)。 | +| frameMult | number | 帧率 (frame/ms)。 | +| playSpeed | number | 值为浮点类型, speed>0正向播放, speed<0反向播放, speed=0暂停播放, speed=1.0 \| -1.0正常速度播放。 | +| playDirection | number | 播放方向, 1为正放, -1为倒放。 | +| playCount | number | 动画完成播放的次数。 | +| isPaused | boolean | 当前动画是否已暂停, 值为true动画已暂停。 | +| autoplay | boolean | 加载动画后是否自动播放, 若值为false需要再调用play()接口开始播放。 | +| loop | boolean \| number | 类型为boolean时是否循环播放, 类型为number时播放次数。 | +| renderer | any | 动画渲染对象, 根据渲染类型而定。 | +| animationID | string | 动画ID。 | +| timeCompleted | number | 当前动画片段完成单次播放的帧数, 受AnimationSegment设置影响, 与totalFrames属性值相同。 | +| segmentPos | number | 当前动画片段序号, 值为>=0的正整数。 | +| isSubframeEnabled | boolean | 关联了currentFrame的精度是否为浮点数。 | +| segments | AnimationSegment \| AnimationSegment[] | 当前动画的播放片段。 | ## AnimationItem.play @@ -257,9 +257,9 @@ play(name?: string): void 播放动画。 - 参数 - | 参数 | 类型 | 必填 | 描述 | - | -------- | -------- | -------- | -------- | - | name | string | 否 | 被指定的动画名，缺省默认为空。 | + | 参数 | 类型 | 必填 | 描述 | + | ---- | ------ | ---- | --------------- | + | name | string | 否 | 被指定的动画名，缺省默认为空。 | - 示例 ``` @@ -274,9 +274,9 @@ destroy(name?: string): void 销毁动画。 - 参数 - | 参数 | 类型 | 必填 | 描述 | - | -------- | -------- | -------- | -------- | - | name | string | 否 | 被指定的动画名，缺省默认为空。 | + | 参数 | 类型 | 必填 | 描述 | + | ---- | ------ | ---- | --------------- | + | name | string | 否 | 被指定的动画名，缺省默认为空。 | - 示例 ``` @@ -291,9 +291,9 @@ pause(name?: string): void 暂停动画，下次调用play接口从当前帧开始播放。 - 参数 - | 参数 | 类型 | 必填 | 描述 | - | -------- | -------- | -------- | -------- | - | name | string | 否 | 被指定的动画名，缺省默认为空。 | + | 参数 | 类型 | 必填 | 描述 | + | ---- | ------ | ---- | --------------- | + | name | string | 否 | 被指定的动画名，缺省默认为空。 | - 示例 ``` @@ -308,9 +308,9 @@ togglePause(name?: string): void 暂停或播放动画，等效于play接口与pause接口之间轮换调用。 - 参数 - | 参数 | 类型 | 必填 | 描述 | - | -------- | -------- | -------- | -------- | - | name | string | 否 | 被指定的动画名，缺省默认为空。 | + | 参数 | 类型 | 必填 | 描述 | + | ---- | ------ | ---- | --------------- | + | name | string | 否 | 被指定的动画名，缺省默认为空。 | - 示例 ``` @@ -325,9 +325,9 @@ stop(name?: string): void 停止动画，下次调用play接口从第一帧开始播放。 - 参数 - | 参数 | 类型 | 必填 | 描述 | - | -------- | -------- | -------- | -------- | - | name | string | 否 | 被指定的动画名，缺省默认为空。 | + | 参数 | 类型 | 必填 | 描述 | + | ---- | ------ | ---- | --------------- | + | name | string | 否 | 被指定的动画名，缺省默认为空。 | - 示例 ``` @@ -342,9 +342,9 @@ setSpeed(speed: number): void 设置动画播放速度。 - 参数 - | 参数 | 类型 | 必填 | 描述 | - | -------- | -------- | -------- | -------- | - | speed | number | 是 | 值为浮点类型, speed>0正向播放, speed<0反向播放, speed=0暂停播放, speed=1.0 \| -1.0正常速度播放。 | + | 参数 | 类型 | 必填 | 描述 | + | ----- | ------ | ---- | ---------------------------------------- | + | speed | number | 是 | 值为浮点类型, speed>0正向播放, speed<0反向播放, speed=0暂停播放, speed=1.0 \| -1.0正常速度播放。 | - 示例 ``` @@ -359,9 +359,9 @@ setDirection(direction: AnimationDirection): void 设置动画播放顺序。 - 参数 - | 参数 | 类型 | 必填 | 描述 | - | -------- | -------- | -------- | -------- | - | direction | AnimationDirection | 是 | 1为正向，-1为反向; 当设置为反向时，从当前播放进度开始回播直到首帧，loop值为true时可无限倒放；speed<0叠加时也是倒放。
AnimationDirection：1 \| -1。 | + | 参数 | 类型 | 必填 | 描述 | + | --------- | ------------------ | ---- | ---------------------------------------- | + | direction | AnimationDirection | 是 | 1为正向，-1为反向; 当设置为反向时，从当前播放进度开始回播直到首帧，loop值为true时可无限倒放；speed<0叠加时也是倒放。
AnimationDirection：1 \| -1。 | - 示例 ``` @@ -376,11 +376,11 @@ goToAndStop(value: number, isFrame?: boolean): void 设置动画停止在指定帧或时间进度。 - 参数 - | 参数 | 类型 | 必填 | 描述 | - | -------- | -------- | -------- | -------- | - | value | number | 是 | 帧号(值大于等于0)或时间进度(ms)。 | - | isFrame | boolean | 否 | true: 按指定帧控制，false:按指定时间控制，缺省默认false。 | - | name | string | 否 | 被指定的动画名，缺省默认为空。 | + | 参数 | 类型 | 必填 | 描述 | + | ------- | ------- | ---- | ---------------------------------------- | + | value | number | 是 | 帧号(值大于等于0)或时间进度(ms)。 | + | isFrame | boolean | 否 | true: 按指定帧控制，false:按指定时间控制，缺省默认false。 | + | name | string | 否 | 被指定的动画名，缺省默认为空。 | - 示例 ``` @@ -398,11 +398,11 @@ goToAndPlay(value: number, isFrame: boolean, name?: string): void 设置动画从指定帧或时间进度开始播放。 - 参数 - | 参数 | 类型 | 必填 | 描述 | - | -------- | -------- | -------- | -------- | - | value | number | 是 | 帧号(值大于等于0)或时间进度(ms) | - | isFrame | boolean | 是 | true：按指定帧控制， false：按指定时间控制，缺省默认false。 | - | name | string | 否 | 被指定的动画名，缺省默认为空。 | + | 参数 | 类型 | 必填 | 描述 | + | ------- | ------- | ---- | ---------------------------------------- | + | value | number | 是 | 帧号(值大于等于0)或时间进度(ms) | + | isFrame | boolean | 是 | true：按指定帧控制， false：按指定时间控制，缺省默认false。 | + | name | string | 否 | 被指定的动画名，缺省默认为空。 | - 示例 ``` @@ -420,10 +420,10 @@ playSegments(segments: AnimationSegment | AnimationSegment[], forceFlag: boolean 设置动画仅播放指定片段。 - 参数 - | 参数 | 类型 | 必填 | 描述 | - | -------- | -------- | -------- | -------- | - | segments | AnimationSegment = [number, number] \| AnimationSegment[] | 是 | 片段或片段列表；
如果片段列表全部播放完毕后，下轮循环播放仅播放最后一个片段 | - | forceFlag | boolean | 是 | true：即时生效播放，false：延迟到下轮循环播放再生效 | + | 参数 | 类型 | 必填 | 描述 | + | --------- | ---------------------------------------- | ---- | ---------------------------------------- | + | segments | AnimationSegment = [number, number] \| AnimationSegment[] | 是 | 片段或片段列表；
如果片段列表全部播放完毕后，下轮循环播放仅播放最后一个片段 | + | forceFlag | boolean | 是 | true：即时生效播放，false：延迟到下轮循环播放再生效 | - 示例 ``` @@ -441,9 +441,9 @@ resetSegments(forceFlag: boolean): void 重置动画播放片段，播放全帧。 - 参数 - | 参数 | 类型 | 必填 | 描述 | - | -------- | -------- | -------- | -------- | - | forceFlag | boolean | 是 | true：即时生效播放，false：延迟到下轮循环播放再生效 | + | 参数 | 类型 | 必填 | 描述 | + | --------- | ------- | ---- | ------------------------------ | + | forceFlag | boolean | 是 | true：即时生效播放，false：延迟到下轮循环播放再生效 | - 示例 ``` @@ -470,9 +470,9 @@ setSubframe(useSubFrame: boolean): void 设置属性currentFrame的精度显示浮点数。 - 参数 - | 参数 | 类型 | 必填 | 描述 | - | -------- | -------- | -------- | -------- | - | useSubFrames | boolean | 是 | currentFrame属性默认显示浮点数，该接口参数将影响currentFrame属性的精度。
true：属性currentFrame显示浮点。
false：属性currentFrame去浮点数显示整数。 | + | 参数 | 类型 | 必填 | 描述 | + | ------------ | ------- | ---- | ---------------------------------------- | + | useSubFrames | boolean | 是 | currentFrame属性默认显示浮点数，该接口参数将影响currentFrame属性的精度。
true：属性currentFrame显示浮点。
false：属性currentFrame去浮点数显示整数。 | - 示例 ``` @@ -487,9 +487,9 @@ getDuration(inFrames?: boolean): void 获取动画单次完整播放的时间(与播放速度无关)或帧数, 与Lottie.loadAnimation接口入参initialSegment有关。 - 参数 - | 参数 | 类型 | 必填 | 描述 | - | -------- | -------- | -------- | -------- | - | inFrames | boolean | 否 | true：获取帧数， false：获取时间(单位ms)，缺省默认false。 | + | 参数 | 类型 | 必填 | 描述 | + | -------- | ------- | ---- | ---------------------------------------- | + | inFrames | boolean | 否 | true：获取帧数， false：获取时间(单位ms)，缺省默认false。 | - 示例 ``` @@ -504,10 +504,10 @@ addEventListener<T = any>(name: AnimationEventName, callback: AnimationEve 添加侦听事件, 事件完成后会触发指定回调函数。返回可删除该侦听事件的函数对象。 - 参数 - | 参数 | 类型 | 必填 | 描述 | - | -------- | -------- | -------- | -------- | - | name | AnimationEventName | 是 | 指定动画事件类型，Lottie内置动画事件类型AnimationEventName：
'enterFrame'、'loopComplete'、'complete'、'segmentStart'、'destroy'、'config_ready'、'data_ready'、'DOMLoaded'、'error'、'data_failed'、'loaded_images' | - | callback | AnimationEventCallback<T> | 是 | 用户自定义回调函数 | + | 参数 | 类型 | 必填 | 描述 | + | -------- | ------------------------------- | ---- | ---------------------------------------- | + | name | AnimationEventName | 是 | 指定动画事件类型，Lottie内置动画事件类型AnimationEventName：
'enterFrame'、'loopComplete'、'complete'、'segmentStart'、'destroy'、'config_ready'、'data_ready'、'DOMLoaded'、'error'、'data_failed'、'loaded_images' | + | callback | AnimationEventCallback<T> | 是 | 用户自定义回调函数 | - 示例 ``` @@ -515,7 +515,7 @@ addEventListener<T = any>(name: AnimationEventName, callback: AnimationEve console.log("grunt loopComplete") } let delFunction = this.animateItem.addEventListener('loopComplete', this.animateName) - + // 删除侦听 delFunction() ``` @@ -528,10 +528,10 @@ removeEventListener<T = any>(name: AnimationEventName, callback?: Animatio 删除侦听事件。 - 参数 - | 参数 | 类型 | 必填 | 描述 | - | -------- | -------- | -------- | -------- | - | name | AnimationEventName | 是 | 指定动画事件类型，Lottie内置动画事件类型AnimationEventName：
'enterFrame'、'loopComplete'、'complete'、'segmentStart'、'destroy'、'config_ready'、'data_ready'、'DOMLoaded'、'error'、'data_failed'、'loaded_images' | - | callback | AnimationEventCallback<T> | 是 | 用户自定义回调函数；缺省为空时, 删除此事件的所有回调函数。 | + | 参数 | 类型 | 必填 | 描述 | + | -------- | ------------------------------- | ---- | ---------------------------------------- | + | name | AnimationEventName | 是 | 指定动画事件类型，Lottie内置动画事件类型AnimationEventName：
'enterFrame'、'loopComplete'、'complete'、'segmentStart'、'destroy'、'config_ready'、'data_ready'、'DOMLoaded'、'error'、'data_failed'、'loaded_images' | + | callback | AnimationEventCallback<T> | 是 | 用户自定义回调函数；缺省为空时, 删除此事件的所有回调函数。 | - 示例 ``` @@ -546,17 +546,17 @@ triggerEvent<T = any>(name: AnimationEventName, args: T): void 直接触发指定事件的所有已设置的回调函数。 - 参数 - | 参数 | 类型 | 必填 | 描述 | - | -------- | -------- | -------- | -------- | - | name | AnimationEventName | 是 | 指定动画事件类型 | - | args | any | 是 | 用户自定义回调参数 | + | 参数 | 类型 | 必填 | 描述 | + | ---- | ------------------ | ---- | --------- | + | name | AnimationEventName | 是 | 指定动画事件类型 | + | args | any | 是 | 用户自定义回调参数 | - 示例 ``` 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/zh-cn/application-dev/ui/Readme-CN.md b/zh-cn/application-dev/ui/Readme-CN.md index 591202f71df987981b7f6be39dc04a00510e873d..2666626e9ce1b4dcbd7201faa3814e31925f5e8f 100755 --- a/zh-cn/application-dev/ui/Readme-CN.md +++ b/zh-cn/application-dev/ui/Readme-CN.md @@ -24,7 +24,7 @@ - [添加容器](ui-js-building-ui-layout-external-container.md) - [添加交互](ui-js-building-ui-interactions.md) - [动画](ui-js-building-ui-animation.md) - - [事件](ui-js-building-ui-event.md) + - [手势事件](ui-js-building-ui-event.md) - [页面路由](ui-js-building-ui-routes.md) - 常见组件开发指导 - 容器组件 diff --git a/zh-cn/application-dev/ui/arkui-overview.md b/zh-cn/application-dev/ui/arkui-overview.md index ec0630d641e9a0d17e61b4fa33b63a3fad9f9e49..e80deb47e22b89f623c2d13498222ea3845343fe 100644 --- a/zh-cn/application-dev/ui/arkui-overview.md +++ b/zh-cn/application-dev/ui/arkui-overview.md @@ -2,52 +2,37 @@ ## 框架介绍 -方舟开发框架，是一套UI开发框架，提供开发者进行应用UI开发时所必须的能力。 +方舟开发框架（简称：ArkUI），是一套UI开发框架，提供开发者进行应用UI开发时所必须的能力。 ## 基本概念 -- **组件**：组件是界面搭建与显示的最小单位。开发者通过多种组件的组合，构建出满足自身应用诉求的完整界面。 +- 组件：组件是界面搭建与显示的最小单位。开发者通过多种组件的组合，构建出满足自身应用诉求的完整界面。 -- **页面**：page页面是方舟开发框架最小的调度分割单位。开发者可以将应用设计为多个功能页面，每个页面进行单独的文件管理，并通过路由API实现页面的调度管理，以实现应用内功能的解耦。 +- 页面：page页面是方舟开发框架最小的调度分割单位。开发者可以将应用设计为多个功能页面，每个页面进行单独的文件管理，并通过路由API实现页面的调度管理，以实现应用内功能的解耦。 -## 主要能力 +## 主要特征 -- **多种组件**：方舟开发框架不仅提供了多种基础组件，如文本显示、图片显示、按键交互等，也提供了支持视频播放能力的媒体组件。并且针对不同类型设备进行了组件设计，提供了组件在不同平台上的样式适配能力，此种组件称为“多态组件”。 +- UI组件：方舟开发框架不仅提供了多种基础组件，如文本显示、图片显示、按键交互等，也提供了支持视频播放能力的媒体组件。并且针对不同类型设备进行了组件设计，提供了组件在不同平台上的样式适配能力，此种组件称为“多态组件”。 -- **布局计算**：UI界面设计离不开布局的参与。方舟开发框架提供了多种布局方式，不仅保留了经典的弹性布局能力，也提供了列表、宫格、栅格布局和适应多分辨率场景开发的原子布局能力。 +- 布局：UI界面设计离不开布局的参与。方舟开发框架提供了多种布局方式，不仅保留了经典的弹性布局能力，也提供了列表、宫格、栅格布局和适应多分辨率场景开发的原子布局能力。 -- **动画能力**：方舟开发框架对于UI界面的美化，除了组件内置动画效果外，也提供了属性动画、转场动画和自定义动画能力。 +- 动画：方舟开发框架对于UI界面的美化，除了组件内置动画效果外，也提供了属性动画、转场动画和自定义动画能力。 -- **UI交互**：方舟开发框架提供了多种交互能力，满足应用在不同平台通过不同输入设备均可正常进行UI交互响应，默认适配了触摸手势、遥控器、鼠标等输入操作，同时也提供事件通知能力。 +- 绘制：方舟开发框架提供了多种绘制能力，以满足开发者绘制自定义形状的需求，支持图形绘制、颜色填充、文本绘制、图片绘制等。 -- **绘制**：方舟开发框架提供了多种绘制能力，以满足开发者绘制自定义形状的需求，支持图形绘制、颜色填充、文本绘制、图片绘制等。 +- 交互事件：方舟开发框架提供了多种交互能力，满足应用在不同平台通过不同输入设备均可正常进行UI交互响应，默认适配了触摸手势、遥控器、鼠标等输入操作，同时也提供事件通知能力。 -- **平台API通道**：方舟开发框架提供了API扩展机制，平台能力通过此种机制进行封装，提供风格统一的JS接口。 +- 平台API通道：方舟开发框架提供了API扩展机制，平台能力通过此种机制进行封装，提供风格统一的JS接口。 +- 两种开发范式：方舟开发框架针对不同目的和技术背景的开发者提供了两种开发范式，分别是基于JS扩展的类Web开发范式（简称“类Web开发范式”）和基于TS扩展的声明式开发范式（简称“声明式开发范式”）。 -## 选择方案 + | 开发范式名称 | 简介 | 适用场景 | 适用人群 | + | -------- | ---------------------------------------- | ---------------- | ------------------- | + | 类Web开发范式 | 采用经典的HML、CSS、JavaScript三段式开发方式。使用HML标签文件进行布局搭建，使用CSS文件进行样式描述，使用JavaScript文件进行逻辑处理。UI组件与数据之间通过单向数据绑定的方式建立关联，当数据发生变化时，UI界面自动触发更新。此种开发方式，更接近Web前端开发者的使用习惯，快速将已有的Web应用改造成方舟开发框架应用。 | 界面较为简单的中小型应用和卡片 | Web前端开发人员 | + | 声明式开发范式 | 采用TS语言并进行声明式UI语法扩展，从组件、动效和状态管理三个维度提供了UI绘制能力。UI开发更接近自然语义的编程方式，让开发者直观地描述UI界面，不必关心框架如何实现UI绘制和渲染，实现极简高效开发。同时，选用有类型标注的TS语言，引入编译期的类型校验。 | 复杂度较大、团队合作度较高的程序 | 移动系统应用开发人员、系统应用开发人员 | -方舟开发框架针对不同目的和技术背景的开发者提供了两种开发范式，分别是基于JS扩展的类Web开发范式（简称“类Web开发范式”）和基于TS扩展的声明式开发范式（简称“声明式开发范式”）。下面我们对这两种开发范式进行对比与描述。 - - -### 类Web开发范式 - -类Web开发范式，采用经典的HML、CSS、JavaScript三段式开发方式。使用HML标签文件进行布局搭建，使用CSS文件进行样式描述，使用JavaScript文件进行逻辑处理。UI组件与数据之间通过单向数据绑定的方式建立关联，当数据发生变化时，UI界面自动触发更新。此种开发方式，更接近Web前端开发者的使用习惯，快速将已有的Web应用改造成方舟开发框架应用。主要适用于界面较为简单的中小型应用开发。 - - -### 声明式开发范式 - -声明式开发范式，采用TS语言并进行声明式UI语法扩展，从组件、动效和状态管理三个维度提供了UI绘制能力。UI开发更接近自然语义的编程方式，让开发者直观地描述UI界面，不必关心框架如何实现UI绘制和渲染，实现极简高效开发。同时，选用有类型标注的TS语言，引入编译期的类型校验，更适用大型的应用开发。 - - -### 两种开发范式对比 - -| **开发范式名称** | **语言生态** | **UI更新方式** | **适用场景** | **适用人群** | -| -------- | -------- | -------- | -------- | -------- | -| 类Web开发范式 | JS语言 | 数据驱动更新 | 界面较为简单的程序应用和卡片 | Web前端开发人员 | -| 声明式开发范式 | 扩展的TS语言（eTS） | 数据驱动更新 | 复杂度较大、团队合作度较高的程序 | 移动系统应用开发人员、系统应用开发人员 | ### 框架结构 diff --git a/zh-cn/application-dev/ui/js-framework-multiple-languages.md b/zh-cn/application-dev/ui/js-framework-multiple-languages.md index 0ec8fdebbd014e3a78b37fc1148d71d4c0803763..2eab45ca737d35c6a3cea36b9e4a2e936fec487d 100644 --- a/zh-cn/application-dev/ui/js-framework-multiple-languages.md +++ b/zh-cn/application-dev/ui/js-framework-multiple-languages.md @@ -101,7 +101,7 @@ ar-AE.json | 参数 | 类型 | 必填 | 描述 | | ------ | ------------- | ---- | ---------------------------------------- | | path | string | 是 | 资源路径 | - | params | Array\|Object | 否 | 运行时用来替换占位符的实际内容，占位符分为两种：
- 具名占位符，例如{name}。实际内容必须用Object类型指定，例如：$t('strings.object', { name: 'Hello world' })。
- 数字占位符，例如{0}。实际内容必须用Array类型指定，例如：$t('strings.array', ['Hello world'])。 | + | params | Array\|Object | 否 | 运行时用来替换占位符的实际内容，占位符分为两种：
- 具名占位符，例如{name}。实际内容必须用Object类型指定，例如：```$t('strings.object', {name:'Hello world'})```。
- 数字占位符，例如{0}。实际内容必须用Array类型指定，例如：```$t('strings.array', [Hello world']``` | - 简单格式化示例代码 ``` diff --git a/zh-cn/application-dev/ui/ui-js-building-ui-event.md b/zh-cn/application-dev/ui/ui-js-building-ui-event.md index a4c3320873f45bae9609cb0b224d04240f631fd3..93752ddd5cce56023faa9d10a306fb22087ed1b5 100755 --- a/zh-cn/application-dev/ui/ui-js-building-ui-event.md +++ b/zh-cn/application-dev/ui/ui-js-building-ui-event.md @@ -1,9 +1,4 @@ -# 事件 - -事件主要为手势事件。手势事件主要用于具有触摸屏的设备。 - - -## 手势事件 +# 手势事件 手势表示由单个或多个事件识别的语义动作（例如：点击、拖动和长按）。一个完整的手势也可能由多个事件组成，对应手势的生命周期。支持的事件有： diff --git a/zh-cn/application-dev/ui/ui-js-overview.md b/zh-cn/application-dev/ui/ui-js-overview.md index c955cb6a7a60c37d0fb621f4c0779e67f70bb16f..7bb87d87b265f6c0f4646ad0e63d3651ecb8d1bd 100755 --- a/zh-cn/application-dev/ui/ui-js-overview.md +++ b/zh-cn/application-dev/ui/ui-js-overview.md @@ -12,13 +12,17 @@ ![zh-cn_image_0000001117452952](figures/zh-cn_image_0000001117452952.png) - **Application** + 应用层表示开发者开发的FA应用，这里的FA应用特指JS FA应用。 - **Framework** + 前端框架层主要完成前端页面解析，以及提供MVVM（Model-View-ViewModel）开发模式、页面路由机制和自定义组件等能力。 - **Engine** + 引擎层主要提供动画解析、DOM（Document Object Model）树构建、布局计算、渲染命令构建与绘制、事件管理等能力。 - **Porting Layer** + 适配层主要完成对平台层进行抽象，提供抽象接口，可以对接到系统平台。比如：事件对接、渲染管线对接和系统生命周期对接等。