Shape Tween With Raphael

Raphael can easily tween between two different paths. The animation uses Rapahel’s internal tweening library so you can use all the standard easing equations like ease-out, ease-in-out, elastic, back-out etc… Here are some boxes that tween into arrow shapes:

Here is the main part of the code:

var p = new Raphael(0,0,"100%","100%");
 
        arrow(20, 20, 0.5, -45);
        arrow(100, 100, 0.5, 45);
        arrow(30, 250, 1, 0);
 
        function arrow(x, y, scale, rotation){
          var toArrow = p.path("").attr({fill : "#7e9fc2", stroke:"none"});
          var square = "M 0 0 \
                       L 100 0 \
                       100 100 \
                       100 100 \
                       50 100 \
                       0 100 \
                       0 100 \
                       0 0";
 
 
          var arrow = "M 0 0 \
                       L 100 0 \
                       100 130 \
                       120 130 \
                       50 200 \
                       -20 130 \
                       0 130 \
                       0 0";
 
          toArrow.attr({path : square, cursor : "pointer"})
          .mouseover(function(){
            this.animate({path: arrow, fill:"red"}, 500, "back-out");
          }).mouseout(function(){
            this.animate({path: square, fill:"#7e9fc2"}, 500, "back-out");
          });
 
          toArrow.transform("t"+x+" "+y+" s"+scale+" r"+rotation);
        }


 
 
 

Leave a Reply

Spam protection by WP Captcha-Free