如何使用renderFit实现自适应伸缩动画
======================

#### 问题现象

在animateTo动画中，给组件添加了renderFit属性后，组件宽高也没有跟随动画实时宽高变化。希望在宽度变化时，音乐+滑动条+人声这一个Row的宽度实时变化，请问该如何实现？

#### 背景知识

*   HarmonyOS提供[animateTo](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/arkts-apis-uicontext-uicontext#animateto)显式动画接口来指定由于闭包代码导致的状态变化插入过渡动效。
*   [renderFit](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-universal-attributes-renderfit#renderfit)用于设置宽高动画过程中的组件内容填充方式，当不设置renderFit属性时，取默认值RenderFit.TOP\_LEFT。
*   [clip](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-universal-attributes-sharp-clipping#clip12)通用属性可用于对组件进行裁剪、遮罩处理。

#### 解决方案

1.  使用@State定义透明度，布局宽度，圆角大小等状态变量，这些变量在用户交互或者动画过程中会被更新，从而更新动画的显示。
2.  在Row组件中定义Text，Slider等组件，实现音乐播放条动画。
3.  为父组件添加renderFit属性，将该属性参数设置为RESIZE\_CONTAIN，保持动画终态内容的宽高比，使内容完整显示在组件内，且与组件保持中心对齐。

完整示例参考如下：

import { curves } from '@kit.ArkUI';

@Entry
@Component
struct Index {
  @State controlViewOpacity: number \= 0.5; _// 透明度_
  @State controlViewShow: boolean \= true; _// 是否展示_
  @State controlViewWidth: number \= 240; _// 布局宽度_
  @State controlViewBorderRadius: number \= 0; _// 布局的圆角大小_
  @State controlViewPaddingLeft: number \= 0; _// 内边距大小_
  finalControlViewWidth: number \= 240; _// 最终布局宽度_

  build() {
    Stack() {
      Row() {
        Row() {
          Text('音乐').fontColor(Color.White)
            .fontSize(15);
          Slider({
            value: 50,
            min: 0,
            max: 100,
            style: SliderStyle.OutSet
          })
            .selectedColor('#ffcb67')
            .trackColor('#ffcb67')
            .layoutWeight(1);
          Text('人声').fontColor(Color.White)
            .fontSize(15);
        }
        .renderFit(RenderFit.RESIZE\_CONTAIN) _// renderFit设置宽高跟随动画实时变化_
        .opacity(this.controlViewOpacity)
        .visibility(this.controlViewShow ? Visibility.Visible : Visibility.None)
        .height(30)
        .layoutWeight(1)
        .clip(true); _// 伸缩时裁剪超出部分_

        Image($r('app.media.startIcon')).width(30).height(30)
          .margin({ right: 10 }).onClick(() \=\> {
        _  // 点击图标执行显示动画_
          this.getUIContext()?.animateTo({
            duration: 5000,
            curve: curves.springMotion(0.5, 15),
            iterations: 1,
            playMode: PlayMode.Normal,

          }, () \=\> {
            if (this.controlViewWidth \=== 50) {
              this.controlViewWidth \= this.finalControlViewWidth;
              this.controlViewBorderRadius \= 10;
              this.controlViewPaddingLeft \= 10;
              this.controlViewOpacity \= 1;
              this.controlViewShow \= true;
            } else {
              this.controlViewWidth \= 50;
              this.controlViewBorderRadius \= 25;
              this.controlViewPaddingLeft \= 0;
              this.controlViewOpacity \= 0;
              this.controlViewShow \= false;
            }

          });
        });
      }
      .renderFit(RenderFit.RESIZE\_CONTAIN)
      .backgroundColor('#000')
      .justifyContent(FlexAlign.End)
      .width(this.controlViewWidth)
      .padding({ left: this.controlViewPaddingLeft, right: 0 })
      .borderRadius(this.controlViewBorderRadius)
      .height(50);
    }
    .width('100%')
    .height('100%');
  }
}