Come spostare lentamente l'ago del tachimetro del canvas?

Question

Uso i seguenti codici per spostare un'immagine sul canvas per il mio tachimetro.

var meter = new Image, 
    needle = new Image; 
window.onload = function() { 
    var c = document.getElementsByTagName('canvas')[0]; 
    var ctx = c.getContext('2d'); 
    setInterval(function() { 
     ctx.save(); 
     ctx.clearRect(0, 0, c.width, c.height); 
     ctx.translate(c.width/2, c.height/2); 
     ctx.drawImage(meter, -165, -160); 
     ctx.rotate((x * Math.PI/180); 
     /x degree 
      ctx.drawImage(needle, -13, -121.5); 
      ctx.restore(); 
     },50); 
    }; 
    meter.src = 'meter.png'; 
    needle.src = 'needle.png'; 
} 

Tuttavia voglio spostare l'ago lentamente per il grado che sono entrato come ad esempio pagine web speedtest. Qualche idea? Grazie.

Answer 1

Qualcosa del genere dovrebbe funzionare:

var meter = new Image, 
    needle = new Image; 
window.onload = function() { 
    var c = document.getElementsByTagName('canvas')[0], 
     ctx = c.getContext('2d'), 
     x,  // Current angle 
     xTarget, // Target angle. 
     step = 1; // Angle change step size. 

    setInterval(function() { 
     if(Math.abs(xTarget - x) < step){ 
      x = xTarget; // If x is closer to xTarget than the step size, set x to xTarget. 
     }else{ 
      x += (xTarget > x) ? step : // Increment x to approach the target. 
       (xTarget < x) ? -step : // (Or substract 1) 
            0; 
     } 
     ctx.save(); 
     ctx.clearRect(0, 0, c.width, c.height); 
     ctx.translate(c.width/2, c.height/2); 
     ctx.drawImage(meter, -165, -160); 
     ctx.rotate((x * Math.PI/180); // x degree 
      ctx.drawImage(needle, -13, -121.5); 
      ctx.restore(); 
     },50); 
    }; 
    dial.src = 'meter.png'; 
    needle.src = 'needle.png'; 
} 

sto usando una scorciatoia if/else qui per stabilire se aggiungere 1-x, sottrazioni 1, o non fare nulla. Funzionalmente, questo è lo stesso:

if(xTarget > x){ 
    x += step; 
}else if(xTarget < x){ 
    x += -step; 
}else{ 
    x += 0; 
} 

Ma è più breve, e, a mio parere, altrettanto facile da leggere, una volta che si sa che cosa una scorciatoia se (ternary operator) assomiglia.

Si prega di tenere presente che questo codice presuppone che x sia un valore intero (Quindi, non un float, solo un int arrotondato).