HarmonyOS-ArkUI 手势系列2--单一手势(长按，拖拽，滑动，旋转，捏合)

HarmonyOS-ArkUI 手势系列1--API分析及使用方式及示例-CSDN博客q文章浏览阅读596次，点赞7次，收藏9次。手势是人机交互的重要方式，可分为单一手势（如点击、滑动）、组合手势（多个手势组合）和多层级手势（复杂嵌套交互）。ArkTS通过gesture属性实现手势监听，如TapGesture监听点击事件。手势API采用接口类型化工厂常量模式，隐藏实现细节，提供统一调用入口。开发者可通过配置手势参数（如count、fingers）和回调函数实现丰富交互，回调返回的GestureEvent包含详细交互数据。这种设计简化了手势监听实现，同时支持复杂交互场景。https://blog.csdn.net/weixin_28774815/article/details/149032511?spm=1001.2014.3001.5501我们在上文主要分析了鸿蒙ArkUI中手势的API分析方法论，以及调用方式，并以点击手势为例,根据分析思路写出了代码案例。对于手势分类我们再列一下：

• 单一手势
  • 点击手势(上文已经学习)
  • 长按手势(本文学习)
  • 拖拽手势(本文学习)
  • 滑动手势(本文学习)
  • 旋转手势(本文学习)
  • 捏合手势(本文学习)
• 组合手势(下一篇学习)： 将多个单一的手势，按照特定的顺序(同时发生， 同时只有一个发生，必须按照顺序发生)组合起来，形成给为复杂的手势操作，可以完成就更加丰富的交互方式。例如微信朋友圈编辑动态，九宫格照片拖拽的逻辑，实现照片位置的对调。
• 多层级手势(未来学习)： 常见于父子组件嵌套时，比较复杂的交互逻辑。比如地图应用的地图查看场景

本文我们主要介绍剩余的单一手势。

长按手势-LongPressGestureInterface

有了上文中点击事件手势的API分析， 以及代码写法分析，我们很快的可以根据以下长按手势的API， 按照相同的思路写出代码来。

代码案例

import { JSON } from '@kit.ArkTS'
import vibrator from '@ohos.vibrator';
import { BusinessError } from '@kit.BasicServicesKit';

function triggerShortVibrator() {
  try {
    vibrator.startVibration({
      type: 'time', // 定时振动模式
      duration: 100, // 振动时长（毫秒)模拟复制粘贴的效果
    }, {
      id: 0, // 振动ID（默认0）
      usage: 'alarm', // 使用场景（alarm/notification等）
    }, (error: BusinessError) => { // 回调函数处理结果
      if (error) {
        console.error(`振动失败！错误码: ${error.code}, 信息: ${error.message}`);
      } else {
        console.info('短振动触发成功');
      }
    });
  } catch (err) {
    const e: BusinessError = err as BusinessError
    console.error(`振动出现错误, 错误为: ${e.name}, ${e.code}, ${e.message}, ${e.data}`)
  }
}

Text('测试一下长按手势') //长按手机振动,文案跳动动画
  .id('longPressGestureAccess')
  .fontSize(45)
  .scale({ x: this.longPressScale, y: this.longPressScale })
  .gesture(
    LongPressGesture({ fingers: 1, repeat: false, duration: 500 })
    .onAction((event) => { //长按手势识别成功
      console.log(`longPressGestureAccess onAction(), event= ${JSON.stringify(event)}`)
      // 手机振动
      triggerShortVibrator()
      // 将本控件放大到二倍
      this.getUIContext().keyframeAnimateTo({delay: 200}, [
        {duration : 100, event: ()=>{this.longPressScale = 1.2}, curve: Curve.FastOutLinearIn},
        {duration : 100, event: ()=>{this.longPressScale = 1.0}, curve: Curve.LinearOutSlowIn},
      ])

    })
    .onActionEnd((event) => { //手指抬起时回调,无论达没达到都会回调
      console.log(`longPressGestureAccess onActionEnd(), event= ${JSON.stringify(event)}`)
    })
    .onActionCancel(() => {
      console.log(`longPressGestureAccess onActionCancel()`)
    })
    , GestureMask.Normal)

效果展示：

拖拽手势-PanGestureInterface

代码案例

  @State panX : number = 0
  @State panY : number = 0
  @State panScale : number = 1.0

Text(`测试一下拖拽手势`)
    .id('panGestureInterface')
    .fontSize(45)
    .translate({x: this.panX, y: this.panY})
    .scale({ x: this.panScale, y: this.panScale })
    .gesture(PanGesture({fingers: 1})
      .onActionStart((event)=> { //当滑动距离达到阈值的时候回调
        console.log(`panGestureInterface onActionStart(), event= ${JSON.stringify(event)}`)
        this.panScale = 1.5
      })
      .onActionUpdate((event)=> { //实时新元素回调
        console.log(`panGestureInterface onActionUpdate(), event= ${JSON.stringify(event)}`)
        this.panX = event.offsetX
        this.panY = event.offsetY
      })
      .onActionEnd((event)=> { //当手指抬起时进行回调
        console.log(`panGestureInterface onActionEnd(), event= ${JSON.stringify(event)}`)
        this.panX = 0
        this.panY = 0
        this.panScale = 1.0
      })
      .onActionCancel(()=> { //当手势被中断的时候触发
        console.log(`panGestureInterface onActionCancel()`)
        this.panX = 0
        this.panY = 0
        this.panScale = 1.0
      }), GestureMask.Normal)

展示效果

滑动手势-SwipeGestureInterface

API细节如图所示：

代码案例

@State swipeAngle: number = 0

Text(`测试一下滑动手势`)
    .id(`swipeGestureInterface`)
    .height(200)
    .fontSize(45)
    .rotate({ angle: this.swipeAngle })
    .gesture(SwipeGesture({ fingers: 1 })//滑动手势, 默认手指超过100vp/s的时候会被识别
      .onAction((event) => { //手指滑动完后会回调
        console.log(`swipeGestureInterface onAction(), event= ${JSON.stringify(event)}`)
        this.swipeAngle = this.swipeAngle + event.angle
      })
      , GestureMask.Normal)

效果展示

旋转手势-RotationGestureInterface

代码案例

@State rotationAngle: number = 0

 Text(`测试一下旋转手势`)
        .fontSize(45)
        .rotate({ angle: this.rotationAngle })
        .gesture(RotationGesture({ fingers: 2 })
          .onActionStart((event) => { //手势识别成功回调
            console.log(`rotationGestureInterface onActionStart(), event= ${JSON.stringify(event)}`)
            this.rotationAngle = event.angle
          })
          .onActionUpdate((event) => { //实时更新
            console.log(`rotationGestureInterface onActionUpdate(), event= ${JSON.stringify(event)}`)
            this.rotationAngle = event.angle
          })
          .onActionEnd((event) => { //当手指抬起时进行回调
            console.log(`rotationGestureInterface onActionEnd(), event= ${JSON.stringify(event)}`)
            this.rotationAngle = 0
          })
          .onActionCancel(() => { //当手势被中断的时候触发,或者取消的时候触发
            console.log(`rotationGestureInterface onActionCancel()`)
          }), GestureMask.Normal)

效果展示

捏合手势-PinchGestureInterface

代码案例

@State pinchScale : number = 1.0
Text(`测试一下捏合手势`)
    .fontSize(45)
    .scale({x: this.pinchScale, y: this.pinchScale})
    .gesture(PinchGesture({ fingers: 2 })
      .onActionStart((event) => { //手势识别成功回调
        console.log(`pinchGestureInterface onActionStart(), event= ${JSON.stringify(event)}`)
      })
      .onActionUpdate((event) => { //实时更新
        console.log(`pinchGestureInterface onActionUpdate(), event= ${JSON.stringify(event)}`)
        this.pinchScale = event.scale
      })
      .onActionEnd((event) => { //当手指抬起时进行回调
        console.log(`pinchGestureInterface onActionEnd(), event= ${JSON.stringify(event)}`)
        this.pinchScale = event.scale
      })
      .onActionCancel(() => { //当手势被中断的时候触发,或者取消的时候触发
        console.log(`pinchGestureInterface onActionCancel()`)
      }), GestureMask.Normal)

效果展示