Angular 4+视频帧寻求性能优化

Question

我目前正在实施受此启发的用户界面：https://dribbble.com/shots/2111528-Ice-Cream-Love-Motion

我目前的WIP可在此处测试：https://datrinh.github.io/DesignHub17/

重要代码段：

// Video Service
jumpFrames(direction: number) {
  const multi = direction > 0 ? AMOUNT_FRAMES_SKIPPED : -AMOUNT_FRAMES_SKIPPED;
  this.player.currentTime = this.player.currentTime + multi / FPS;
}

// Drag Component
onPanStart(e) {
  this.video.player.pause();
  this.startX = e.center.x;
  this.startY = e.center.y;
  this.startTime = this.video.currentTime;
}

onPan(e) {
  this.visible = true;
  this.x = this.startX + e.deltaX;
  // diameter offset
  this.y = this.startY + e.deltaY - DIAMETER;

  if (e.additionalEvent === 'panleft') {
    this.directionIcon = 'fast_rewind';
    this.video.jumpFrames(-1);
  } else if (e.additionalEvent === 'panright') {
    this.directionIcon = 'fast_forward';
    this.video.jumpFrames(1);
  } else {
    // TODO: How to handle 'panup' or 'pandown'
    // this.video.jumpFrames(e.deltaX);
  }
}

正如您在WIP应用程序中看到的那样，寻找框架并不是非常顺利。有很多口吃。当移动太快时，功能不会被调用相同的次数，比如慢慢移动。

我可以做些什么来改善代码？甚至可以在动画中看到相同的平滑性能吗？