HarmonyOS 在Column onAppear时，通过linearGradient和animation改变控件背景的动画

参考demo如下：

@Entry
@Component
struct Page2 {
  @State linearGradientParam: number = 0.1
  @State animationVal: number = 1
  @State flage :boolean = false
  build() {
    Column() {
      Column() {
        Text('Test').fontSize('32lpx').fontWeight(FontWeight.Medium)
      }
      .width('228lpx')
      .height('88lpx')
      .justifyContent(FlexAlign.Center)
      .alignItems(HorizontalAlign.Center)
      // 将颜色设为透明
      .linearGradient({
        angle: '109.26deg',
        colors: [
          [this.animationVal === 0 ? Color.Transparent : (this.flage?Color.Transparent:'#008c8c'), 0.1],
          [this.animationVal === 0 ? Color.Transparent : (this.flage?Color.Transparent:'rgba(255, 255, 255, 0.4)'), 0.5],
        ]
      })
      // 变化颜色范围
      // .linearGradient({
      // angle: '109.26deg',
      // colors: [
      // ['#008c8c', this.animationVal === 0 ? 0 : 0.1],
      // [Color.Transparent, this.animationVal === 0 ? 0 : 1],
      // ]
      // })
      .onAppear(() => {
        console.log('console',this.animationVal);
        animateTo({
          duration: 2000, onFinish: () => {
            console.log("animation finish")
          }
        }, () => {
          this.animationVal = 0
        })
      })
      Button('click').onClick(() => {
        console.log('console',this.animationVal);

        console.log("aboutToAppear")
        if (this.animationVal === 1) {
          this.flage = false
          animateTo({
            duration: 2000, onFinish: () => {
              console.log("animation finish")

            }
          }, () => {
            this.animationVal = 0

          })
        } else {
          animateTo({
            duration: 2000, onFinish: () => {
              console.log("animation finish")
              this.flage = !this.flage
            }
          }, () => {
            this.animationVal = 1

          })
        }
      })
    }
  }
}