default title

Preface

In this article, we introduce four gestures:

• PanGesture: Slide gesture (triggered by minimum distance).
• PinchGesture: Pinch gesture.
• RotationGesture: Rotation gesture.
• SwipeGesture: Slide gesture (triggered by minimum speed).

PanGesture

There are three properties that can be configured for sliding gestures:

1. Fingers: The minimum number of fingers that trigger sliding, with a default value of 1 and a range of values from 1 to 10.

2. Direction: The direction of gesture sliding, supporting logical AND and logical OR.

• All: All directions.
• Horizontal: The horizontal direction.
• Vertical: Vertical direction.
• Left: Slide to the left.
• Right: Slide to the right.
• Up: Slide upwards.
• Down: Slide down.
• None: It does not trigger in any direction.

3. Distance: The minimum sliding distance that triggers the sliding gesture. The default value for the stylus is 8, and the default value for other input sources is 5.

There are four types of callbacks for sliding gestures:

1. onActionStart: successful callback for sliding gesture recognition.

2. onActionUpdate: Slide gesture update callback.

3. onActionEnd: Slide gesture to end callback.

4. onActionCancel: Slide gesture to cancel callback without returning gesture event; OnActionCancel (API 18+): Slide gesture to cancel callback, return gesture event;

Let's take a look at how PanGesture is used through example code:

The above code binds a finger to the Row component, triggering a swipe event in the left direction. When the event is triggered, the console will output logs in the order of onActionStart ->onActionUpdate (which will continue to output with updates) ->onActionEnd.

PinchGesture

The pinch gesture can only configure the following two properties:

1. Fingers: The minimum number of fingers required to trigger a pinch gesture, with a default value of 2.

2. Distance: The minimum recognition distance, measured in vp, with a default value of 5.

There are four types of callbacks for pinching gestures:

1. onActionStart: successful callback for pinch gesture recognition.

2. onActionUpdate: Pinch gesture to update callback.

3. onActionEnd: Pinch gesture to end callback.

4. onActionCancel: Pinch gesture to cancel callback without returning gesture event; OnActionCancel (API 18+): Pinch gesture to cancel callback, return gesture event;

The example code is as follows:

The above code implements component scaling with two fingers.

RotationGesture

There are only two properties that can be configured for the rotation gesture:

1. Fingers: The minimum number of fingers required to trigger a rotation gesture, with a default value of 2.

2. angle: The minimum angle change that triggers the rotation gesture, measured in degrees, with a default value of 1.

There are four types of callbacks for rotation gestures:

1. onActionStart: callback for successful rotation gesture recognition.

2. onActionUpdate: callback during rotation gesture movement.

3. onActionEnd: Rotate gesture to end callback.

4. onActionCancel: Rotate gesture to cancel callback without returning gesture event; OnActionCancel (API 18+): Rotate gesture to cancel callback, return gesture event;

The example code is as follows:

The above code implements the rotation of components through two fingers.

SwipeGesture

There are three properties that can be configured for sliding gestures:

1. Fingers: The minimum number of fingers that trigger sliding, with a default value of 1 and a range of values from 1 to 10.

2. Direction: The direction in which the gesture slides.

• All: All directions.
• Horizontal: Triggered when the angle between the sliding direction of the finger and the x-axis is less than 45 degrees.
• Vertical: Triggered when the angle between the sliding direction of the finger and the y-axis is less than 45 degrees.
• None: It does not trigger in any direction.

3. Speed: The minimum sliding speed that triggers a sliding gesture, with a default value of 100vp/s.

Its trigger event callback has only one: onAction.

The example code is as follows:

The above code implements the horizontal direction of the component and the sliding event triggered by one finger.