HTML5 캔버스 애니메이션 제작

HTML5 캔버스에 이미지 애니메이션 효과를 그리려면, 각 프레임의 이미지를 그려서 매우 짧은 시간 동안 한 프레임에서 다음 프레임으로 전환하여 애니메이션 효과를 형성해야 합니다.

온라인 예제

HTML5애니메이션을 캔버스에 그리려면, 애니메이션의 프레임을 캔버스에 그리고 다시 그리는必要가 있습니다. 이를 매우 빠르게 하여 많은 이미지가 애니메이션처럼 보이도록 합니다.
애니메이션을 최적의 성능으로 만들기 위해, requestAnimationFrame은 window 객체에 콜백 함수를 사용합니다. 이 함수를 호출하여, 브라우저가 애니메이션의 다음 프레임을 그리기 위해 준비하는 순간에 호출할 다른 함수를 매개변수로 전달할 수 있습니다.
브라우저가 다음 프레임을 그리기 위해 준비하는 동안, 브라우저가 애플리케이션에 신호를 보내면, 애니메이션을 하드웨어 가속화할 수 있으며, 브라우저 내 다른 다시 그리기 활동과 프레임 다시 그리기를 조정할 수 있습니다. JavaScript의 setTimeout() 함수를 사용하여 애니메이션 프레임의 그리기를 시간을 맞추는 것보다 전반적인 경험은 훨씬 좋아야 합니다.
이는 코드 예제입니다:

function animate() {
　　　　reqAnimFrame = (window.webkitRequestAnimationFrame ||
　window.mozRequestAnimationFrame ||
　window.oRequestAnimationFrame ||
　window.msRequestAnimationFrame ||
　function(callback) {
　　var self = this, start, finish;
　　return window.setTimeout(function() {
　　　start =　+new Date();
　　　callback(start);
　　　finish =　+new Date();
　　　self.timeout =　1000/60　-　(완료　-　start);
　　}, self.timeout);
　});
　　　　reqAnimFrame(animate);
　　　　draw();
}

animate() 함수는 이 requestAnimationFrame() 함수에 대한 참조를 얻습니다. 주의하세요, 이 함수는 다른 브라우저에서는 다른 이름을 가질 수 있습니다. 이 변수 reqAnimFrame를 모든 이러한 함수 중 null이 아닌 것으로 설정합니다.
두 번째로, reqAnimFrame() 함수는 함수를 호출하며, animate() 함수를 인자로 전달합니다. 따라서 브라우저가 다음 프레임을 그리기 준비가 되면 animate() 함수를 호출합니다.
세 번째로, animate() 함수는 draw() 함수를 호출합니다. 이 draw() 함수는 이전 예제에서는 보이지 않았습니다. 이 함수는 먼저 캔버스(또는 필요한 캔버스의 수)를 지우거나, 다음 프레임을 그리는 작업을 수행해야 합니다.
이전 예제에서는 보이지 않은 한 가지는 animate() 함수가 한 번 호출되어야 한다는 것입니다. 그렇지 않으면 requestAnimationFrame() 함수는 이 함수를 호출하지 않으며, 애니메이션 루프가 시작하지 않습니다.
이 예제에서는 화면에 단일 사각형을 이동시키는 애니메이션 예제입니다:

Canvas 애니메이션 구현 코드는 다음과 같습니다:

<canvas id="ex1" width="500" height="170" style="border:　1px solid #cccccc;">
HTML5　Canvas를 지원하지 않습니다
</canvas>
<script>
var x = 0;
var y =　15;
var speed =　5;
function animate() {
reqAnimFrame = (window.webkitRequestAnimationFrame ||
　window.mozRequestAnimationFrame ||
　window.oRequestAnimationFrame ||
　window.msRequestAnimationFrame ||
　function(callback) {
　　var self = this, start, finish;
　　return window.setTimeout(function() {
　　　start =　+new Date();
　　　callback(start);
　　　finish =　+new Date();
　　　self.timeout =　1000/60　-　(완료　-　start);
　　}, self.timeout);
　});
reqAnimFrame(animate);
x　+= speed;
if(x <= 0 || x >=　475{
speed =　-speed;
}
draw();
}
function draw() {
var canvas = document.getElementById("ex1";
var context = canvas.getContext("2d");
context.clearRect(0, y,　500,　170);
context.fillStyle = "#ff00ff";
context.fillRect(x, y,　25,　25);
}
animate();
</script>