diff --git a/zh-cn/application-dev/reference/apis/figures/zh-cn_image_0005.gif b/zh-cn/application-dev/reference/apis/figures/zh-cn_image_0005.gif index 2bb6aa6c2a2086f16ae6149e9d3e4b2340d6fe37..c3616f948289aa9a358bcd716c9731c98d1458de 100644 Binary files a/zh-cn/application-dev/reference/apis/figures/zh-cn_image_0005.gif and b/zh-cn/application-dev/reference/apis/figures/zh-cn_image_0005.gif differ diff --git a/zh-cn/application-dev/reference/apis/figures/zh-cn_image_0006.gif b/zh-cn/application-dev/reference/apis/figures/zh-cn_image_0006.gif index 2bb6aa6c2a2086f16ae6149e9d3e4b2340d6fe37..6a5fe369467d047364f518486d452ed2ac6aba96 100644 Binary files a/zh-cn/application-dev/reference/apis/figures/zh-cn_image_0006.gif and b/zh-cn/application-dev/reference/apis/figures/zh-cn_image_0006.gif differ diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-basic-chart.md b/zh-cn/application-dev/reference/arkui-js/js-components-basic-chart.md index dcde8ec5c94c414b88680deed4fda54ef7d0633f..0c639880fa11c0be862767b89c8fc72c3bc0614c 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-basic-chart.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-basic-chart.md @@ -211,24 +211,24 @@ strokeColor: '#0081ff', fillColor: '#cce5ff', data: [763, 550, 551, 554, 731, 654, 525, 696, 595, 628, 791, 505, 613, 575, 475, 553, 491, 680, 657, 716], - gradient: true, + gradient: true } ], lineOps: { xAxis: { min: 0, max: 20, - display: false, + display: false }, yAxis: { min: 0, max: 1000, - display: false, + display: false }, series: { lineStyle: { width: "5px", - smooth: true, + smooth: true }, headPoint: { shape: "circle", @@ -236,14 +236,14 @@ strokeWidth: 5, fillColor: '#ffffff', strokeColor: '#007aff', - display: true, + display: true }, loop: { margin: 2, - gradient: true, + gradient: true } } - }, + } }, addData() { this.$refs.linechart.append({ @@ -294,15 +294,15 @@ barData: [ { fillColor: '#f07826', - data: [763, 550, 551, 554, 731, 654, 525, 696, 595, 628], + data: [763, 550, 551, 554, 731, 654, 525, 696, 595, 628] }, { fillColor: '#cce5ff', - data: [535, 776, 615, 444, 694, 785, 677, 609, 562, 410], + data: [535, 776, 615, 444, 694, 785, 677, 609, 562, 410] }, { fillColor: '#ff88bb', - data: [673, 500, 574, 483, 702, 583, 437, 506, 693, 657], + data: [673, 500, 574, 483, 702, 583, 437, 506, 693, 657] }, ], barOps: { @@ -310,14 +310,14 @@ min: 0, max: 20, display: false, - axisTick: 10, + axisTick: 10 }, yAxis: { min: 0, max: 1000, - display: false, - }, - }, + display: false + } + } } } ``` diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-basic-qrcode.md b/zh-cn/application-dev/reference/arkui-js/js-components-basic-qrcode.md index d263871d3ff9df85c0febbbfe0a0d2e3bebd7abe..7c1233c1eb51bbce252265651b214333e5d416f5 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-basic-qrcode.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-basic-qrcode.md @@ -108,9 +108,6 @@ export default { this.qr_type = 'circle' } }, - setvalue(e) { - this.qr_value = e.newValue - }, setcol(e) { this.qr_col = e.newValue }, @@ -122,4 +119,3 @@ export default { ![zh-cn_image_0000001222948301](figures/zh-cn_image_0000001222948301.gif) - diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-common-methods.md b/zh-cn/application-dev/reference/arkui-js/js-components-common-methods.md index 4450c65ca2ee789d92d7a13857fb160cca019ce2..9309b931dfdba0a93e4840a11cfa8fa560675fd9 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-common-methods.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-common-methods.md @@ -92,20 +92,19 @@ animate( keyframes: Keyframes, options: Options)：void | repeat | 动画重播事件。 | - 示例 - ``` - -
-
-
- - -
+```html + +
+
+
+ +
- ``` +``` ``` /* xxx.css */ diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-common-styles.md b/zh-cn/application-dev/reference/arkui-js/js-components-common-styles.md index 0c59395b6ff772d622eb280c1699979c916cf4c4..d1cbbe7e28ade4b34fdc1df05bd18d70f19fb343 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-common-styles.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-common-styles.md @@ -67,4 +67,3 @@ > ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > 通用样式都不是必填项。 - diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-common-transition.md b/zh-cn/application-dev/reference/arkui-js/js-components-common-transition.md index 36976ca9dda408921492c41f7bd153fe645e8711..bce1295337bf7ec5e3cf7bbb03f6f7e8b6bc1287 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-common-transition.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-common-transition.md @@ -59,12 +59,12 @@ PageA跳转到PageB，跳转的共享元素为image， shareid为“shareImage ```js // xxx.js -import router from '@system.router'; +import router from '@ohos.router'; export default { jump() { router.push({ // 路径要与config.json配置里面的相同 - uri: 'pages/detailpage', + url: 'pages/detailpage', }); }, } @@ -92,7 +92,7 @@ export default { ```js // xxx.js -import router from '@system.router'; +import router from '@ohos.router'; export default { jumpBack() { router.back(); @@ -138,7 +138,7 @@ source_page包含顶部内容以及卡片列表，点击卡片可以跳转到tar MAIN TITLE
- + {{$item.title}} @@ -147,19 +147,19 @@ source_page包含顶部内容以及卡片列表，点击卡片可以跳转到tar ```js // xxx.js -import router from '@system.router' +import router from '@ohos.router' export default { data: { list: [] }, onInit() { for(var i = 0; i < 10; i++) { - var item = { uri: "pages/card_transition/target_page/index", + var item = { url: "pages/card_transition/target_page/index", title: "this is title" + i, id: "item_" + i } this.list.push(item); } }, - jumpPage(id, uri) { + jumpPage(id, url) { var cardId = this.$element(id).ref; - router.push({ uri: uri, params : { ref : cardId } }); + router.push({ url: url, params : { ref : cardId } }); } } ``` @@ -167,6 +167,8 @@ export default { ```css /* xxx.css */ .container { + width: 100%; + height: 100%; flex-direction: column; align-items: center; background-color: #ABDAFF; @@ -197,6 +199,8 @@ export default { ```css /* xxx.css */ .container { + width: 100%; + height: 100%; flex-direction: column; align-items: center; background-color: #EBFFD7; @@ -255,14 +259,14 @@ Page1有一个不透明盒子，点击盒子会跳转到Page2，当点击Page2 ```js - import router from '@system.router'; + import router from '@ohos.router'; export default { data: { }, jump() { router.push({ - uri:'pages/transition2/transition2' + url:'pages/transition2/transition2' }) } } @@ -325,7 +329,7 @@ Page1有一个不透明盒子，点击盒子会跳转到Page2，当点击Page2 ```js - import router from '@system.router'; + import router from '@ohos.router'; export default { data: { @@ -334,9 +338,10 @@ Page1有一个不透明盒子，点击盒子会跳转到Page2，当点击Page2 router.back() } } - ``` - - ```css + +``` + +```css .container { flex-direction: column; @@ -379,4 +384,4 @@ Page1有一个不透明盒子，点击盒子会跳转到Page2，当点击Page2 } ``` - ![transition](figures/transition.gif) +![transition](figures/transition.gif) diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-custom-lifecycle.md b/zh-cn/application-dev/reference/arkui-js/js-components-custom-lifecycle.md index 442c2108d5b234ae2ff8f5d95731eef2aec99aa2..78cf781725bef04d3af28bdeeff540abdaa8c15b 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-custom-lifecycle.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-custom-lifecycle.md @@ -37,10 +37,8 @@ export default { console.log("组件创建") }, onAttached() { - this.value = "组件挂载" - }, - onDetached() { - this.value = "" + this.value = "组件挂载", + console.log("组件挂载") }, onShow() { console.log("Page显示") diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-svg-animatemotion.md b/zh-cn/application-dev/reference/arkui-js/js-components-svg-animatemotion.md index 0c6874915cdc24d394332d087e97a38b9ff26a05..4c508d2e904f7bc86f5c4aae41ea41e349464323 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-svg-animatemotion.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-svg-animatemotion.md @@ -37,7 +37,7 @@ - + diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-svg-animatetransform.md b/zh-cn/application-dev/reference/arkui-js/js-components-svg-animatetransform.md index cae336c9b05042825aac304e7d661c443e38829f..4e2fb75587072528acc41fedb408bf3db9588403 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-svg-animatetransform.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-svg-animatetransform.md @@ -193,6 +193,7 @@ transform动效，支持的组件范围： dur="3s" repeatCount="indefinite"> + animate-transform diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-svg-textpath.md b/zh-cn/application-dev/reference/arkui-js/js-components-svg-textpath.md index cf6779fb5069197f1913c192007e776a2070334d..bb7629a674cfa480cb278b27eeb125269db02855 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-svg-textpath.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-svg-textpath.md @@ -97,9 +97,9 @@ textpath与tspan组合示例与效果图
- + - + This is TextPath. This is tspan onTextPath. Let's play. @@ -117,11 +117,11 @@ textpath与tspan组合示例与效果图
- + - + This is TextPath. This is first tspan. This is second tspan. @@ -172,10 +172,10 @@ textpath与tspan组合属性动画与效果图
- + - + This is TextPath. tspan attribute x|rotate @@ -209,11 +209,11 @@ textpath与tspan组合属性动画与效果图
- - + This is TextPath. tspan attribute fill|fill-opacity @@ -247,11 +247,11 @@ textpath与tspan组合属性动画与效果图
- - + This is TextPath. tspan attribute stroke diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-explicit-animation.md b/zh-cn/application-dev/reference/arkui-ts/ts-explicit-animation.md index c0e5c20d2a7943b9c2edc06516bba594c3a09e58..a23bcb78312dda19db43dfd5052cd0f5e8ed6037 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-explicit-animation.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-explicit-animation.md @@ -73,6 +73,23 @@ struct AnimateToExample { } this.flag = !this.flag }) + Button('change rotate angle') + .margin(50) + .rotate({ x: 0, y: 0, z: 1, angle: this.rotateAngle }) + .onClick(() => { + animateTo({ + duration: 1200, + curve: Curve.Friction, + delay: 500, + iterations: -1, // 设置-1表示动画无限循环 + playMode: PlayMode.AlternateReverse, + onFinish: () => { + console.info('play end') + } + }, () => { + this.rotateAngle = 90 + }) + }) }.width('100%').margin({ top: 5 }) } } diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-universal-events-drag-drop.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-events-drag-drop.md index b6db6abeddf38be59ed681c901e5a5c0991527eb..5966e6a6f94e72426c5a8d3cc0f7cf2b828949db 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-universal-events-drag-drop.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-universal-events-drag-drop.md @@ -42,15 +42,27 @@ extraParams是Json对象转换的string字符串，可以通过Json.parse转换 ```ts // xxx.ets +@Extend(Text) function textStyle () { + .width('25%') + .height(35) + .fontSize(16) + .textAlign(TextAlign.Center) + .backgroundColor(0xAFEEEE) +} + @Entry @Component struct DragExample { - @State numbers: string[] = ['one', 'two', 'three', 'four', 'five', 'six']; - @State text: string = ''; - @State bool: boolean = false; - @State appleVisible: Visibility = Visibility.Visible; - @State orangeVisible: Visibility = Visibility.Visible; - @State bananaVisible: Visibility = Visibility.Visible; + @State numbers: string[] = ['one', 'two', 'three', 'four', 'five', 'six'] + @State text: string = '' + @State bool: boolean = true + @State eventType: string = '' + @State appleVisible: Visibility = Visibility.Visible + @State orangeVisible: Visibility = Visibility.Visible + @State bananaVisible: Visibility = Visibility.Visible + private dragList: string[] = ['apple', 'orange', 'banana'] + @State fruitVisible: Visibility[] = [Visibility.Visible, Visibility.Visible, Visibility.Visible] + @State index: number = 0 // 自定义拖拽过程中显示的内容 @Builder pixelMapBuilder() { @@ -74,46 +86,29 @@ struct DragExample { .textAlign(TextAlign.Start) .margin(5) Row({ space: 15 }) { - Text('apple') - .width('25%') - .height(35) - .fontSize(16) - .textAlign(TextAlign.Center) - .backgroundColor(0xAFEEEE) - .visibility(this.appleVisible) - .onDragStart(() => { - this.bool = true; - this.text = 'apple'; - this.appleVisible = Visibility.None; - return this.pixelMapBuilder; - }) - Text('orange') - .width('25%') - .height(35) - .fontSize(16) - .textAlign(TextAlign.Center) - .backgroundColor(0xAFEEEE) - .visibility(this.orangeVisible) - .onDragStart(() => { - this.bool = true; - this.text = 'orange'; - this.orangeVisible = Visibility.None; - return this.pixelMapBuilder; - }) - Text('banana') - .width('25%') - .height(35) - .fontSize(16) - .textAlign(TextAlign.Center) - .backgroundColor(0xAFEEEE) - .visibility(this.bananaVisible) - .onDragStart((event: DragEvent, extraParams: string) => { - console.log('Text onDragStart, ' + extraParams + 'X:' + event.getX() + 'Y:' + event.getY()); - this.bool = true; - this.text = 'banana'; - this.bananaVisible = Visibility.None; - return this.pixelMapBuilder; - }) + ForEach(this.dragList, (item, index) => { + Text(item) + .textStyle() + .visibility(this.fruitVisible[index]) + .onDragStart(() => { + this.bool = true + this.text = item + this.fruitVisible[index] = Visibility.None + return this.pixelMapBuilder + }) + .onTouch((event: TouchEvent) => { + if (event.type === TouchType.Down) { + this.eventType = 'Down' + this.index = index + } + if (event.type === TouchType.Up) { + this.eventType = 'Up' + if (this.bool) { + this.fruitVisible[index] = Visibility.Visible + } + } + }) + }) }.padding({ top: 10, bottom: 10 }).margin(10) Text('This is a List element') @@ -142,21 +137,22 @@ struct DragExample { .padding(15) .divider({ strokeWidth: 2, color: 0xFFFFFF, startMargin: 20, endMargin: 20 }) .onDragEnter((event: DragEvent, extraParams: string) => { - console.log('List onDragEnter, ' + extraParams + 'X:' + event.getX() + 'Y:' + event.getY()); + console.log('List onDragEnter, ' + extraParams + 'X:' + event.getX() + 'Y:' + event.getY()) }) .onDragMove((event: DragEvent, extraParams: string) => { - console.log('List onDragMove, ' + extraParams + 'X:' + event.getX() + 'Y:' + event.getY()); + console.log('List onDragMove, ' + extraParams + 'X:' + event.getX() + 'Y:' + event.getY()) }) .onDragLeave((event: DragEvent, extraParams: string) => { - console.log('List onDragLeave, ' + extraParams + 'X:' + event.getX() + 'Y:' + event.getY()); + console.log('List onDragLeave, ' + extraParams + 'X:' + event.getX() + 'Y:' + event.getY()) }) .onDrop((event: DragEvent, extraParams: string) => { - var jsonString = JSON.parse(extraParams); + let jsonString = JSON.parse(extraParams); if (this.bool) { // 通过splice方法插入元素 - this.numbers.splice(jsonString.insertIndex, 0, this.text); - this.bool = false; + this.numbers.splice(jsonString.insertIndex, 0, this.text) + this.bool = false } + this.fruitVisible[this.index] = Visibility.None }) }.width('100%').height('100%').padding({ top: 20 }).margin({ top: 20 }) }