You can bind the swipe gesture event using PanGesture and generate the inertial scrolling animation upon touch release using the velocityY field in the onActionEnd callback. The following is an example. You can adjust the parameters to achieve the expected scrolling speed.
@Entry
@Component
struct PanGestureExample {
@State offsetX: number = 0;
@State offsetY: number = 0;
@State positionX: number = 0;
@State positionY: number = 0;
private panOption: PanGestureOptions = new PanGestureOptions({ direction: PanDirection.Up | PanDirection.Down });
build() {
Column() {
Text('PanGesture offset: \nX: ' + this.offsetX + '\n' + 'Y: ' + this.offsetY)
}
.height(200)
.width(200)
.padding(20)
.border({ width: 3 })
.margin(30)
// Move the component with its upper left corner as the coordinate origin.
.translate({
x: this.offsetX,
y: this.offsetY,
z: 0
})
.gesture(
// Drag
PanGesture(this.panOption)
.onActionStart((event?: GestureEvent) => {
console.info('Pan start');
})
.onActionUpdate((event?: GestureEvent) => {
if (event) {
// Add the offset to the last location.
this.offsetX = this.positionX + event.offsetX;
this.offsetY = this.positionY + event.offsetY;
}
})
.onActionEnd((event) => {
this.offsetX = this.positionX + event.offsetX;
this.offsetY = this.positionY + event.offsetY;
this.positionX = this.positionX + event.offsetX;
this.positionY = this.positionY + event.offsetY;
let ySpeed = event.velocityY;
this.getUIContext().animateTo({
duration: 1000,
curve: Curve.LinearOutSlowIn,
iterations: 1,
playMode: PlayMode.Normal,
onFinish: () => {
console.info('play end');
}
}, () => {
this.offsetY = this.offsetY + ySpeed * 0.2;
this.positionY = this.positionY + ySpeed * 0.2;
})
})
)
}
}