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

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

您可以尝试here

谢谢！

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

用raphael.js制作动画路径形状

1 个答案: