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

#### 问题现象

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

#### 效果预览

#### 背景知识

*   scale：设置组件缩放。和animateTo结合实现缩放效果。
*   onAppear：组件挂载显示后触发此回调。表示组件已挂载显示。

#### 解决方案

实现思路如下：

1.  父组件设置scale属性，设置x，y的缩放比例。
2.  在onAppear回调里，使用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)
  }
}
```