mvaz · January 16, 2013 05:55
diff --git a/raphael-anim.html b/raphael-anim.html
 <!DOCTYPE html>
 <html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Raphaël · Growing Pie</title>
        <link rel="stylesheet" href="demo.css" media="screen">
        <link rel="stylesheet" href="demo-print.css" media="print">
        <style media="screen">
        body {
    background: #333;
    color: #fff;
    font: 300 100.1% "Helvetica Neue", Helvetica, "Arial Unicode MS", Arial, sans-serif;
 }
 #holder {
    height: 480px;
    left: 50%;
    margin: -240px 0 0 -320px;
    position: absolute;
    top: 50%;
    width: 640px;
 }
 #copy {
    bottom: 0;
    font: 300 .7em "Helvetica Neue", Helvetica, "Arial Unicode MS", Arial, sans-serif;
    position: absolute;
    right: 1em;
    text-align: right;
 }
 #copy a {
    color: #fff;
 }

 path {
  stroke-width: 3;
 	stroke:       black;
 }

            #holder {
                height: 400px;
                margin: -200px 0 0 -200px;
                width: 400px;
            }
        </style>
        <script src="http://github.com/DmitryBaranovskiy/raphael/raw/master/raphael.js"></script>
        <script type="text/javascript">

 window.onload = function() {

    var c= Raphael("holder", 600, 500);
    // var p = c.path("M140 100");
    // var r = c.path("M190 60");

    
    var s1 = "M 50,300 C 150,200  200,300 250,300 Z";
    var s2 = "M 50,300 C 150,280  200,300 250,300 Z";
    var p2 = c.path(s1);
    var anim1 = Raphael.animation({path: s2}, 1e3);
    var anim2 = Raphael.animation({path: s1}, 1e3);

    // p.animate({path:"M140 100 L190 60"}, 2000, function() {
    //     r.animate({path:"M190 60 L 210 90"}, 2000);
    // });


 var down = function() {
 	var up = function() {
 		console.log("up");
    	// c.animate({r : 6, fill : '#f00'}, 1000, down);
 		p2.animate(anim2, 1000, ">", down);
 	};

 	console.log("down");
    // c.animate({r : 10, fill : '#00f'}, 1000, up);
    p2.animate(anim1, 1000, ">", up);
 };
 down();
 // console.log(anim1);
    
    // p2.animate(anim2.delay(700).repeate(4), 5000, function(){console.log("kaka");	});

 	    	// p2.animate(anim2, 3000, function(){}); 
 };
       </script>
    </head>
    <body>
        <div id="holder"></div>   
    </body>
 </html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>Raphaël · Growing Pie</title>
	<link rel="stylesheet" href="demo.css" media="screen">
	<link rel="stylesheet" href="demo-print.css" media="print">
	<style media="screen">
	body {
	background: #333;
	color: #fff;
	font: 300 100.1% "Helvetica Neue", Helvetica, "Arial Unicode MS", Arial, sans-serif;
	}
	#holder {
	height: 480px;
	left: 50%;
	margin: -240px 0 0 -320px;
	position: absolute;
	top: 50%;
	width: 640px;
	}
	#copy {
	bottom: 0;
	font: 300 .7em "Helvetica Neue", Helvetica, "Arial Unicode MS", Arial, sans-serif;
	position: absolute;
	right: 1em;
	text-align: right;
	}
	#copy a {
	color: #fff;
	}

	path {
	stroke-width: 3;
	stroke: black;
	}

	#holder {
	height: 400px;
	margin: -200px 0 0 -200px;
	width: 400px;
	}
	</style>
	<script src="http://github.com/DmitryBaranovskiy/raphael/raw/master/raphael.js"></script>
	<script type="text/javascript">

	window.onload = function() {

	var c= Raphael("holder", 600, 500);
	// var p = c.path("M140 100");
	// var r = c.path("M190 60");


	var s1 = "M 50,300 C 150,200 200,300 250,300 Z";
	var s2 = "M 50,300 C 150,280 200,300 250,300 Z";
	var p2 = c.path(s1);
	var anim1 = Raphael.animation({path: s2}, 1e3);
	var anim2 = Raphael.animation({path: s1}, 1e3);

	// p.animate({path:"M140 100 L190 60"}, 2000, function() {
	// r.animate({path:"M190 60 L 210 90"}, 2000);
	// });


	var down = function() {
	var up = function() {
	console.log("up");
	// c.animate({r : 6, fill : '#f00'}, 1000, down);
	p2.animate(anim2, 1000, ">", down);
	};

	console.log("down");
	// c.animate({r : 10, fill : '#00f'}, 1000, up);
	p2.animate(anim1, 1000, ">", up);
	};
	down();
	// console.log(anim1);

	// p2.animate(anim2.delay(700).repeate(4), 5000, function(){console.log("kaka"); });

	// p2.animate(anim2, 3000, function(){});
	};
	</script>
	</head>
	<body>
	<div id="holder"></div>
	</body>
	</html>
No results found