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

HarmonyOS
2024-12-24 16:30:26
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
zxjiu

基于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%')
  }
}
分享
微博
QQ
微信
回复
2024-12-24 17:45:03
相关问题
HarmonyOS 图片按压效果实现
378浏览 • 2回复 待解决
图片模糊效果如何实现
1020浏览 • 1回复 待解决
如何实现图片大图预览效果
2499浏览 • 1回复 待解决
HarmonyOS 下拉图片放大效果如何实现
240浏览 • 1回复 待解决
如何设置图片高斯模糊效果
3161浏览 • 3回复 待解决
HarmonyOS 如何实现柔滑边缘效果
212浏览 • 1回复 待解决
HarmonyOS 如何实现抽屉效果控件
172浏览 • 1回复 待解决
HarmonyOS 如何实现粒子效果
94浏览 • 1回复 待解决
HarmonyOS 如何实现阴影效果
266浏览 • 1回复 待解决
如何实现按钮点击效果
695浏览 • 2回复 待解决
如何实现类似keyframes效果
2014浏览 • 1回复 待解决
如何实现组件阴影效果
1152浏览 • 1回复 待解决