Холст - затухание в скорости?

Question

Являясь новичком в холсте, я просто пытаюсь понять, как управлять замиранием/выпадением. До сих пор я придумал вполне очевидное решение:

var alpha = 0.01; 
     c.globalAlpha = alpha; 
     c.font="44px Georgia"; 
     c.fillStyle = '#fff'; 
     c.fillText("Ave Satani!!",120,250); 
     if(alpha < 1.0) 
     { 

     alpha += 0.01; 
     requestAnimationFrame(draw);  
      } 

Хотя это не позволяет мне установить скорость анимации, и это слишком быстро. Любые советы? Заранее спасибо!

Answer 1

Вам просто нужно замедлить прирост альфа-значения. поэтому вы можете использовать другую переменную для замедления скорости.

http://jsfiddle.net/dlinx/968y1e3z/ Вот что вы хотите, меньшее значение скорости, быстрее переход, более высокое значение, медленнее анимация.

var c = document.getElementById("can").getContext("2d"); 
var alpha = 0.01; 
var i=0,speed=10; 
c.globalAlpha = 0; 

draw(); 
function draw() { 
    c.globalAlpha = alpha; 
    c.font = "44px Georgia"; 
    c.fillStyle = '#000'; 
    c.fillText("Ave Satani!!", 120, 250); 
    i+=1; 
    if (alpha < 1.0) { 
     if(i%speed===0) 
     alpha += 0.001; 
     requestAnimationFrame(draw); 
    } 
}