Archiv der Kategorie ‘Raphael‘

 
 

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);
        }

Raphael 2.0 Catmull Rom Splines

Raphael 2.0 has support for Catmull Rom Splines. Very nice for easily drawing smooth paths:

…and here is the main part of the code:

 
 var p = new Raphael(0, 0, "100%", "100%");
 
       // catmull rom
       p.path("M 10 100 \
               R 30 50 \
               50 90 \
               70 20 \
               90 100 \
               110 90 \
               130 100").attr("stroke","white");
 
       // closed catmull rom
       p.path("M 200 20 \
               R 300 20 \
               300 120 200 120z").attr("stroke","white");

The “\” is used for javascript multiline strings – good for readability. The closed path has a “z” at the end to connect the last point to the first point.