HarmonyOS Next开发----k线图滑动惯性

K线图的惯性滑动，由于官方提供的Scroller没有设置初始位置的方法，不知道后面会不会支持。由于项目急着上线，所以只有采用另一种方案，滑动结束后模拟计算惯性滑动。

思路：

手指滑动结束后，k线惯性滑动轨迹，类似于匀减速运动。所以可以用个定时器，每个100ms让k线继续平移一段距离，只需要计算出每个时刻的速度即可。对于手指离开屏幕时的速度，可以用平均速度来代替。

class SlideInertia {
  public callback?: (x: number | null) => void;
  private startX: number = 0;
  private lastMoveX: number = 0;
  private velocity: number = 0;
  private startTime: number = 0;
  private timerId: number = -1;

  constructor(callback?: (x: number | null) => void) {
    this.callback = callback
  }

  public handleTouchStart = (event: GestureEvent) => {
    this.startX = event.offsetX;
    this.startTime = new Date().getTime();
  };

  public handleTouchMove = (event: GestureEvent) => {
    this.lastMoveX = event.offsetX;
  };

  public handleTouchEnd = () => {
    const curTime = new Date().getTime();
    const diffTime = (curTime - this.startTime) / 10;
    if (diffTime <= 0) {
      return;
    }
    this.velocity = (this.startX - this.lastMoveX) / diffTime;
    // 释放触摸，开始惯性滑动
    this.startFling();
    this.startTime = 0;
  };

  private startFling() {
    const step = () => {
      this.velocity *= 0.9; // 惯性减弱
      if (Math.abs(this.velocity) > 1) {
        if (this.callback) {
          this.callback(this.velocity);
        }
        this.timerId = setTimeout(step, 100);
      } else {
        if (this.callback) {
          this.callback(null);
        }
      }
    };
    this.timerId = setTimeout(step);
  }

  public clearTimer() {
    if (this.timerId > 0) {
      clearTimeout(this.timerId);
    }
  }
}

然后在组件的TouchDown、TouchMove和TouchUP事件处调用，然后回调里面处理滑动即可。

 .onActionStart((event) => {
          if (!this.mIsTouchRegionStats && !this.mIsLongPressed && event.fingerList.length === 1) {
            this.requestParentNotHandleGesture(true);
            this.mGestureHelper.startScroll();
            this.slideInertia.handleTouchStart(event);
          }
        })
        .onActionEnd(() => {
          this.mGestureHelper.stopScroll();
          this.onDraw();
        })
        .onActionUpdate((event?: GestureEvent) => {
          if (event && event.fingerList.length === 1) {
            if (this.mIsLongPressed) {
              let reallyOffsetX: number = event.offsetX - this.mLastOffsetX;
              let reallyOffsetY: number = event.offsetY - this.mLastOffsetY;
              this.mLastOffsetX = event.offsetX;
              this.mLastOffsetY = event.offsetY;

              this.mTouchPoint.offset(reallyOffsetX, reallyOffsetY);

              let mainRenderTitleHeight = this.titleHeightArr[0];
              const padding = UPMarketUIIndexBaseRender.padding;
              this.mTouchPoint.y = Math.max(mainRenderTitleHeight + padding, this.mTouchPoint.y);
              this.mTouchPoint.y = Math.min(this.totalHeight - padding * 2, this.mTouchPoint.y);
              this.mGestureHelper.updateCrossPoint(this.touchX2CrossX(this.mTouchPoint.x), this.mTouchPoint.y);
              this.callbackLongClickData();
              this.onDraw();
            } else if (!this.mGestureHelper.isShowCross()) {
              //平移
              if (this.mGestureHelper.scroll(event.offsetX, this.totalWidth)) {
                this.callbackRegionStatsChanged();
                this.onDraw();
              }
              this.slideInertia.handleTouchMove(event);
         
              }
            }
          }
        })

   .onTouch((event: TouchEvent) => {
      switch (event.type) {
        case TouchType.Down:
          this.slideInertia.clearTimer();
          this.mIsTouchRegionStats = this.mGestureHelper.isTouchRegionStatsControlPoint(new UPPoint(event.touches[0].x, event.touches[0].y));
          if (this.mIsTouchRegionStats) {
            this.requestParentNotHandleGesture(true);
          }
          this.mLastTouchDownPoint.set(event.touches[0].x, event.touches[0].y);
          break
        case TouchType.Move:
          let distanceX: number = Math.abs(this.mLastTouchDownPoint.x - event.touches[0].x);
          let distanceY: number = Math.abs(this.mLastTouchDownPoint.y - event.touches[0].y);
          if ((distanceX > distanceY && (this.attrs?.supportTranslationAndZoom || this.mIsLongPressed))
            || this.mIsTouchRegionStats) { // 如果触摸点在区间统计控制区域，则支持垂直和水平方向滑动，无需判断distanceX
            this.mCanHorizontalScroll = true;
          }

          if (this.mIsTouchRegionStats) {
            let regionStatsIndexChanged = this.mGestureHelper.updateRegionStatsControlPoint(new UPPoint(event.touches[0].x, event.touches[0].y)
              , event.touches[0].x - this.mLastTouchDownPoint.x);
            if (regionStatsIndexChanged) {
              this.callbackRegionStatsChanged();
              this.onDraw();
            }
          }
          break
        case TouchType.Up:
        case TouchType.Cancel:
          if (!this.mGestureHelper.isShowRegionStats() && !this.mIsLongPressed) {
            this.slideInertia.handleTouchEnd();
          }

由于k线图有些操作时不需要惯性滑动的(比如长按、区间统计打开时等)，所以将handleTouchStart和handleTouchMove放在了平移手势回调里面。

  private slideInertia: SlideInertia = new SlideInertia((offsetX: number | null) => {
    if (offsetX == null) {
      return;
    }
    if (this.mGestureHelper.scroll(0, 0, Math.floor(offsetX))) {
      this.onDraw();
    } else {
      this.slideInertia.clearTimer();
    }
  });