Question

我使用JavaScript requestAnimationFrame动画游戏。

但是，我在主requestAnimationFrame内有一个情况，即＆＃39; IF＆＃39;已完成，如果这个＆＃39; IF＆＃39;我想做X秒的动画。是真的......

ideia是使用另一个requestAnimationFrame做第二个动画，就像上面的代码一样供参考：

＆＃13;

var canvas = document.querySelector('canvas');
var context = canvas.getContext('2d');
count = 0;
enteredHere = false;

var main = function(now){

setTimeout(function () {
    context.clearRect(0, 0, canvas.width, canvas.height);
    
		var nowSeconds = Math.floor(now)/1000;
    count++;

		context.beginPath();
    context.fillStyle = "#f00";
    context.font = "20px arial";
    //context.fillText(count, 10, 30);
    context.fillRect(10,30,count, 10);

		nowSeconds = parseInt(Math.floor(now)/1000);
    if(nowSeconds % 5 == 0){
    	if(!enteredHere){
      	enteredHere = true;
    		doSomething();
      }
    }   
    requestAnimationFrame(main);
  }, 1000 / 60);  
};

var doSomething = function(){    
		context.beginPath();
    context.fillStyle = "#f00";
    context.font = "20px calibri";
    context.fillText('DoSomething', 10, 70);
	
    requestAnimation = requestAnimationFrame(doSomething);

		setTimeout(function(){
    	cancelAnimationFrame(requestAnimation);
      enteredHere = false;
    },2000);
};

main();

＆＃13;

<canvas width="800" height="600"></canvas>

＆＃13;

正如您所看到的，当第二个动画发生时，第一个动画（fillRect增长）减速，当它完成时（2秒），第一个动画恢复正常。

有人可以解释为什么第二次发生时第一个requestAnimationFrame会减速吗？

最好的方法是什么？

感谢。

用户requestAnimationFrame＆＃39;内部＆＃39;的正确方法requestAnimationFrame

0 个答案: