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枚举说明) | 是 | 设置宽高动画过程中的组件内容填充方式。
当不设置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)