jquery - 使用 raphael.js 为路径形状设置动画

Question

我想知道你们中是否有人知道如何使用raphael.js为路径形状设置动画。

所以我做了一个随机的路径形状，如：

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

并希望为这条路径设置onclick动画

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

不幸的是它不起作用。它只是改变形状，但不是动画。

你可以在这里试试

谢谢！

Answer 1

您忘记为动画设置时间...这是一个 jsfiddle .. http://jsfiddle.net/y9XHw/和下面的解决方案。

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