HarmonyOS 基础组件渲染的内容发生变化 添加fade动画

请参考如下代码：

@Entry
@Component
struct  {
  @State opacityValue: OpacityOption = new OpacityOption(1)
  @State message: FadeProperty<Resource> = new FadeProperty($r("sys.media.return_home_fill"), this.opacityValue);
  @State text: FadeProperty<string> = new FadeProperty("hello world", this.opacityValue);

  build() {
    Column() {
      Image(this.message.value).width(100).height(100)
        .opacity(this.opacityValue.opacity)
        .onClick(() => {
          this.message.value =
            (this.message.value.id == $r("sys.media.ohos_ic_public_web").id) ? $r("sys.media.return_home_fill") :
            $r("sys.media.ohos_ic_public_web")
        })

      Text(this.text.value).fontSize(50)
        .opacity(this.opacityValue.opacity)
        .onClick(() => {
          this.text.value = this.text.value == "hello world" ? "你好世界" : "hello world"
        })
    }
    .justifyContent(FlexAlign.Center)
    .height('100%')
    .width('100%')
  }
}

@Observed
class OpacityOption {
  opacity: number

  constructor(opacity: number) {
    this.opacity = opacity
  }
}

class FadeProperty<T> {
  private _value: T | undefined = undefined
  opacityOption: OpacityOption

  set value(v: T) {
    if (this._value) {
      animateTo({
        duration: 250, onFinish: () => {
          this._value = v
          animateTo({ duration: 250 }, () => {
            this.opacityOption.opacity = 1
          })
        }
      }, () => {
        this.opacityOption.opacity = 0
      })
    } else {
      this._value = v
    }
  }

  get value() {
    return this._value!
  }

  constructor(value: T, opacityOption: OpacityOption) {
    this.value = value
    this.opacityOption = opacityOption
  }
}