鸿蒙 HarmonyOS ArkTS ArkUI 动画 向右滑动、向左滑动、向下滑动

177 阅读1分钟

371a36ee035d205b9b8485836130d0ae_c992cc79260590bd29a871c099d7afc3110b36.gif

@Entry
@Component
struct Index {
  @State Ax: number = 0
  @State Axx: number= 260
  @State Ay: number = 290
  onPageShow():void{
    animateTo ( {
      duration: 2000,
      iterations: -1,
      curve:Curve.Linear,
      playMode:PlayMode.Alternate
    }, () => {
      this.Ax = 260
      this.Axx = 0
      this.Ay = 600
    } )
  }
  build() {
      Column() {

        // 向右滑动
        Column(){}
        .width(100)
        .height(100)
        .backgroundColor('#ffc44f4f')
        .position({x:this.Ax,y:0})
        Text('向右滑动')
          .fontSize(20)
          .fontWeight(FontWeight.Bold)
          .margin({bottom:10,top:110})


        // 向左滑动
        Column(){}
        .width(100)
        .height(100)
        .backgroundColor('#ffc44f4f')
        .position({x:this.Axx,y:150})
        Text('向左滑动')
          .fontSize(20)
          .fontWeight(FontWeight.Bold)
          .margin({bottom:10,top:110})


        // 向下滑动
        Column(){}
        .width(100)
        .height(100)
        .backgroundColor('#ffc44f4f')
        .position({x:130,y:this.Ay})
        Text('向下滑动')
          .fontSize(20)
          .fontWeight(FontWeight.Bold)
          .margin({bottom:10,top:110})
      }
      .width('100%')
      .margin({top:40})


  }
}