实现层叠广告滑动效果

实现类似层叠广告滑动效果,可放在主页优化页面视觉效果。

HarmonyOS
2024-05-26 10:59:53
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
Nicrosoft

使用的核心API

  • scale
  • PanGesture

核心代码解释

使用scale及PanGesture组合形成滑动效果。

核心代码如下:

//资源图片放在 ${project.dir}\entry\src\main\resources\rawfile\img 目录下 
// page.ets 
import curves from '@ohos.curves'; 
// import {Slide} from './Slide'; 
​ 
@Preview 
@Entry 
@Component 
struct StackDemo { 
@State message: string = 'Hello World' 
@State list: Array<Slide> = [ 
  new Slide("1", "img/1.png"), 
  new Slide("2", "img/2.jpg"), 
  new Slide("3", "img/3.png"), 
] 
@State aheadIndex: number = 0; 
@State offsetX: number | string = 0; 
​ 
build() { 
  Row() { 
    Stack({ alignContent: Alignment.Start }) { 
      ForEach(this.list, (item: Slide, index: number) => { 
        Row() { 
          Image($rawfile(item.src)) 
            .scale({ x: this.getScale(index), y: this.getScale(index), centerX: 0 }) 
        } 
        .offset({ x: this.getOffsetX(index), y: 0 }) 
        .zIndex(this.getZIndex(index)) 
      }, (item: Slide) => item.id) 
    } 
    .width("100%") 
    .gesture( 
      PanGesture({ direction: PanDirection.Horizontal, distance: 1 }) 
        .onActionUpdate((event?: GestureEvent) => { 
          this.handlePanGestureUpdate(event?.offsetX); 
        }) 
        .onActionEnd((event?: GestureEvent) => { 
          this.handlePanGestureEnd(event?.offsetX); 
        }) 
    ) 
  } 
  .height("20%") 
  .padding({ top: 5, left: 5, right: 5 }) 
} 
​ 
getRealIndex(index: number): number { 
  if (index < this.aheadIndex) { 
    return (this.list.length - 1) - this.aheadIndex + (this.aheadIndex - index); 
  } 
  return index - this.aheadIndex; 
} 
​ 
getScale(index: number): number { 
  let width = 1 - (this.getRealIndex(index) + 1) * 0.05; 
  return width; 
} 
​ 
getOffsetX(index: number): number | string { 
  let realIndex = this.getRealIndex(index); 
  if (index == this.aheadIndex) { 
    return this.offsetX; 
  } 
  return realIndex * 25; 
} 
​ 
getZIndex(index: number): number { 
  console.log(`zIndex:${this.aheadIndex}`) 
  return -this.getRealIndex(index); 
} 
handlePanGestureUpdate(offsetX?: number): void { 
  if (!offsetX || offsetX > 0) { 
    return; 
  } 
  console.log(`Update offsetX:${offsetX}`) 
  animateTo({ curve: curves.springMotion() }, () => { 
    this.offsetX = offsetX!; 
  }) 
} 
​ 
handlePanGestureEnd(offsetX?: number): void { 
  if (!offsetX) { 
    return; 
  } 
  console.log(`End offsetX:${offsetX}`) 
  if (offsetX < -180) { 
    animateTo({ curve: curves.springMotion() }, () => { 
      this.offsetX = "-100%"; 
    }) 
    setTimeout(() => { 
      console.log("swipe next") 
      this.aheadIndex = this.aheadIndex == this.list.length - 1 ? 0 : this.aheadIndex + 1; 
      this.offsetX = 0; 
    }, 400) 
  } else { 
    animateTo({ curve: curves.springCurve(10, 1, 228, 30) }, () => { 
      this.offsetX = 0; 
    }) 
  } 
} 
} 
​ 
export class Slide { 
id: string; 
src: string; 
​ 
constructor(id: string, src: string) { 
  this.id = id; 
  this.src = src; 
} 
}

适配的版本信息

  • IDE:DevEco Studio 4.1.3.200
  • SDK: 4.1.0.18
分享
微博
QQ
微信
回复
2024-05-27 10:41:46
相关问题
滑动组件如何实现单边spring的效果
530浏览 • 1回复 待解决
鸿蒙 app 怎么接入华为广告 SDK?
2287浏览 • 1回复 待解决
canvas如何实现水印效果
402浏览 • 1回复 待解决
如何实现星级评分效果
59浏览 • 1回复 待解决
请求广告返回错误码401
788浏览 • 1回复 待解决
请求广告返回错误码21800003
738浏览 • 1回复 待解决
图片模糊效果如何实现
346浏览 • 1回复 待解决
如何等效实现JSONObejct效果
262浏览 • 1回复 待解决
panGesture结合动画实现fling效果
402浏览 • 1回复 待解决
使用swiper组件实现viewPager效果
523浏览 • 1回复 待解决
如何通过Progress实现loading效果
43浏览 • 1回复 待解决
如何实现列表页的单选效果
1039浏览 • 0回复 待解决
PopWindow的效果实现有哪些?
301浏览 • 1回复 待解决
鸿蒙中怎么实现动画翻转效果
8940浏览 • 2回复 待解决
tabs结合scroll实现吸顶效果
412浏览 • 1回复 待解决