SVGを描画するライブラリRaphaël.jsを使ってみた。

　jsdo.itを見ていて、Raphaël.jsという、SVGを描画するライブラリがあるのを知った。
　ホームページをみると、Processing.jsとは違うアプローチの仕方で、結構面白そうに感じたので、とりあえず、Raphaël.jsを使って、簡単なアニメーションを書いてみた。

　とりあえず、ボールが動くアニメーションを書いてみた。イージング等、アニメーションのメソッドもあるけれど、今回はタイマーでオブジェクトのアトリビュートを更新している。
　なお、IS01及びAndroid-x86のブラウザでは、画面が描画されなかった。残念。

■ソースコード

var x=50;
var y=50;
var dx=3;
var dy=3;
var r=10;
var w=640;
var h=200;
var circle;
$(document).ready(function() {
	var paper = Raphael("canvas", w, h);
	circle = paper.circle(x, y, r);
	circle.attr("fill", "blue");
	circle.attr("stroke", "#fff");
	circle.hover(function (event) {
		this.attr({fill: "red"});
		this.attr({r: 3*r});
		}, function (event) {
    		this.attr({fill: "blue"});
		this.attr({r: r});
	});
	var timer = setInterval("update()", 20);
});
var update=function(){
	x +=dx;
	y +=dy;
	circle.translate(dx, dy);
	if(x < r/2){
		dx *=-1;
	}else if(x+r/2 > w){
		dx *=-1;
	}
	if(y < r/2){
		dy *=-1;
	}else if(y+r/2 > h){
		dy *=-1;
	}
};