diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/renderfit.gif b/zh-cn/application-dev/reference/arkui-ts/figures/renderfit.gif new file mode 100755 index 0000000000000000000000000000000000000000..77a81c5554d9030bb12554373dcc92167f268fee Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/renderfit.gif differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/renderfit_bottom.png b/zh-cn/application-dev/reference/arkui-ts/figures/renderfit_bottom.png new file mode 100755 index 0000000000000000000000000000000000000000..cf2be838d7835133f3765322ffdf5bc16ccbd4f0 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/renderfit_bottom.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/renderfit_bottom_left.png b/zh-cn/application-dev/reference/arkui-ts/figures/renderfit_bottom_left.png new file mode 100755 index 0000000000000000000000000000000000000000..f77e6b5537e5f26cb9218a4e7686de042acc5552 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/renderfit_bottom_left.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/renderfit_bottom_right.png b/zh-cn/application-dev/reference/arkui-ts/figures/renderfit_bottom_right.png new file mode 100755 index 0000000000000000000000000000000000000000..df0322f1ae0425fb4134263e5327dd4ffcbfda4f Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/renderfit_bottom_right.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/renderfit_center.png b/zh-cn/application-dev/reference/arkui-ts/figures/renderfit_center.png new file mode 100755 index 0000000000000000000000000000000000000000..504aaa94f92a22176dd5048c357c74e7c2f680e2 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/renderfit_center.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/renderfit_left.png b/zh-cn/application-dev/reference/arkui-ts/figures/renderfit_left.png new file mode 100755 index 0000000000000000000000000000000000000000..d372654c2a0e41c42c69106cd042471095dfca95 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/renderfit_left.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/renderfit_resize_contain.png b/zh-cn/application-dev/reference/arkui-ts/figures/renderfit_resize_contain.png new file mode 100755 index 0000000000000000000000000000000000000000..fd04d6fd625145ac61a07b13c6c1e50315d4e134 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/renderfit_resize_contain.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/renderfit_resize_contain_bottom_right.png b/zh-cn/application-dev/reference/arkui-ts/figures/renderfit_resize_contain_bottom_right.png new file mode 100755 index 0000000000000000000000000000000000000000..d04fc2f80a7b760053dd350de8ca3306180de057 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/renderfit_resize_contain_bottom_right.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/renderfit_resize_contain_top_left.png b/zh-cn/application-dev/reference/arkui-ts/figures/renderfit_resize_contain_top_left.png new file mode 100755 index 0000000000000000000000000000000000000000..71c88de3fe4538b8a82f79e81685ce883923e37b Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/renderfit_resize_contain_top_left.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/renderfit_resize_cover.png b/zh-cn/application-dev/reference/arkui-ts/figures/renderfit_resize_cover.png new file mode 100755 index 0000000000000000000000000000000000000000..2b314c1816b7f55a01926f6f82799fda36bc770d Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/renderfit_resize_cover.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/renderfit_resize_cover_bottom_right.png b/zh-cn/application-dev/reference/arkui-ts/figures/renderfit_resize_cover_bottom_right.png new file mode 100755 index 0000000000000000000000000000000000000000..ebc25b3014e76999a7bd4a327f561e81c899ccc5 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/renderfit_resize_cover_bottom_right.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/renderfit_resize_cover_top_left.png b/zh-cn/application-dev/reference/arkui-ts/figures/renderfit_resize_cover_top_left.png new file mode 100755 index 0000000000000000000000000000000000000000..ec5acb9eb85d655975072b55310e9e28386ebf46 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/renderfit_resize_cover_top_left.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/renderfit_resize_fill.png b/zh-cn/application-dev/reference/arkui-ts/figures/renderfit_resize_fill.png new file mode 100755 index 0000000000000000000000000000000000000000..bc6c460795f1b2aa6c2f1c6a6ceccf5529b60459 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/renderfit_resize_fill.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/renderfit_right.png b/zh-cn/application-dev/reference/arkui-ts/figures/renderfit_right.png new file mode 100755 index 0000000000000000000000000000000000000000..dfc8f6817db740ea2aca1c818f57b50c19918423 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/renderfit_right.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/renderfit_top.png b/zh-cn/application-dev/reference/arkui-ts/figures/renderfit_top.png new file mode 100755 index 0000000000000000000000000000000000000000..e614f0c4c30982eeedb21f94d3096e103a6e6a45 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/renderfit_top.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/renderfit_top_left.png b/zh-cn/application-dev/reference/arkui-ts/figures/renderfit_top_left.png new file mode 100755 index 0000000000000000000000000000000000000000..fa5453060943930c9f3ca4e3984a2790955ead62 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/renderfit_top_left.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/renderfit_top_right.png b/zh-cn/application-dev/reference/arkui-ts/figures/renderfit_top_right.png new file mode 100755 index 0000000000000000000000000000000000000000..867bcc9106bbd7ff92ce865050c154bf8ef76e3e Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/renderfit_top_right.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-animatorproperty.md b/zh-cn/application-dev/reference/arkui-ts/ts-animatorproperty.md index 0b1c6a67f96470e83ec9928c578b573e8ac5210b..6388f5bbf5c7ac0beacb6a6e954b51bd87e117d2 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-animatorproperty.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-animatorproperty.md @@ -1,6 +1,6 @@ # 属性动画 -组件的æŸäº›é€šç”¨å±žæ€§å˜åŒ–时,å¯ä»¥é€šè¿‡å±žæ€§åŠ¨ç”»å®žçŽ°æ¸å˜è¿‡æ¸¡æ•ˆæžœï¼Œæå‡ç”¨æˆ·ä½“验。支æŒçš„属性包括widthã€heightã€backgroundColorã€opacityã€scaleã€rotateã€translateç‰ã€‚ +组件的æŸäº›é€šç”¨å±žæ€§å˜åŒ–时,å¯ä»¥é€šè¿‡å±žæ€§åŠ¨ç”»å®žçŽ°æ¸å˜è¿‡æ¸¡æ•ˆæžœï¼Œæå‡ç”¨æˆ·ä½“验。支æŒçš„属性包括widthã€heightã€backgroundColorã€opacityã€scaleã€rotateã€translateç‰ã€‚布局类改å˜å®½é«˜çš„动画,内容都是直接到终点状æ€ï¼Œä¾‹å¦‚æ–‡å—ã€canvas的内容ã€linearGradientç‰ï¼Œå¦‚æžœè¦å†…容跟éšå®½é«˜å˜åŒ–,å¯ä»¥ä½¿ç”¨[renderFit](ts-universal_attributes-renderfit.md)属性é…置。 > **说明:** > 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 eb891e4848d5c25aace39a40ec56b2f0308569bf..eb028cd2f7e0c4bf04089475b8f1fefee0811ef9 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 @@ -1,6 +1,6 @@ # 显å¼åŠ¨ç”» -æ供全局animateTo显å¼åŠ¨ç”»æŽ¥å£æ¥æŒ‡å®šç”±äºŽé—包代ç 导致的状æ€å˜åŒ–æ’入过渡动效。 +æ供全局animateTo显å¼åŠ¨ç”»æŽ¥å£æ¥æŒ‡å®šç”±äºŽé—包代ç 导致的状æ€å˜åŒ–æ’入过渡动效。åŒå±žæ€§åŠ¨ç”»ï¼Œå¸ƒå±€ç±»æ”¹å˜å®½é«˜çš„动画,内容都是直接到终点状æ€ï¼Œä¾‹å¦‚æ–‡å—ã€canvas的内容ã€linearGradientç‰ï¼Œå¦‚æžœè¦å†…容跟éšå®½é«˜å˜åŒ–,å¯ä»¥ä½¿ç”¨[renderFit](ts-universal_attributes-renderfit.md)属性é…置。 > **说明:** > diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-universal_attributes-renderfit.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal_attributes-renderfit.md new file mode 100644 index 0000000000000000000000000000000000000000..67beb9c7e16c97f4bd476cd7b258ed0ddc1cf838 --- /dev/null +++ b/zh-cn/application-dev/reference/arkui-ts/ts-universal_attributes-renderfit.md @@ -0,0 +1,88 @@ +# ç»„ä»¶å†…å®¹å¡«å……æ–¹å¼ + +用于决定在组件的宽高动画过程ä¸ï¼Œå¦‚何将动画最终的组件内容绘制在组件上。 + +> **说明:** +> +> 从API Version 10开始支æŒã€‚åŽç»ç‰ˆæœ¬å¦‚æœ‰æ–°å¢žå†…å®¹ï¼Œåˆ™é‡‡ç”¨ä¸Šè§’æ ‡å•ç‹¬æ ‡è®°è¯¥å†…容的起始版本。 + + +## 属性 + +| å称 | å‚数类型 | å¿…å¡« | æè¿° | +| -----| ------------------------------------------ | -----| ------------------------------------ | +| renderFit | [RenderFit](#renderfit枚举说明) | 是 | 设置宽高动画过程ä¸çš„组件内容填充方å¼ã€‚<br/>当ä¸è®¾ç½®renderFit属性时,å–默认值RenderFit.TOP_LEFT。 | + +## RenderFit枚举说明 + +| å称 | æè¿° | 示æ„图 | +| ------- | ------------------------------------ | --------------------------------- | +| CENTER | ä¿æŒåŠ¨ç”»ç»ˆæ€çš„内容大å°ï¼Œå¹¶ä¸”内容始终与组件ä¿æŒä¸å¿ƒå¯¹é½ã€‚ | ![renderfit_center](figures/renderfit_center.png) | +| TOP | ä¿æŒåŠ¨ç”»ç»ˆæ€çš„内容大å°ï¼Œå¹¶ä¸”内容始终与组件ä¿æŒé¡¶éƒ¨ä¸å¿ƒå¯¹é½ã€‚ | ![renderfit_top](figures/renderfit_top.png) | +| BOTTOM | ä¿æŒåŠ¨ç”»ç»ˆæ€çš„内容大å°ï¼Œå¹¶ä¸”内容始终与组件ä¿æŒåº•éƒ¨ä¸å¿ƒå¯¹é½ã€‚ | ![renderfit_bottom](figures/renderfit_bottom.png) | +| LEFT | ä¿æŒåŠ¨ç”»ç»ˆæ€çš„内容大å°ï¼Œå¹¶ä¸”内容始终与组件ä¿æŒå·¦ä¾§å¯¹é½ã€‚ | ![renderfit_left](figures/renderfit_left.png) | +| RIGHT | ä¿æŒåŠ¨ç”»ç»ˆæ€çš„内容大å°ï¼Œå¹¶ä¸”内容始终与组件ä¿æŒå³ä¾§å¯¹é½ã€‚ | ![renderfit_right](figures/renderfit_right.png) | +| TOP_LEFT | ä¿æŒåŠ¨ç”»ç»ˆæ€çš„内容大å°ï¼Œå¹¶ä¸”内容始终与组件ä¿æŒå·¦ä¸Šè§’对é½ã€‚ | ![renderfit_top_left](figures/renderfit_top_left.png) | +| TOP_RIGHT | ä¿æŒåŠ¨ç”»ç»ˆæ€çš„内容大å°ï¼Œå¹¶ä¸”内容始终与组件ä¿æŒå³ä¸Šè§’对é½ã€‚ | ![renderfit_top_right](figures/renderfit_top_right.png) | +| BOTTOM_LEFT | ä¿æŒåŠ¨ç”»ç»ˆæ€çš„内容大å°ï¼Œå¹¶ä¸”内容始终与组件ä¿æŒå·¦ä¸‹è§’对é½ã€‚ | ![renderfit_bottom_left](figures/renderfit_bottom_left.png) | +| BOTTOM_RIGHT | ä¿æŒåŠ¨ç”»ç»ˆæ€çš„内容大å°ï¼Œå¹¶ä¸”内容始终与组件ä¿æŒå³ä¸‹è§’对é½ã€‚ | ![renderfit_bottom_right](figures/renderfit_bottom_right.png) | +| RESIZE_FILL | ä¸è€ƒè™‘动画终æ€å†…容的宽高比,并且内容始终缩放到组件的大å°ã€‚ | ![renderfit_resize_fill](figures/renderfit_resize_fill.png) | +| RESIZE_CONTAIN | ä¿æŒåŠ¨ç”»ç»ˆæ€å†…容的宽高比进行缩å°æˆ–放大,使内容完整显示在组件内,且与组件ä¿æŒä¸å¿ƒå¯¹é½ã€‚ | ![renderfit_resize_contain](figures/renderfit_resize_contain.png) | +| RESIZE_CONTAIN_TOP_LEFT | ä¿æŒåŠ¨ç”»ç»ˆæ€å†…容的宽高比进行缩å°æˆ–放大,使内容完整显示在组件内。当组件宽方å‘有剩余时,内容与组件ä¿æŒå·¦ä¾§å¯¹é½ï¼Œå½“组件高方å‘有剩余时,内容与组件ä¿æŒé¡¶éƒ¨å¯¹é½ã€‚ | ![renderfit_resize_contain_top_left](figures/renderfit_resize_contain_top_left.png) | +| RESIZE_CONTAIN_BOTTOM_RIGHT | ä¿æŒåŠ¨ç”»ç»ˆæ€å†…容的宽高比进行缩å°æˆ–放大,使内容完整显示在组件内。当组件宽方å‘有剩余时,内容与组件ä¿æŒå³ä¾§å¯¹é½ï¼Œå½“组件高方å‘有剩余时,内容与组件ä¿æŒåº•éƒ¨å¯¹é½ã€‚ | ![renderfit_resize_contain_bottom_right](figures/renderfit_resize_contain_bottom_right.png) | +| RESIZE_COVER | ä¿æŒåŠ¨ç”»ç»ˆæ€å†…容的宽高比进行缩å°æˆ–放大,使内容两边都大于或ç‰äºŽç»„件两边,且与组件ä¿æŒä¸å¿ƒå¯¹é½ï¼Œæ˜¾ç¤ºå†…容的ä¸é—´éƒ¨åˆ†ã€‚ | ![renderfit_resize_cover](figures/renderfit_resize_cover.png) | +| RESIZE_COVER_TOP_LEFT | ä¿æŒåŠ¨ç”»ç»ˆæ€å†…容的宽高比进行缩å°æˆ–放大,使内容的两边都æ°å¥½å¤§äºŽæˆ–ç‰äºŽç»„件两边。当内容宽方å‘有剩余时,内容与组件ä¿æŒå·¦ä¾§å¯¹é½ï¼Œæ˜¾ç¤ºå†…容的左侧部分。当内容高方å‘有剩余时,内容与组件ä¿æŒé¡¶éƒ¨å¯¹é½ï¼Œæ˜¾ç¤ºå†…容的顶侧部分。 | ![renderfit_resize_cover_top_left](figures/renderfit_resize_cover_top_left.png) | +| RESIZE_COVER_BOTTOM_RIGHT | ä¿æŒåŠ¨ç”»ç»ˆæ€å†…容的宽高比进行缩å°æˆ–放大,使内容的两边都æ°å¥½å¤§äºŽæˆ–ç‰äºŽç»„件两边。当内容宽方å‘有剩余时,内容与组件ä¿æŒå³ä¾§å¯¹é½ï¼Œæ˜¾ç¤ºå†…容的å³ä¾§éƒ¨åˆ†ã€‚当内容高方å‘有剩余时,内容与组件ä¿æŒåº•éƒ¨å¯¹é½ï¼Œæ˜¾ç¤ºå†…容的底侧部分。| ![renderfit_resize_cover_bottom_right](figures/renderfit_resize_cover_bottom_right.png) | + +> **说明:** +> +> - 示æ„图ä¸ï¼Œè“色区域表示内容,橙黄色区域表示节点大å°ã€‚ +> - ä¸åŒçš„内容填充方å¼åœ¨å®½é«˜åŠ¨ç”»è¿‡ç¨‹ä¸æ•ˆæžœä¸ä¸€è‡´ï¼Œå¼€å‘者需è¦é€‰æ‹©åˆé€‚的内容填充方å¼ä»¥å®žçŽ°éœ€è¦çš„动画效果。 + +## 示例 + +```ts +// xxx.ets +@Entry +@Component +struct RenderFitExample { + @State width1: number = 100; + @State height1: number = 30; + flag: boolean = true; + build() { + Column() { + Text("Hello") + .width(this.width1) + .height(this.height1) + .borderWidth(1) + .textAlign(TextAlign.Start) + .renderFit(RenderFit.LEFT) // 设置LEFTçš„renderFit,动画过程ä¸ï¼ŒåŠ¨ç”»çš„终æ€å†…容与组件ä¿æŒå·¦å¯¹é½ + .margin(20) + + Text("Hello") + .width(this.width1) + .height(this.height1) + .textAlign(TextAlign.Center) + .borderWidth(1) + .renderFit(RenderFit.CENTER) // 设置CENTERçš„renderFit,动画过程ä¸ï¼ŒåŠ¨ç”»çš„终æ€å†…容与组件ä¿æŒä¸å¿ƒå¯¹é½ + .margin(20) + + Button("animate") + .onClick(() => { + animateTo({ curve: Curve.Ease }, () => { + if (this.flag) { + this.width1 = 150; + this.height1 = 50; + } else { + this.width1 = 100; + this.height1 = 30; + } + this.flag = !this.flag; + }) + }) + }.width("100%").height("100%").alignItems(HorizontalAlign.Center) + } +} +``` + +![renderfit](figures/renderfit.gif)