HarmonyOS鸿蒙Next实现B站手势下滑出现刷新的图标，图标的角度增加或减少伴随手势滑动距离而变化。手势下滑距离越大，进度正向增加越多，反之，手势上滑距离越大，进度反向减少越多。

HarmonyOS鸿蒙Next实现B站手势下滑出现刷新的图标，图标的角度增加或减少伴随手势滑动距离而变化。手势下滑距离越大，进度正向增加越多，反之，手势上滑距离越大，进度反向减少越多。

33388a4f5c44e6165f93e659a3aeee0.jpg

这是我给的图，图标的角度增加或减少伴随手势滑动距离而变化。手势下滑距离越大，进度正向增加越多，反之，手势上滑距离越大，进度反向减少越多。


更多关于HarmonyOS鸿蒙Next实现B站手势下滑出现刷新的图标，图标的角度增加或减少伴随手势滑动距离而变化。手势下滑距离越大，进度正向增加越多，反之，手势上滑距离越大，进度反向减少越多。的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

在HarmonyOS鸿蒙Next中，可以通过@ohos.gesture模块监听手势事件，结合@ohos.animator模块实现图标角度随手势滑动距离变化的效果。使用PanGesture监听下滑和上滑手势，获取滑动距离offsetY，根据offsetY的正负值调整图标角度。通过Animator动态更新图标旋转角度，实现进度随手势变化的效果。

更多关于HarmonyOS鸿蒙Next实现B站手势下滑出现刷新的图标，图标的角度增加或减少伴随手势滑动距离而变化。手势下滑距离越大，进度正向增加越多，反之，手势上滑距离越大，进度反向减少越多。的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS Next中实现B站风格的刷新动画效果，可以通过以下步骤完成：

  1. 手势监听： 使用PanGesture监听滑动事件，获取垂直方向的滑动距离(dy)：
@State dy: number = 0;

PanGesture({})
  .onActionUpdate((event: GestureEvent) => {
    this.dy = event.offsetY;
  })
  1. 图标旋转控制： 根据滑动距离计算旋转角度，建议设置最大滑动距离限制(如200px)：
@State rotateAngle: number = 0;

// 计算旋转角度
calcRotation() {
  const MAX_DY = 200;
  const MAX_ANGLE = 360;
  this.rotateAngle = (this.dy / MAX_DY) * MAX_ANGLE;
}
  1. 动画实现： 使用ArkUI的动画API实现平滑旋转效果：
Image($r('app.media.refresh_icon'))
  .rotate({ angle: this.rotateAngle })
  .animation({ duration: 100, curve: Curve.Linear })
  1. 刷新触发： 当滑动距离超过阈值时触发刷新动作：
if (Math.abs(this.dy) > REFRESH_THRESHOLD) {
  this.startRefresh();
}
  1. 回弹效果： 手势结束时添加回弹动画：
.onActionEnd(() => {
  animateTo({
    duration: 300,
    curve: Curve.Spring
  }, () => {
    this.dy = 0;
    this.rotateAngle = 0;
  })
})

完整示例代码结构：

@Component
struct RefreshComponent {
  @State dy: number = 0;
  @State rotateAngle: number = 0;

  build() {
    Column() {
      Image($r('app.media.refresh_icon'))
        .rotate({ angle: this.rotateAngle })
        .animation({ duration: 100, curve: Curve.Linear })
    }
    .gesture(
      PanGesture({})
        .onActionUpdate((event: GestureEvent) => {
          this.dy = event.offsetY;
          this.calcRotation();
        })
        .onActionEnd(() => {
          // 处理刷新逻辑
        })
    )
  }
}

注意事项：

  • 滑动距离与旋转角度的比例关系可根据实际需求调整
  • 建议添加最大旋转角度限制
  • 刷新完成后需要重置旋转状态，
回到顶部