HarmonyOS/OpenHarmony (ステージモデル) アプリケーション開発シングルジェスチャー (3)

5.回転ジェスチャ

RotationGesture (値?:{ 指? :番号;角度? :番号})

回転ジェスチャは、回転ジェスチャイベントをトリガするために使用されます。回転ジェスチャをトリガする指の最小数は 2 本で、最大は 5 本です。最小変化度は 1 度です。これには 2 つのオプションパラメータがあります:

Fingers: オプションのパラメータ。回転ジェスチャをトリガーするために必要な指の最小数を宣言するために使用されます。最小値は 2、最大値は 5、デフォルト値は 2 です。

angle: オプションのパラメータ。回転ジェスチャをトリガーする最小変化度を宣言するために使用されます。単位は度です。デフォルト値は 1 です。

例として、テキストコンポーネントに回転ジェスチャをバインドしてコンポーネントの回転を実現すると、回転ジェスチャのコールバック関数で回転角度を取得して、コンポーネントの回転を実現できます。

// 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 (値?:{ 指? :番号;方向? :SwipeDirection ;速度? :番号})

スライドジェスチャは、スライドイベントをトリガーするために使用されます。スライド速度が 100vp/s を超えると、正常に認識されます。オプションのパラメータが 3 つあります:

Fingers: オプションのパラメータ。スライドジェスチャをトリガーするために必要な指の最小数を宣言するために使用されます。最小値は 1、最大値は 10、デフォルト値は 1 です。

方向: スライドジェスチャをトリガーする方向を宣言するために使用されるオプションのパラメーター。この列挙値は、論理 AND (&) および論理 OR (|) 演算をサポートします。デフォルト値は SwipeDirection.All です。

Speed: オプションのパラメータ。スライドをトリガーする最小のスライド認識速度を宣言するために使用されます。単位は vp/s です。デフォルト値は 100 です。

例として、Column コンポーネントにスライドジェスチャをバインドしてコンポーネントを回転させます。

// 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;
          })
      )
    }
  }
}

注: SwipeGesture と PanGesture が同時にバインドされている場合、デフォルトまたは相互排他的な方法でバインドされていると競合が発生します。SwipeGesture のトリガー条件はスライド速度が 100vp/s に達すること、PanGesture のトリガー条件はスライド距離が 5vp に達することであり、最初にトリガー条件に達したジェスチャーがトリガーされます。SwipeGesture と PanGesture のパラメータを変更することで、さまざまな効果を実現できます。