Animate

by XcsN

HTML

<script src="http://www.quarkist.com/js/raphael-min.js"></script>
<div id="displayA"></div>
<div id="displayB"></div>

CSS

#displayA { position: absolute; top: 0px;   left: 0px; }
#displayB { position: absolute; top: 0px;   left: 112px; }

JavaScript

// Paths to animate
  var path1 = "M200,50c-27.5,0,50,78,50,50 c0-27.5-77.5,50-50,50c28,0-50-77.5-50-50C150,127.5,228,50,200,50z";
  var path2 = "M200,150c-27.5,0-50-22.5-50-50 s22.5-50,50-50s50,22.5,50,50S227.5,150,200,150z";
  var path3 = "M200,171 130,100 200,30 271,100 200,171z";
  var path4 = "M250,150 150,150 150,50 250,50 250,150z";
  var path5 = "M200,50 200,83.5 200,116.5 200,150";

// animString works by stringing code along
function animString() 
{ var tempCanvas =  Raphael(document.getElementById('displayA'), 0, 0, 320, 240);
  var path = tempCanvas.path( path1 );
  var speed = 1000;
  path.animate(
  { path: path1 }, 1000,
    function(){ path.animate( { path: path1 }, speed, 2000,
    function(){ path.animate( { path: path2 }, speed, 2000,
    function(){ path.animate( { path: path3}, speed, 2000,
    function(){ path.animate( { path: path4}, speed, 2000,
    function(){ path.animate( { path: path5}, speed, 2000
    ) } ) } ) } ) } ) } );
}

// animRecursion fails
function animRecursion(pathArray, speedArray, initialization) 
{ var newPath=pathArray.shift(pathArray); 
  var newSpeed=speedArray.shift(speedArray);
  if ( !initialization ) 
  { initialization=1;
    var tempCanvas =  Raphael(document.getElementById('displayB'), 0, 0, 320, 240);
    var path = tempCanvas.path( newPath );
    path.animate({path:newPath},newSpeed,animRecursion(pathArray, speedArray, initialization));
  } else
    { if ( pathArray.length !=1 )
      { path.animate({path:newPath},newSpeed,animRecursion(pathArray, speedArray, initialization));
      } else 
        {  if ( pathArray.length ==1 ) 
          { path.animate({path:newPath},newSpeed); 
          }
        }
    }
} 

var sendArray = new Array();
var sendSpeed = new Array();
sendArray = [path1, path2, path3, path4, path5];
sendSpeed=  [100,200,300,400,500];
animString();
animRecursion(sendArray,sendSpeed);