CODEWITHSUNDEEP
jqueryhtmlraphael
supersize
supersize

Reputation: 14773

animate path-shape with raphael.js

I would like to know if anyone of you knows how to animate a path-shape with raphael.js.

So I have made a random path-shape like:

var paper = Raphael(10, 50, 320, 200);
var c = paper.path("M 250 250 l 0 -200 l -50 0 l 0 -50 l -50 0 l 0 50 l -50 0 l 0 50 z"); 
c.attr({ fill: '#000' });

and want to animate this path onclick to

c.click(function() {
    //alert(2);
c.animate({
    path: ("M 250 250 l 0 -40 l -50 0 l 0 -50 l -50 0 l 0 50 l -50 0 l 0 50 z")
});

unfortunenatly it does not work. It just changes the shape, but its not animated.

You can try it here

Thanks!

Upvotes: 0

Views: 2445

Answers (1)

Ian
Ian

Reputation: 13842

You forgot to set a time for the animate...here is a jsfiddle.. http://jsfiddle.net/y9XHw/ and the solution below.

$(function(){
var paper = Raphael(10, 50, 320, 200);
var c = paper.path("M 250 250 l 0 -200 l -50 0 l 0 -50 l -50 0 l 0 50 l -50 0 l 0 50 z"); 
c.attr({ fill: '#000' });
c.click(function() {
    //alert(2);
    c.animate({
        path: ("M 250 250 l 0 -40 l -50 0 l 0 -50 l -50 0 l 0 50 l -50 0 l 0 50 z")
    }, 2000);
  });
});

Upvotes: 1

Related Questions