RaphaëlによるSVGグラフィック (4/5)
作成:2010-04-28 15:24
更新:2010-05-11 16:34
更新:2010-05-11 16:34
■animateによるアニメーション
キャンバス・オブジェクトは、属性を操作することで表示を変更することができます。非常に面白いのは、ただ設定変更するだけでなく、「一定の時間をかけてなめらかに変更する」ことができる、という点です。ただ値が変わるだけなら、表示がぱっと一瞬で切り替わるだけですが、時間をかけてなめらかに変化すれば、図形をアニメーションすることができるようになります。
では、実際にやってみましょう。下のリストは、クリックして円をアニメーションして動かすサンプルです。大きなピンクの円内をクリックすると、小さい円がゆっくりとその地点に移動しながら次第に透明になって消えていきます。背景の淡いブルー部分をクリックすると、透明だった円が次第に現れながらその地点に移動します。
ここでは、clickメソッドでアニメーション用の関数をキャンバス・オブジェクトに設定しています。これは「animate」というメソッドで、以下のように呼び出します。
ここでは、設定する属性に、{opacity:0,cx:event.x - 10,cy:event.y - 25} という配列を用意しています。eventからxとyの値を取得し、これを使って円のcx,cy属性を変更しています。これは、circleによる円の中心位置を示すものです。opacityは透過度を示すものでしたね。
およそキャンバス・オブジェクトにattrで設定できる属性であれば、どんなものでもanimateでアニメーションすることができます。
では、実際にやってみましょう。下のリストは、クリックして円をアニメーションして動かすサンプルです。大きなピンクの円内をクリックすると、小さい円がゆっくりとその地点に移動しながら次第に透明になって消えていきます。背景の淡いブルー部分をクリックすると、透明だった円が次第に現れながらその地点に移動します。
ここでは、clickメソッドでアニメーション用の関数をキャンバス・オブジェクトに設定しています。これは「animate」というメソッドで、以下のように呼び出します。
キャンバス.animate( 属性をまとめた連想配列 , ミリ秒数 , コールバック関数 )第１引数には、設定する属性を連想配列にまとめたものを渡します。第２引数には、アニメーションにかかる時間（ミリ秒数）を指定します。これが実行されると、そのキャンバスの図形が、指定された時間をかけながら第１引数の新しい属性に変化していきます。第３引数に関数を用意しておくと、アニメーション終了後にこの関数が呼び出されます。これはオプションの引数ですので、不要ならば省略できます。
ここでは、設定する属性に、{opacity:0,cx:event.x - 10,cy:event.y - 25} という配列を用意しています。eventからxとyの値を取得し、これを使って円のcx,cy属性を変更しています。これは、circleによる円の中心位置を示すものです。opacityは透過度を示すものでしたね。
およそキャンバス・オブジェクトにattrで設定できる属性であれば、どんなものでもanimateでアニメーションすることができます。
(by. SYODA-Tuyano.)
※プログラムリストが表示されない場合
AddBlockなどの広告ブロックツールがONになっていると、プログラムリスト等が表示されない場合があります。これらのツールをOFFにしてみてください。
●プログラム・リスト●
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=UTF-8" />
<title>Sample Page</title>
<script type="text/javascript"
src="raphael-min.js" charset="utf-8"></script>
<script type="text/javascript">
<!--
var dragging = false;
function init(){
var paper = Raphael(10,25, 300, 300);
var r = paper.rect(0,0,300,300);
r.attr({fill:"#99F",stroke:"#99F",opacity:0.25});
r.click(function(event){
c2.animate({opacity:1,cx:event.x - 10,cy:event.y - 25},1000);
});
var c1 = paper.circle(50,50,100);
c1.attr({fill:"#F99",stroke:"#F99",opacity:0.5});
c1.click(function(event){
c2.animate({opacity:0,cx:event.x - 10,cy:event.y - 25},1000);
});
var c2 = paper.circle(125,125,50);
c2.attr({fill:"#9F9",stroke:"#F9F","stroke-width":10,opacity:1});
}
//-->
</script>
</head>
<body onload="init();">
<h1>サンプル</h1>
<div id="canvas"></div>
</body>
</html>
※関連コンテンツ