HarmonyOS 鸿蒙Next Refresh如何自定义,下拉的动画

HarmonyOS 鸿蒙Next Refresh如何自定义,下拉的动画

Refresh 如何自定义,下拉的动画

2 回复

可以参考官方文档中的示例2和示例3,看是否满足需求:https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-container-refresh-V5,或者使用imageAnimator的实现方式,文档:https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V13/ts-basic-components-imageanimator-V13

参考示例如下:

@Entry
@Component
struct Index3 {
  @State isRefreshing: boolean = false
  @State counter: number = 0
  @State durationTime: number = 100 //每个数字动画时长
  @State aniState: AnimationStatus = AnimationStatus.Initial

  @Builder
  RefreshAnimation() {
    Column() {
      ImageAnimator()
        .images([
          {
            src: $r('app.media.img1'),
            duration: this.durationTime
          },
          {
            src: $r('app.media.img2'),
            duration: this.durationTime
          },
          {
            src: $r('app.media.img3'),
            duration: this.durationTime
          },
          {
            src: $r('app.media.img4'),
            duration: this.durationTime
          }
        ])
        .state(this.aniState)
        .reverse(false)
        .fillMode(FillMode.Both)
        .iterations(-1)
        .width(40)
        .height(40)
        .margin({ top: 10 })
        .onStart(() => {
          console.info('LoadingDialog Start')
        })
        .onPause(() => {
          console.info('LoadingDialog Pause')
        })
        .onRepeat(() => {
          console.info('LoadingDialog Repeat')
        })
        .onCancel(() => {
          console.info('LoadingDialog Cancel')
        })
        .onFinish(() => {
          console.info('LoadingDialog Finish')
        })
    }
  }

  build() {
    Column() {
      Refresh({
        refreshing: $$this.isRefreshing,
        offset: 120,
        friction: 100,
        builder: this.RefreshAnimation
      }) {
        Text('Pull Down and refresh: ' + this.counter)
          .fontSize(30)
          .margin(10)
      }
      .onStateChange((refreshStatus: RefreshStatus) => {
        console.info('Refresh onStatueChange state is ' + refreshStatus)
      })
      .onRefreshing(() => {
        this.aniState = AnimationStatus.Running
        setTimeout(() => {
          this.counter++
          this.isRefreshing = false
          this.aniState = AnimationStatus.Stopped
        }, 1000)
        console.log('onRefreshing test')
      })
    }
  }
}

更多关于HarmonyOS 鸿蒙Next Refresh如何自定义,下拉的动画的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


HarmonyOS鸿蒙Next支持自定义Refresh组件的下拉刷新动画,主要通过设置属性动画的相关属性来实现。以下是具体方法:

首先,开发者可以基于Refresh组件实现下拉刷新功能,并通过监听Refresh组件state状态的变化来触发动画效果。在自定义下拉刷新动画时,可以设计多种动画样式,如图片旋转、缩放等,这些动画效果可以通过组合不同的属性动画来实现。

其次,可以设置一个或多个图片资源,并通过设置它们的x轴偏移量、延时播放等属性来创建丰富的动画效果。例如,通过调整Image组件的rotate属性,实现图标在下拉过程中的旋转效果,同时结合offsetY等状态变量,使动画效果与用户的下拉操作同步。

此外,HarmonyOS鸿蒙Next提供了丰富的UI组件和动画能力,开发者需确保动画的流畅性、响应速度、兼容性和稳定性,在各种设备和环境下都能正常运行。

如果问题依旧没法解决请联系官网客服,官网地址是:https://www.itying.com/category-93-b0.html

回到顶部