HarmonyOS Image组件src变化的时候的动画实例？

Question

我有一个Image组件，他的图片会在某种场景下会更新图片，我想在更新图片的时候加一个scaleIn和scaleOut的动画，该怎么实现

Answer 1

参考下面demo，该效果为渐隐渐现效果，将animateTo中的透明度切换为缩放效果即可

import { HMRouter } from '@dssuite/hmrouter'

@HMRouter({ pageUrl: '240821175558105' })
@Component
export struct IR240821175558105 {
  @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")
        })
    }
    .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
  }
}