父组件及其子组件实现持续缩放效果
================

#### 问题现象

如何实现Row组件及其子组件持续缩放效果？

#### 效果预览

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/92/v3/CxMBBcKnTKu7fGfW0e1uaA/zh-cn_image_0000002658835377.png?HW-CC-KV=V1&HW-CC-Date=20260709T134037Z&HW-CC-Expire=86400&HW-CC-Sign=F41D3830835DFF71F5EF78CB53EEACE9EE8F37C11ECCA461394F998C5EBCC374 "点击放大")

#### 背景知识

*   [scale](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-universal-attributes-transformation#scale)：设置组件缩放。和animateTo结合实现缩放效果。
*   [onAppear](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-universal-events-show-hide#onappear)：组件挂载显示后触发此回调。表示组件已挂载显示。

#### 解决方案

实现思路如下：

1.  父组件设置scale属性，设置x，y的缩放比例。
2.  在onAppear回调里，使用[animateTo](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/arkts-apis-uicontext-uicontext#animateto)，设置动画时长，是否循环，实现持续缩放效果。

代码如下

@Entry
@Component
struct ScaleAnimationExample {
  @State length: Length = 0;
  @State scaleSize: number = 1;

  build() {
    Column() {
      Row() {
        Column() {
          Text('我是文本1')
          Text('我是文本2')
        }
        .height(this.length === 0 ? 'auto' : this.length)

        Column() {
          Text('我是文本1')
          Text('我是文本2')
          Text('我是文本3')
          Text('我是文本4')
        }
        .height(this.length === 0 ? 'auto' : this.length)

        Column() {
          Text('我是文本1')
          Text('我是文本2')
          Text('我是文本3')
        }
        .height(this.length === 0 ? 'auto' : this.length)
      }
      .margin(16)
      .alignItems(VerticalAlign.Top)
      .scale({ x: this.scaleSize, y: this.scaleSize })
      .onAppear(() => {
        this.getUIContext().animateTo({
          iterations: -1,
          playMode: PlayMode.Alternate
        }, () => {
          this.scaleSize = 1.3;
        });
      })
    }
    .width('91%')
    .margin(16)
    .backgroundColor('#f3f5f7')
    .borderWidth(3)
    .borderRadius(36)
    .borderColor(Color.White)
    .justifyContent(FlexAlign.Center)
    .alignItems(HorizontalAlign.Center)
  }
}