鸿蒙Next手势详解系列：快滑手势

这篇文章了解一下快滑手势(SwipeGesture)，通过构造参数、回调函数和回调信息，来了解如何使用。
快滑手势处理器配置参数:SwipeGestureHandlerOptions

设置快滑手势的方向：SwipeDirection

GestureEvent对象在SwipeGesture中的回调属性：

基础了解之后，来看一下使用演示：

快滑演示.gif

注意：手势回调的角度，从X轴顺时针方向为[0,180],(-180,0)
快滑手势和滑动手势的区别是快滑是一次触发即结束了，没有中间过程，滑动是一个持续的过程。因此我们可以在快滑手势触发成功之后做一些逻辑处理。
演示源码：

@Extend(Radio)
function myRadioStyle2() {
  .checked(false)
  .radioStyle({
    checkedBackgroundColor: Color.Green,  //开启状态底板颜色
    uncheckedBorderColor:Color.Red, //关闭状态描边颜色
    indicatorColor:Color.Yellow  //开启状态内部圆饼颜色
  })
  .height(20)
  .width(20)
}
@Entry
@ComponentV2
struct SwipeGestureTest{
  @Local fingers:number =1
  @Local directionTest:SwipeDirection =SwipeDirection.All
  @Local speed:number = 100
  //回调信息
  @Local swipeSpeed:number=0
  @Local swipeAngle:number=0
  @Local offsetX:number=0
  @Local offsetY:number=0
  @Local _opacity:number=1
  build() {
    Column({space:20}){
     Stack(){
       Circle({width:100,height:100}).fill(Color.Red)
         .offset({
           x:this.offsetX,
           y:this.offsetY
         })
         .opacity(this._opacity)
         .gesture(
           SwipeGesture({fingers:this.fingers,direction:this.directionTest,speed:this.speed})
             .onAction((event)=>{
               this.swipeSpeed = event.speed
               this.swipeAngle = event.angle
               let X:number = 0
               let Y:number = 0
               if (0<this.swipeAngle&&this.swipeAngle<90){
                 const angleRadian = this.swipeAngle * Math.PI / 180;
                 X = this.swipeSpeed/10 *Math.cos(angleRadian)
                 Y = this.swipeSpeed/10 *Math.sin(angleRadian)
               }
               if (this.swipeAngle>90&&this.swipeAngle<180){
                 const angleRadian = (180-this.swipeAngle) * Math.PI / 180;
                 X = -this.swipeSpeed/10 *Math.cos(angleRadian)
                 Y = this.swipeSpeed/10 *Math.sin(angleRadian)
               }
               if (this.swipeAngle<0&&this.swipeAngle>-90){
                 const angleRadian = Math.abs(this.swipeAngle) * Math.PI / 180;
                 X = this.swipeSpeed/10 *Math.cos(angleRadian)
                 Y = -this.swipeSpeed/10 *Math.sin(angleRadian)
               }
               if (this.swipeAngle<-90&&this.swipeAngle>-180){
                 const angleRadian = (this.swipeAngle+180) * Math.PI / 180;
                 X = -this.swipeSpeed/10 *Math.cos(angleRadian)
                 Y = -this.swipeSpeed/10 *Math.sin(angleRadian)
               }
               if (this.swipeAngle==0){
                 X = this.swipeSpeed/10
               }
               if (this.swipeAngle==90){
                 Y = this.swipeSpeed/10
               }
               if (this.swipeAngle==-90){
                 Y = -this.swipeSpeed/10
               }
               if (this.swipeAngle==180||this.swipeAngle==-180){
                 X = -this.swipeSpeed/10
               }
               this.getUIContext().animateTo({
                 duration:1000,
                 onFinish:()=>{
                   this.offsetX = 0
                   this.offsetY = 0
                   this._opacity = 1
                 }
               },()=>{
                  this.offsetX = X
                  this.offsetY = Y
                 this._opacity = 0
               })
             })
         )
     }.width('100%').height('30%')

      Row() {
        Text("触发手指数")
        Counter() {
          Text(this.fingers.toString())
        }
        .onInc(() => {
          if (this.fingers<10) {
            this.fingers++;
          }
        })
        .onDec(() => {
          if (this.fingers > 1) {
            this.fingers--;
          }
        })
      }

      Row(){
        Radio({ value: 'All', group: 'radioGroup' })
          .myRadioStyle2()
          .checked(true)
          .onChange((isChecked: boolean) => {
            if(isChecked){
              this.directionTest=SwipeDirection.All
            }
          })
        Text('All ')
        Radio({ value: 'Horizontal', group: 'radioGroup' })
          .myRadioStyle2()
          .onChange((isChecked: boolean) => {
            if(isChecked){
              this.directionTest=SwipeDirection.Horizontal
            }
          })
        Text('Horizontal ')
        Radio({ value: 'Vertical', group: 'radioGroup' })
          .myRadioStyle2()
          .onChange((isChecked: boolean) => {
            if(isChecked){
              this.directionTest=SwipeDirection.Vertical
            }
          })
        Text('Vertical ')
        Radio({ value: 'None', group: 'radioGroup' })
          .myRadioStyle2()
          .onChange((isChecked: boolean) => {
            if(isChecked){
              this.directionTest=SwipeDirection.None
            }
          })
        Text('None ')
      }

      Row({ space: 10 }) {
        Text('触发快滑速度:' + this.speed)
        Slider({
          value: this.speed,
          min: 0,
          max: 1000,
          step:10,
          style: SliderStyle.OutSet
        }).width('50%')
          .onChange((value: number) => {
            this.speed = value;
          })
      }.backgroundColor(Color.Gray)

      Text('手势快滑速度:'+this.swipeSpeed)
      Text('手势快滑角度:'+this.swipeAngle)
    }.alignItems(HorizontalAlign.Start)
  }
}