使用SwipeGesture如何实现手指离开屏幕惯性滑动效果

使用SwipeGesture只返回了滑动速度,要实现手指离开屏幕达到惯性滑动效果,如何处理惯性滑动的方向,滑动的时间,以及距离等问题

HarmonyOS
2024-12-26 14:53:36
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
put_get

参考:

@Entry
@Component
struct PanGestureExample {
  @State offsetX: number = 0
  @State offsetY: number = 0
  @State positionX: number = 0
  @State positionY: number = 0
  private panOption: PanGestureOptions = new PanGestureOptions({ direction: PanDirection.Up | PanDirection.Down })

  build() {
    Column() {
      Text('PanGesture offset:\nX: ' + this.offsetX + '\n' + 'Y: ' + this.offsetY)
    }
    .height(300)
    .width(300)
    .padding(20)
    .border({ width: 3 })
    .margin(50)
    .translate({ x: this.offsetX, y: this.offsetY, z: 0 }) // 以组件左上角为坐标原点进行移动
    // 上下拖动触发该手势事件
    .gesture(
      PanGesture(this.panOption)
        .onActionStart((event?: GestureEvent) => {
          console.info('Pan start')
        })
        .onActionUpdate((event?: GestureEvent) => {
          if (event) {
            // this.offsetX = this.positionX + event.offsetX
            // this.offsetY = this.positionY + event.offsetY
            console.log('yeyouzhi offsetY>>>'+event.offsetY)
            animateTo({
              duration: 2000,
              curve: Curve.EaseOut,
              iterations: 1 ,
              playMode: PlayMode.Normal,
              onFinish: () => {
                console.info('play end')
              }
            }, () => {

              this.offsetX = this.positionX + event.offsetX
              this.offsetY = this.positionY + event.offsetY
            })
          }
        })
        .onActionEnd(() => {
          this.positionX = this.offsetX
          this.positionY = this.offsetY
          console.info('Pan end')
        })
    )
  }
}
分享
微博
QQ
微信
回复
2024-12-26 18:23:52
相关问题
Canvas制作图表如何实现滑动惯性
843浏览 • 1回复 待解决
列表滑动惯性处理问题
630浏览 • 1回复 待解决
实现层叠广告滑动效果
1253浏览 • 1回复 待解决
滑动组件如何实现单边spring的效果
1143浏览 • 1回复 待解决
HarmonyOS Refresh跟list组件惯性滑动问题
496浏览 • 1回复 待解决
HarmonyOS 怎样实现开屏动画或图片?
704浏览 • 1回复 待解决
HarmonyOS 如何监听屏幕滑动pop功能
273浏览 • 1回复 待解决
HarmonyOS 监听entryPage离开
173浏览 • 1回复 待解决