canvasのアニメーションの基本的な考え方
html5 canvasで円・円弧を描画するまでで多角形や円などの図形を描画できるようになりました。
今回は描画した図形を動かしてアニメーションを行う方法を紹介します。
アニメーションの考え方
アニメーションはパラパラマンガのように、微妙に違う静止画を連続で切り替えることによって動いているように見せることで表現します。
canvasでも、描画する図形を微妙に変化させながら何回も連続で再描画することでアニメーションを表現します。
ループ処理
連続で描画するためには、描画処理の関数をループで何回も呼ぶ必要があります。ループ処理はsetTimeoutなどでも可能ですが、ここではrequestAnimationFrameを使用します。対応していないブラウザもあるので、以下のように定義します。
var requestAnimationFrame = ( function(){
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function(callback){
window.setTimeout(callback, 1000.0 / 60.0);
};
})();実装例
x座標の位置を変数にして、ループするごとに少しずつ加算して表示することにより、横移動をするアニメーションを再現できます。
$(function ($) {
//描画処理をファンクションで定義します
function drawCircle(){
context.beginPath();
context.arc(x, 300, 30, (0/180)*Math.PI, (360/180)*Math.PI);
context.fillStyle = 'rgb(0, 255, 0)';
context.fill();
};
//アニメーションの処理
function loop() {
requestAnimFrame(loop);
//描画をクリア
context.clearRect(0,0, context.canvas.width, context.canvas.height);
//ループ毎にx座標を加算
x += 1;
//x座標が領域外の場合は最初の位置に戻す
if(x>canvas.width()) x=0;
//描画処理
drawCircle();
}
var canvas;
var context;
var x; //x座標
canvas = $('#c1')[0];
if (canvas.getContext){
context = canvas.getContext('2d');
x = 0; //x座標
loop(); //アニメーションを実行
}
});数学のグラフのように、y座標の位置をx座標の位置によって変化させれば以下のようなアニメーションも可能です。
$(function ($) {
//描画処理をファンクションで定義します
function drawCircle(){
context.beginPath();
//y=sin(x)のグラフを再現
context.arc(x, (Math.sin((x/180)*Math.PI))*100+300, 10, (0/180)*Math.PI, (360/180)*Math.PI);
context.fillStyle = 'rgb(0, 0, 255)';
context.fill();
};
//アニメーションの処理
function loop() {
requestAnimFrame(loop);
//描画をクリア
context.clearRect(0,0, context.canvas.width, context.canvas.height);
//ループ毎にx座標を加算
x += 1;
//x座標が領域外の場合は最初の位置に戻す
if(x>canvas.width()) x=0;
//描画処理
drawCircle();
}
var canvas;
var context;
var x; //x座標
canvas = $('#c1')[0];
if (canvas.getContext){
context = canvas.getContext('2d');
x = 0; //x座標
loop(); //アニメーションを実行
}
});