HarmonyOS 最新的scroll和animator实现阅读器上下滚动效果的demo？

Question

麻烦给下最新的scroll和animator实现阅读器上下滚动效果的demo

Answer 1

参考demo:

@Entry
@Component
export struct InfiniteScroll {
  @Builder doNothingBuilder() {};
  @BuilderParam builder: () => void = this.doNothingBuilder;
  @State xOffset:number = 0
  @State yOffset:number = 0
  private selfHeight: number = 0
  scroller: Scroller = new Scroller()

  getOffset(index: number): number {
    let offset = this.yOffset - index * this.selfHeight
    if (offset > 1.5 * this.selfHeight) {
      offset -= 3 * this.selfHeight;
    } else if (offset < -1.5 * this.selfHeight) {
      offset += 3 * this.selfHeight;
    }
    return offset
  }

  build() {
    Scroll(this.scroller){
      Stack() {
        Stack() {
          Text("3").fontSize(100)
        }
        .backgroundColor(Color.Brown)
        .height("100%")
        .width("100%")
        .translate({y:this.getOffset(-1)})
        Stack() {
          Text("1").fontSize(100)
        }
        .backgroundColor(Color.Blue)
        .height("100%")
        .width("100%")
        .translate({y:this.getOffset(0)})
        Stack() {
          Text("2").fontSize(100)
        }
        .backgroundColor(Color.Green)
        .height("100%")
        .width("100%")
        .translate({y:this.getOffset(1)})
      }
    }
    .clip(true)
    .height("100%")
    .width("100%")
    .backgroundColor(Color.Yellow)
    .onScrollFrameBegin((offset: number) => {
      this.yOffset += offset
      if (this.yOffset < 0) {
        this.yOffset += 3 * this.selfHeight
      } else if (this.yOffset > 3 * this.selfHeight) {
        this.yOffset -= 3 * this.selfHeight
      }
      return { offsetRemain: 0 };
    })
    .onAreaChange((oldValue: Area, newValue: Area) => {
      this.selfHeight = newValue.height as number
    })
  }
}