箱を動かしてみる

手順

1.描画エリアを用意する
2.オブジェクトを用意する
3.オブジェクトに動作を与える

描画エリアを指定する

 今回はdivタグの位置へ配置する方法を使います。
  var paper = Raphael("RaphaelCanvas", 320, 240);
 画像に合わせて 320px * 240px のSVG領域を作りました。

 実行すると図のように初期化されます。

.rect(x, y, width, height)

 次にここへ矩形を置きます。命令は.rect(x, y, width, height)を使います。
  var rect = paper.rect(10, 10, 50, 50);
 paperへ矩形を作っています。作った矩形にはrectという目印をつけています。
 実行すると下のようになります。

.attr()

 オブジェクトにスタイルを適用するために.attr()命令を使います。
 ()内に何をどうするの書式でスタイルを記述します。
 SVGで使えるものは全て使えるのでそちらを参考にしてください。
  rect.attr({"stroke": "none", "fill": "#f00"});

 一例として、ストロークを削除し、赤で塗りつぶしてみました。
 各項目をダブルクォーテーションで括っています。外してもいい場合と外してはいけない場合があるようですが区別の仕方が分かりません。
 変数で指定する場合を除き、つけておく方がよいと思います。

Raphael.animation()

 アニメーション処理を作る命令です。
 第一パラメータに変化するスタイル、第二パラメータに処理時間を設定します。
 複数の変化を持たせたい場合は下のように設定します。
  var moveX = Raphael.animation({"50%": {"x": "270"}, "100%": {"x": "0"}}, 3000);
  var moveY = Raphael.animation({"50%": {"y": "190"}, "100%": {"y": "0"}}, 2000);
 開始を0%、終了を100%として、指定時間の時の状態を設定していきます。
 上記の設定は、1500msの時に x = 270、3000ms の時に x = 0 となるように設定しています。
 実行すると右へ行って左へ戻る動作になります。
 Y方向は下へ行って上へ戻る動作をするように設定されています。
 アニメーションを直接オブジェクトへ適用することも出来ますが、同じ処理を使いまわす場合はこちらが便利でしょう。

.animate()

 オブジェクトにアニメーションを適用するための処理です。
 下は以前作った矩形オブジェクトに先ほど作成したアニメーション処理を適用しています。
  rect.animate(moveX.repeat(Infinity)).animate(moveY.repeat(Infinity));
 アニメーション処理の後ろにつけた.repeat(Infinity)命令でアニメーションが無限に繰り返されるように設定しています。
 数値で指定するとその回数繰り返して止まります。

完成

 以上をまとめると下記のようになります。
Raphael(function(){
	var paper = Raphael("RaphaelCanvas", 320, 240);
	var rect = paper.rect(10, 10, 50, 50);
	
	rect.attr({"stroke": "none", "fill": "#f00"});
	
	var moveX = Raphael.animation({"50%": {"x": "270"}, "100%": {"x": "0"}}, 3000);
	var moveY = Raphael.animation({"50%": {"y": "190"}, "100%": {"y": "0"}}, 2000);
	
	rect.animate(moveX.repeat(Infinity)).animate(moveY.repeat(Infinity));
});
 これを実行すると下のような動作をします。
 検索すればどなたかがまとめておられるかもしれませんが、公式のマニュアルは私には難解で、実際の動作と比較できるサンプルのソースから処理を探したり、理解したりしようと試みています。
 サンプルや命令の一覧を見ていると、いろいろなことができそうなので、試したいことが出来たら挑戦しようと思います。