I am developing a geolocation-based speed tracking feature that displays the speed on the screen. However, I have encountered a problem where there is a significant gap between the previous and current speed values, and I would like to implement a transition to smoothly display the numbers in between.
Example:
speed 1 -> 80
speed 2 -> 90
display -> 80 81 82 83 84 85 86 87 88 89 90
Despite trying various solutions, I have been unable to achieve the desired "transition."
In the 'location-tracker.ts' file:
startTracking(){
this.watchSubscription = this.watch.subscribe((resp) => {
this.zone.run(() => {
var speedToSet = resp.coords.speed;
this.setSpeed(speedToSet);
});
}, error => {
console.log("Error: " + JSON.stringify(error));
});
}
setSpeed(speedarg){
if (speedarg == this.speed){
return;
}
if (speedarg > this.speed){
let val = this.speed;
for (var i = val; i <= speedarg; i++){
setTimeout(() => {
this.speed = i;
}, 30);
}
} else {
let val = this.speed;
for (var i = val; i >= speedarg; i--){
setTimeout(() => {
this.speed = i;
}, 30);
}
}
}
In the 'home.html' file:
<ion-grid>
<ion-row>
<ion-col>
Speed: {{locationTracker.speed}}
</ion-col>
</ion-row>
</ion-grid>
While I attempted the above solution, only the final number seems to update, as shown in the example:
speed 1 -> 80
speed 2 -> 90
display -> 90