HarmonyOS 如何实现图片淡入淡出的效果？

Question

如题：HarmonyOS 如何实现图片淡入淡出的效果？

Answer 1

基于geometryTransition能力实现，参考示例代码

@Entry
@Component
struct FadeInFadeOutImagePage {
  @State curImage: Resource = $r('app.media.image1')
  @State curImageVisibility: number = 1;
  intervalId: number = -1;
  @State usingTopImage: boolean = true;

  aboutToAppear(): void {
    this.intervalId = setInterval(() => {
      animateTo({
        duration: 1000,
      }, () => {
        this.usingTopImage = !this.usingTopImage
      })
    }, 10000);
  }

  aboutToDisappear(): void {
    clearInterval(this.intervalId)
  }

  build() {
    Stack() {
      if (this.usingTopImage) {
        Image($r('app.media.image3'))
          .autoResize(false)
          .clip(true)
          .width(300)
          .height(300)
          .geometryTransition("picture")
          .transition(TransitionEffect.OPACITY.animation({duration: 2000, curve: this.usingTopImage? Curve.EaseIn: Curve.EaseOut}))
      } else {
        Image($r('app.media.image4'))
          .autoResize(false)
          .clip(true)
          .width(300)
          .height(300)
          .geometryTransition("picture")
          .transition(TransitionEffect.OPACITY.animation({duration: 2000, curve: this.usingTopImage? Curve.EaseOut: Curve.EaseIn}))
      }
    }
    .width('100%')
    .height('100%')
  }
}