使用zIndex来改变图片层级思路

如果轮播图溢出当前组件,并且每张图片出现会闪一下,闪烁是因为伙伴代码每次都将图片列表更新了,forEach中的图片每次都会销毁重建导致的闪烁问题,可以通过使用zIndex来改变图片层级思路来实现该动画。

HarmonyOS
2024-05-26 15:41:07
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
put_get

使用的核心API

zIndex

核心代码解释

class CardItem { 
  img: Resource = $r("app.media.startIcon") 
  zIndex: number = 0 
} 
 
@Entry 
@Component 
struct ImageBanner { 
  @State translateX: number = 0 
  @State themeCardLength: number = 3 
  @State firstCardOpacity: number = 0 
  @State zIndexArr: number[] = [0, 1, 2] 
  @State imgList: CardItem[] = [ 
    { 
      img: $r("app.media.img1"), 
      zIndex: 0 
    }, { 
    img: $r("app.media.img2"), 
    zIndex: 1 
  }, { 
    img: $r("app.media.img3"), 
    zIndex: 2 
  }] 
 
  aboutToAppear() { 
    this.zIndexArr = this.imgList.map(item => item.zIndex) 
  } 
 
  anim() { 
    animateTo({ 
      duration: 2000, onFinish: () => { 
        this.changeCards() 
        this.anim() 
        this.translateX = 0 
      } 
    }, () => { 
      this.translateX = -300 
    }) 
 
    animateTo({ 
      duration: 1000, delay: 1000, onFinish: () => { 
        this.firstCardOpacity = 0 
      } 
    }, () => { 
      this.firstCardOpacity = 100 
    }) 
  } 
 
  changeCards() { 
    for (let i = 0; i < this.zIndexArr.length; i++) { 
      if (this.zIndexArr[i] == 2) { 
        this.zIndexArr[i] = 0 
        this.imgList[i].zIndex = 0 
      } else { 
        this.zIndexArr[i]++ 
        this.imgList[i].zIndex++ 
      } 
    } 
    console.log(JSON.stringify(this.zIndexArr), JSON.stringify(this.imgList.map(item => item.zIndex))) 
  } 
 
  build() { 
    Column() { 
      Button("开始动画").onClick(() => { 
        this.anim() 
        // this.changeCards() 
      }) 
      Stack() { 
        ForEach(this.imgList, (item: CardItem, index: number) => { 
          Image(item.img) 
            .onAppear(() => { 
              console.log("onAppear" + index) 
            }) 
            .zIndex(this.zIndexArr[index]) 
            .width(300) 
            .borderRadius(10) 
            .translate({ x: 2 == item.zIndex ? this.translateX : 0 }) 
          // .opacity(index == 0 ? this.firstCardOpacity * 1.0 / 100 : 1) 
        }) 
      }.padding(8) 
    } 
  } 
}
分享
微博
QQ
微信
回复
2024-05-27 20:43:43
相关问题
WebView层级问题有知道的吗?
3938浏览 • 1回复 待解决
使用ArkTS调用Java代码吗?
4629浏览 • 1回复 待解决
如何仅使用margin解决外边距问题
684浏览 • 1回复 待解决
开发鸿蒙怎么使用less设计样式
5506浏览 • 1回复 待解决
鸿蒙WebView 层级 总是处于最外层
6146浏览 • 3回复 待解决
button 字体颜色无法改变
2224浏览 • 1回复 待解决
如果改变 SubTabBarStyle 的字体颜色
419浏览 • 1回复 待解决
前端验证码配合后端的实现思路
2148浏览 • 1回复 待解决
Hsp中使用图片 编译不通过
665浏览 • 1回复 待解决
如何使用Image加载沙箱路径图片资源
157浏览 • 1回复 待解决
png图片使用Image组件加载出现锯齿
468浏览 • 1回复 待解决
关于导入图片使用权限和问题
466浏览 • 1回复 待解决
鸿蒙图片资源在Java代码中如何使用
6721浏览 • 1回复 待解决