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

原创

已于 2024-06-02 10:30:35 修改 · 713 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#鸿蒙

于 2024-06-02 10:21:52 首次发布

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