Chapter 6: Map, Take 1

by Stéphane Cabaret

HTML

<div id="rsr"></div>

JavaScript

var paper = Raphael(0, 0, 900, 900);

//var c1 = paper.circle(100,10,3).attr("fill", "green");
//var c1 = paper.circle(100,0,3).attr("fill", "red");
//var c1 = paper.circle(0,100,3).attr("fill", "blue");
var rect1 = paper.rect(100,100,100,100).attr({fill: 'pink', opacity: 0});
var rect2 = paper.rect(100,200,100,100).attr({fill: 'red', opacity: 0});
var rect3 = paper.rect(200,200,100,100).attr({fill: 'green', opacity: 0});
var rect4 = paper.rect(200,100,100,100).attr({fill: 'blue', opacity: 0});
//var CO = paper.path("m100,10 l100,0 l");
//var CO = paper.path("m 380,320.9l4.9,-86.3l-113.4,-12.6l-12.2,87.9l 120.7,11.0z");
//CO1 = Raphael.animation({transform:'t200,100'},1000);
//CO.animate(CO1.repeat(1));

function repeat1() {
	//alert(1)
    var zzzz = Raphael.animation({transform:'', opacity:1},1000);
    rect1.animate(zzzz)
}

function repeat2() {
	//alert(1)
    var zzzzz = Raphael.animation({transform:'', opacity:1},1000);
    rect2.animate(zzzzz)
}
function repeat3() {
	//alert(1)
    var zzzzz = Raphael.animation({transform:'', opacity:1},1000);
    rect3.animate(zzzzz)
}
function repeat4() {
	//alert(1)
    var zzzzz = Raphael.animation({transform:'', opacity:1},1000);
    rect4.animate(zzzzz)
}
var rect1i = Raphael.animation({transform:'t200,100'},0,repeat1);
var rect2i = Raphael.animation({transform:'t100,200'},0,repeat2);
var rect3i = Raphael.animation({transform:'t400,200'},0,repeat3);
var rect4i = Raphael.animation({transform:'t600,300'},0,repeat4);
rect1.animate(rect1i.repeat(1));
rect2.animate(rect2i.repeat(1));
rect3.animate(rect3i.repeat(1));
rect4.animate(rect4i.repeat(1));