实现层叠广告滑动效果

//资源图片放在 ${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; 
} 
}