使用 raphael.js 为路径形状设置动画答案

【问题标题】：animate path-shape with raphael.js使用 raphael.js 为路径形状设置动画
【发布时间】：2013-10-13 05:42:04
【问题描述】：

我想知道你们中是否有人知道如何使用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")
});

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

你可以试试here

谢谢！

【问题讨论】：

标签： jquery html raphael

【解决方案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);
  });
});

【讨论】：