SwipeGesture和RotationGesture手势

# SwipeGesture

用于触发滑动事件，滑动速度大于100vp/s时可识别成功。

参数名称	参数类型	必填	参数描述
fingers	number	否	触发滑动的最少手指数，默认为1，最小为1指，最大为10指。 默认值：1
direction	SwipeDirection	否	触发滑动手势的滑动方向。 默认值：SwipeDirection.All
speed	number	否	识别滑动的最小速度（默认为100VP/秒）。 默认值：100

SwipeDirection的三个枚举值

declare enum SwipeDirection {
    /**
     * Default.
     * @since 8
     */
    None,
    /**
     * Sliding horizontally.
     * @since 8
     */
    Horizontal,
    /**
     * Sliding Vertical
     * @since 8
     */
    Vertical,
    /**
     * Sliding in all directions.
     * @since 8
     */
    All
}

• All：所有方向。
• Horizontal：水平方向，手指滑动方向与x轴夹角小于45度时触发。
• Vertical：竖直方向，手指滑动方向与y轴夹角小于45度时触发。
• None：任何方向均不可触发。

  事件

* Slide gesture recognition success callback.
 * @since 8
 */
onAction(event: (event?: GestureEvent) => void): SwipeGestureInterface;

完整代码

@Entry
@Component
struct SwipeGestureExample {
  @State rotateAngle: number = 0
  @State speed: number = 1
​
  build() {
    Column() {
      Column() {
        Text("滑动 速度" + this.speed)
        Text("滑动 角度" + this.rotateAngle)
      }
      .border({ width: 3 })
      .width(300)
      .height(200)
      .margin(100)
      .rotate({
​
​
        angle: this.rotateAngle,})
      // 单指竖直方向滑动时触发该事件
      .gesture(
      SwipeGesture({
        fingers:2,
        direction: SwipeDirection.All })
        .onAction((event: GestureEvent) => {
          this.speed = event.speed
          this.rotateAngle = event.angle
        })
      )
    }.width('100%')
  }
}

RotationGesture

用于触发旋转手势事件，触发旋转手势的最少手指为2指，最大为5指，最小改变度数为1度。

数名称	参数类型	必填	参数描述
fingers	number	否	触发旋转的最少手指数, 最小为2指，最大为5指。 默认值：2
angle	number	否	触发旋转手势的最小改变度数，单位为deg。 默认值：1

提供了四种事件

事件

• ** onActionStart(event: (event?: GestureEvent) => void)：Rotation手势识别成功回调。**
• onActionUpdate(event: (event?: GestureEvent) => void)：Rotation手势移动过程中回调。
• ** onActionEnd(event: (event?: GestureEvent) => void)：Rotation手势识别成功，手指抬起后触发回调。**
• ** onActionCancel(event: () => void)：Rotation手势识别成功，接收到触摸取消事件触发回调。**

* Pan gesture recognition success callback.
     * @since 7
     */
    onActionStart(event: (event?: GestureEvent) => void): RotationGestureInterface;
    /**
     * Callback when the Pan gesture is moving.
     * @since 7
     */
    onActionUpdate(event: (event?: GestureEvent) => void): RotationGestureInterface;
    /**
     * The Pan gesture is successfully recognized. When the finger is lifted, the callback is triggered.
     * @since 7
     */
    onActionEnd(event: (event?: GestureEvent) => void): RotationGestureInterface;
    /**
     * The Pan gesture is successfully recognized and a callback is triggered when the touch cancel event is received.
     * @since 7
     */
    onActionCancel(event: () => void): RotationGestureInterface;
}

完整代码：

// xxx.ets
@Entry
@Component
struct RotationGestureExample {
  @State angle: number = 0
  @State rotateValue: number = 0
​
  build() {
    Column() {
      Column() {
        Text('旋转角度:' + this.angle)
      }
      .height(200)
      .width(300)
      .padding(20)
      .border({ width: 3 })
      .margin(80)
      .rotate({ angle: this.angle })
      // 双指旋转触发该手势事件
      .gesture(
      RotationGesture()
        .onActionStart((event: GestureEvent) => {
          console.info('Rotation start')
        })
        .onActionUpdate((event: GestureEvent) => {
          this.angle = this.rotateValue + event.angle
​
        })
        .onActionEnd(() => {
          this.rotateValue = this.angle
          console.info('Rotation end')
        }).onActionCancel(()=>{
        console.info('Rotation onActionCancel')
      })
      )
    }.width('100%')
  }
}

用于触发滑动事件，滑动速度大于100vp/s时可识别成功。

参数名称	参数类型	必填	参数描述
fingers	number	否	触发滑动的最少手指数，默认为1，最小为1指，最大为10指。 默认值：1
direction	SwipeDirection	否	触发滑动手势的滑动方向。 默认值：SwipeDirection.All
speed	number	否	识别滑动的最小速度（默认为100VP/秒）。 默认值：100

SwipeDirection的三个枚举值

declare enum SwipeDirection {
    /**
     * Default.
     * @since 8
     */
    None,
    /**
     * Sliding horizontally.
     * @since 8
     */
    Horizontal,
    /**
     * Sliding Vertical
     * @since 8
     */
    Vertical,
    /**
     * Sliding in all directions.
     * @since 8
     */
    All
}

• All：所有方向。
• Horizontal：水平方向，手指滑动方向与x轴夹角小于45度时触发。
• Vertical：竖直方向，手指滑动方向与y轴夹角小于45度时触发。
• None：任何方向均不可触发。

  事件

* Slide gesture recognition success callback.
 * @since 8
 */
onAction(event: (event?: GestureEvent) => void): SwipeGestureInterface;

完整代码

@Entry
@Component
struct SwipeGestureExample {
  @State rotateAngle: number = 0
  @State speed: number = 1
​
  build() {
    Column() {
      Column() {
        Text("滑动 速度" + this.speed)
        Text("滑动 角度" + this.rotateAngle)
      }
      .border({ width: 3 })
      .width(300)
      .height(200)
      .margin(100)
      .rotate({
​
​
        angle: this.rotateAngle,})
      // 单指竖直方向滑动时触发该事件
      .gesture(
      SwipeGesture({
        fingers:2,
        direction: SwipeDirection.All })
        .onAction((event: GestureEvent) => {
          this.speed = event.speed
          this.rotateAngle = event.angle
        })
      )
    }.width('100%')
  }
}

RotationGesture

用于触发旋转手势事件，触发旋转手势的最少手指为2指，最大为5指，最小改变度数为1度。

数名称	参数类型	必填	参数描述
fingers	number	否	触发旋转的最少手指数, 最小为2指，最大为5指。 默认值：2
angle	number	否	触发旋转手势的最小改变度数，单位为deg。 默认值：1

提供了四种事件

事件

• ** onActionStart(event: (event?: GestureEvent) => void)：Rotation手势识别成功回调。**
• onActionUpdate(event: (event?: GestureEvent) => void)：Rotation手势移动过程中回调。
• ** onActionEnd(event: (event?: GestureEvent) => void)：Rotation手势识别成功，手指抬起后触发回调。**
• ** onActionCancel(event: () => void)：Rotation手势识别成功，接收到触摸取消事件触发回调。**

* Pan gesture recognition success callback.
     * @since 7
     */
    onActionStart(event: (event?: GestureEvent) => void): RotationGestureInterface;
    /**
     * Callback when the Pan gesture is moving.
     * @since 7
     */
    onActionUpdate(event: (event?: GestureEvent) => void): RotationGestureInterface;
    /**
     * The Pan gesture is successfully recognized. When the finger is lifted, the callback is triggered.
     * @since 7
     */
    onActionEnd(event: (event?: GestureEvent) => void): RotationGestureInterface;
    /**
     * The Pan gesture is successfully recognized and a callback is triggered when the touch cancel event is received.
     * @since 7
     */
    onActionCancel(event: () => void): RotationGestureInterface;
}

完整代码：

// xxx.ets
@Entry
@Component
struct RotationGestureExample {
  @State angle: number = 0
  @State rotateValue: number = 0
​
  build() {
    Column() {
      Column() {
        Text('旋转角度:' + this.angle)
      }
      .height(200)
      .width(300)
      .padding(20)
      .border({ width: 3 })
      .margin(80)
      .rotate({ angle: this.angle })
      // 双指旋转触发该手势事件
      .gesture(
      RotationGesture()
        .onActionStart((event: GestureEvent) => {
          console.info('Rotation start')
        })
        .onActionUpdate((event: GestureEvent) => {
          this.angle = this.rotateValue + event.angle
​
        })
        .onActionEnd(() => {
          this.rotateValue = this.angle
          console.info('Rotation end')
        }).onActionCancel(()=>{
        console.info('Rotation onActionCancel')
      })
      )
    }.width('100%')
  }
}