0

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

残念ながら機能しません。形状が変わるだけで、アニメーション化されていません。

ここで試すことができます

ありがとう！

4

1 に答える 1

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);
  });
});
于 2013-10-12T21:42:04.360 に答える