# SwipeGesture

用于觸發(fā)滑動事件，滑動速度大于100vp/s時可識別成功。

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度時觸發(fā)。
• Vertical：豎直方向，手指滑動方向與y軸夾角小于45度時觸發(fā)。
• None：任何方向均不可觸發(fā)。

  事件

* 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,})
      // 單指豎直方向滑動時觸發(fā)該事件
      .gesture(
      SwipeGesture({
        fingers:2,
        direction: SwipeDirection.All })
        .onAction((event: GestureEvent) => {
          this.speed = event.speed
          this.rotateAngle = event.angle
        })
      )
    }.width('100%')
  }
}

RotationGesture

用于觸發(fā)旋轉手勢事件，觸發(fā)旋轉手勢的最少手指為2指，最大為5指，最小改變度數(shù)為1度。

提供了四種事件

事件

• ** onActionStart(event: (event?: GestureEvent) => void)：Rotation手勢識別成功回調(diào)。**
• onActionUpdate(event: (event?: GestureEvent) => void)：Rotation手勢移動過程中回調(diào)。
• ** onActionEnd(event: (event?: GestureEvent) => void)：Rotation手勢識別成功，手指抬起后觸發(fā)回調(diào)。**
• ** onActionCancel(event: () => void)：Rotation手勢識別成功，接收到觸摸取消事件觸發(fā)回調(diào)。**

* 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 })
      // 雙指旋轉觸發(fā)該手勢事件
      .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%')
  }
}

用于觸發(fā)滑動事件，滑動速度大于100vp/s時可識別成功。

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度時觸發(fā)。
• Vertical：豎直方向，手指滑動方向與y軸夾角小于45度時觸發(fā)。
• None：任何方向均不可觸發(fā)。

  事件

* 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,})
      // 單指豎直方向滑動時觸發(fā)該事件
      .gesture(
      SwipeGesture({
        fingers:2,
        direction: SwipeDirection.All })
        .onAction((event: GestureEvent) => {
          this.speed = event.speed
          this.rotateAngle = event.angle
        })
      )
    }.width('100%')
  }
}

RotationGesture

用于觸發(fā)旋轉手勢事件，觸發(fā)旋轉手勢的最少手指為2指，最大為5指，最小改變度數(shù)為1度。

提供了四種事件

事件

• ** onActionStart(event: (event?: GestureEvent) => void)：Rotation手勢識別成功回調(diào)。**
• onActionUpdate(event: (event?: GestureEvent) => void)：Rotation手勢移動過程中回調(diào)。
• ** onActionEnd(event: (event?: GestureEvent) => void)：Rotation手勢識別成功，手指抬起后觸發(fā)回調(diào)。**
• ** onActionCancel(event: () => void)：Rotation手勢識別成功，接收到觸摸取消事件觸發(fā)回調(diào)。**

* 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 })
      // 雙指旋轉觸發(fā)該手勢事件
      .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%')
  }
}