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

可以参考官方文档中的示例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](/user/Entry)
[@Component](/user/Component)
struct Index3 {
  [@State](/user/State) isRefreshing: boolean = false
  [@State](/user/State) counter: number = 0
  [@State](/user/State) durationTime: number = 100 //每个数字动画时长
  [@State](/user/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’)
})
}
}
}<button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 8px; right: 8px; font-size: 14px;">复制</button>