将多个HTML5画布动画

Question

我有这样的jsfiddle http://jsfiddle.net/t9L6g3bd/4/

// requestAnimationFrame Shim 
(function() { 
    var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame; 
window.requestAnimationFrame = requestAnimationFrame; 
})(); 


var canvas = document.getElementById('myCanvas'); 
var context = canvas.getContext('2d'); 
var x = canvas.width/2; 
var y = canvas.height/2; 
var radius = 75; 
var endPercent = 101; 
var curPerc = 0; 
var counterClockwise = false; 
var circ = Math.PI * 2; 
var quart = Math.PI/2; 

context.lineWidth = 2; 
context.strokeStyle = '#333'; 
animate(); 


function animate(current) { 
    context.clearRect(0, 0, canvas.width, canvas.height); 
    context.beginPath(); 
    context.arc(x, y, radius, -(quart), ((circ) * current) - quart, false); 
    context.stroke(); 
    curPerc++; 
    if (curPerc < endPercent) { 
     requestAnimationFrame(function() { 
      animate(curPerc/100) 
     }); 
    } else { 
     ex(126, 126); 
     cross(126, 126); 
     //fadein(0); 
    } 
} 

function fadein(a) { 
    context.lineWidth = 1.5; 
    context.globalAlpha = a; 
    context.beginPath(); 
    context.moveTo(166, 84); 
    context.lineTo(84, 166); 
    context.stroke(); 
    context.beginPath(); 
    context.moveTo(166, 166); 
    context.lineTo(84, 84); 
    context.stroke(); 
    if (a != 0.8) { 
     requestAnimationFrame(function() { 
     fadein(a + 0.01); 
     }); 
    } 
} 

    function ex(x, y) { 
    context.clearRect(0, 0, canvas.width, canvas.height); 
    context.beginPath(); 
    context.moveTo(84, x); 
    context.lineTo(168, y); 
    context.stroke(); 
    if (x != 168) { 
     requestAnimationFrame(function() { 
      ex(x + 1, y - 1) 
     }); 
    } 
} 
function cross(x, y) { 
    // context.clearRect(0, 0, canvas.width, canvas.height); 
    context.beginPath(); 
    context.moveTo(84, x); 
    context.lineTo(168, y); 
    context.stroke(); 
    if (x != 84) { 
     requestAnimationFrame(function() { 
      cross(x - 1, y + 1) 
     }); 
    } 

} 

我想知道是否有其他的后圆的动画，并在同一时间的X，或一个结合的方式，使他们都在屏幕上，并且都有光滑的边缘

Answer 1

您需要重构您的代码。

Link to refactored jsfiddle

function animate() { 

    if (curPerc < endPercent) { 
      context.clearRect(0, 0, canvas.width, canvas.height);  
      drawCircle(curPerc/100); 
      fadeIn(curPerc/100); 
      curPerc++; 
      requestAnimationFrame(function() { 
       animate(); 
      }); 
    } 
} 

基本上你需要改变你的代码，以便只有一个动画循环运行，并在每次循环迭代呼吁每个动画的更新功能。但我想说，总体代码难以维护，您应该考虑进一步重构来纠正这一问题。希望这可以帮助。

Answer 2

你的确应该只使用一个requestAnimationFrame，因为它的开销很大，但主要是为了清晰你的代码（很难知道哪个对象是动画或不是）。
- >>如何将所有的动画数据存储到对象中，甚至让对象动画/绘制自己？
通过这种方式，您可以清晰地分离关注点，并且更改动画的一个方面要容易得多。
我开始这样做，在这个小提琴：

http://jsfiddle.net/0200h552/6/

动画循环变得相当简单：

function animate() { 
    requestAnimationFrame(animate); 
    context.clearRect(0, 0, canvas.width, canvas.height); 
    // 
    circle.draw(); 
    if (!circle.animate()) { 
     ex.draw(); 
     cross.draw(); 
     ex.animate(); 
     cross.animate(); 
    } 
} 

这里正在使用的三个对象：

var circle = { 
    x: centerX, 
    y: centerY, 
    radius: 75, 
    curPerc: 0, 
    endPercent: 101, 
    animate: function() { 
     if (this.curPerc < this.endPercent) { 
      this.curPerc++; 
      return true; 
     } 
     return false; 
    }, 
    draw: function() { 
     var perc = this.curPerc/this.endPercent; 
     var oldAlpha = context.globalAlpha; 
     context.globalAlpha = perc; 
     context.beginPath(); 
     context.arc(this.x, this.y, this.radius, -(quart), ((circ) * perc) - quart, false); 
     context.stroke(); 
     context.globalAlpha = oldAlpha; 
    } 
}; 

“ex”：

var ex = { 
    x: centerX, 
    y: centerY, 
    animate: function() { 
     if (this.x != 168) { 
      this.x++; 
      this.y--; 
      return true; 
     } 
     return false; 
    }, 
    draw: function() { 
     var x = this.x; 
     var y = this.y; 
     context.beginPath(); 
     context.moveTo(84, x); 
     context.lineTo(168, y); 
     context.stroke(); 
    } 
}; 

十字架：

var cross = { 
    x: centerX, 
    y: centerY, 
    animate: function() { 
     if (this.x != 84) { 
      this.x--; 
      this.y++; 
      return true; 
     } 
     return false; 
    }, 
    draw: function() { 
     var x = this.x; 
     var y = this.y; 
     context.beginPath(); 
     context.moveTo(84, x); 
     context.lineTo(168, y); 
     context.stroke(); 
    } 
};