javascript - 以角度调整速度运动动态

Question

我正在尝试动态更改移动速度。

我的代码结构：

我在一个数组中有多个坐标 X 和 Y，所以我获取每个坐标并显示在地图中，这样汽车就会进入路径。

我有一个滑块，包括速度 1x 2x 8x 16x，用于改变移动速度。

<div class="col-sm-2" style="display: inline-block; width: 15%;"><a class="speed" style="color:  #4682B4    ;" (click)="speed(1)">1x</a> <a   class="speed"style="color:  #4682B4   ;" (click)="speed(2)">2x</a> <a   class="speed"style="color:  #4682B4   ;" (click)="speed(8)">8x</a> <a class="speed"style="color:  #4682B4 ;" (click)="speed(16)">16x</a>

OnClick 我调用方法速度：

  speed(speed: number) {
    console.log("1");
    this.markerDuration = this.markerDuration / speed;
    this.intervalSpeed = 1000 / speed;
  }

更改间隔 读取数组中坐标的速度和从坐标 1 和 2 读取移动车的时间。

              <i
                class="fa fa-play fa-lg play-pause"
                aria-hidden="true"
                (click)="onTogglePlay()"
                *ngIf="!playFlag"
              ></i>
              <i
                class="fa fa-pause fa-lg play-pause"
                aria-hidden="true"
                (click)="onTogglePlay()"
                *ngIf="playFlag"
              ></i>

onClick (start) => onTooglePlay 方法。

  onTogglePlay() {
    console.log(this.intervalSpeed);
    console.log(this.markerDuration);
    //if playFlag : on play mode (playing right now  (on html : pause sign))
    //toggle between play and pause
    this.playFlag = !this.playFlag;
    //if play
    if (this.playFlag) {
      //loop based on given interavl
      this.intervalSetFunction = setInterval(() => {
        this.marker.setDuration(this.markerDuration);
        //to handle error if there is no points
        if (this.allPoints) {
          //if the allPoints array is all done
          if (this.currentIndex == this.allPoints.length) {
            //handle event when display points is done
            //for example: alert that route is done
          } else {
            console.log(this.intervalSpeed);
            console.log(this.markerDuration);
        
            var icon1 = this.marker.getIcon();
            icon1.rotation = this.bearing[this.j];
            this.marker.setIcon(icon1);
            console.log(this.markerDuration);
            console.log(this.intervalSpeed);

            //change the marker location based on current index
            this.marker.setPosition(
              new google.maps.LatLng(
                this.allPoints[this.currentIndex].coordinates[0],
                this.allPoints[this.currentIndex].coordinates[1]
              )
            );

            // var result = [this.allPoints[this.currentIndex].coordinates[0], this.allPoints[this.currentIndex].coordinates[1]];
            // this.transition(result);
            //provide the sliderValue with the time to display it on user interface
            this.sliderValue = this.formatTimeToInt(
              this.allPoints[this.currentIndex].time.substr(
                this.allPoints[0].time.indexOf("T") + 1,
                8
              )
            );
            this.currentIndex = this.currentIndex + 1;
            this.j++;
          }
        }
        //this shows the speed the user chose for the slider
      }, this.intervalSpeed);
    } else {
      //to pause the setInterval function
      clearInterval(this.intervalSetFunction);
    }
  }

在这种特定间隔速度的方法中，我可以读取坐标和显示。

一切都很好，但我的问题：

如果我想改变速度，我有义务停止滑块，单击新速度，然后启动滑块。

我需要一种方法或结构或任何东西来改变滑块启动时的速度。

标签： javascriptangulardynamicslider