HarmonyOS/OpenHarmony (Stage model) application development single gesture (3)

5. RotationGesture

1. RotationGesture(value?:{ fingers?:number; angle?:number})

The rotation gesture is used to trigger the rotation gesture event. The minimum number of fingers to trigger the rotation gesture is 2 fingers and the maximum is 5 fingers. The minimum change degree is 1 degree. It has two optional parameters:

fingers: optional parameter, used to declare the minimum number of fingers required to trigger the rotation gesture. The minimum value is 2, the maximum value is 5, and the default value is 2.

angle: optional parameter, used to declare the minimum degree of change that triggers the rotation gesture. The unit is deg. The default value is 1.

Take binding a rotation gesture on the Text component to realize the rotation of the component as an example. You can obtain the rotation angle in the callback function of the rotation gesture to realize the rotation of the component:

// xxx.ets
@Entry
@Component
struct Index {
  @State angle: number = 0;
  @State rotateValue: number = 0;

  build() {
    Column() {
      Text('RotationGesture angle:' + this.angle).fontSize(28)
        // 在组件上绑定旋转布局，可以通过修改旋转角度来实现组件的旋转
        .rotate({ angle: this.angle })
        .gesture(
          RotationGesture()
            .onActionStart((event: GestureEvent) => {
              console.info('RotationGesture is onActionStart');
            })
              // 当旋转手势生效时，通过旋转手势的回调函数获取旋转角度，从而修改组件的旋转角度
            .onActionUpdate((event: GestureEvent) => {
              this.angle = this.rotateValue + event.angle;
              console.info('RotationGesture is onActionEnd');
            })
              // 当旋转结束抬手时，固定组件在旋转结束时的角度
            .onActionEnd(() => {
              this.rotateValue = this.angle;
              console.info('RotationGesture is onActionEnd');
            })
            .onActionCancel(() => {
              console.info('RotationGesture is onActionCancel');
            })
        )
    }
    .height(200)
    .width(250)
  }
}

6. SwipeGesture

1. SwipeGesture(value?:{ fingers?:number; direction?:SwipeDirection; speed?:number})

The sliding gesture is used to trigger sliding events. It can be successfully recognized when the sliding speed is greater than 100vp/s. It has three optional parameters:

fingers: optional parameter, used to declare the minimum number of fingers required to trigger the sliding gesture. The minimum value is 1, the maximum value is 10, and the default value is 1.

direction: optional parameter, used to declare the direction that triggers the sliding gesture. This enumeration value supports logical AND (&) and logical OR (|) operations. The default value is SwipeDirection.All.

speed: optional parameter, used to declare the minimum sliding recognition speed that triggers sliding. The unit is vp/s. The default value is 100.

Take binding a sliding gesture on the Column component to rotate the component as an example:

// xxx.ets
@Entry
@Component
struct Index {
  @State rotateAngle: number = 0;
  @State speed: number = 1;

  build() {
    Column() {
      Column() {
        Text("SwipeGesture speed\n" + this.speed)
        Text("SwipeGesture angle\n" + this.rotateAngle)
      }
      .border({ width: 3 })
      .width(300)
      .height(200)
      .margin(100)
      // 在Column组件上绑定旋转，通过滑动手势的滑动速度和角度修改旋转的角度
      .rotate({ angle: this.rotateAngle })
      .gesture(
        // 绑定滑动手势且限制仅在竖直方向滑动时触发
        SwipeGesture({ direction: SwipeDirection.Vertical })
          // 当滑动手势触发时，获取滑动的速度和角度，实现对组件的布局参数的修改
          .onAction((event: GestureEvent) => {
            this.speed = event.speed;
            this.rotateAngle = event.angle;
          })
      )
    }
  }
}

 

Note : When SwipeGesture and PanGesture are bound at the same time, competition will occur if they are bound in the default or mutually exclusive manner. The triggering condition for SwipeGesture is that the sliding speed reaches 100vp/s, the triggering condition for PanGesture is that the sliding distance reaches 5vp, and the gesture that reaches the triggering condition first is triggered. You can achieve different effects by modifying the parameters of SwipeGesture and PanGesture.