如何动画在拉斐尔JS

我得出一个线圈的曲线状结构如何动画在拉斐尔JS

var pathCommand = "M 10 50 l 10 0 "; 
for (var i = 0; i < 10; i++) { 
pathCommand += "c 15 0 25 -20 15 -20 " + "c -10 0 0 20 15 20 "; 
} 
var pc = paper.path(pathCommand);`enter code here` 
      pc.attr({ 
       stroke: '#000', 
       'stroke-width': 3 
      });

，但我想，如果它是由像素选取的像素与动画显示这一点。我已经试过这

var pc = paper.path("M 10 50"); 
for (var i = 0; i < 10; i++) { 
pathCommand += "c 15 0 25 -20 15 -20 " + "c -10 0 0 20 15 20 "; 
pc.animate({path: pathCommand, stroke: '#000','stroke-width': 3},2000); 
}

这不是给我什么，我真正想要。任何人都可以告诉我，我应该怎么做才能显示，因为这是绘制进步，拉斐尔js？感谢您的帮助

来源

2012-06-14 Shruti

此链接有关于该问题的一些很好的信息。它可能有帮助。 http://stackoverflow.com/questions/4631019/how-to-draw-a-vector-path-progressively-raphael-js –

我已经尝试过，但它不是与我的案件 – Shruti

反正我有它的解决方案从我这么多的尝试:)一个工作 – Shruti

var s = [ { stroke: "M 150 150", time: 0}, 
      { stroke: "c 15 0 25 -20 15 -20", time: 800}, 
      { stroke: "c -10 0 0 20 15 20", time: 600}, 
      { stroke: "c 15 0 25 -20 15 -20", time: 800}, 
      { stroke: "c -10 0 0 20 15 20", time: 600}, 
      { stroke: "c 15 0 25 -20 15 -20", time: 800}, 
      { stroke: "c -10 0 0 20 15 20", time: 600}, 
      { stroke: "c 15 0 25 -20 15 -20", time: 800}, 
      { stroke: "c -10 0 0 20 15 20", time: 600} ]; 
var drawnPath = s[0].stroke; 
var myPath = paper.path(drawnPath).attr({"stroke-width": 3,"stroke": "#000"}); 
var temp = 1; 
animateMyPath(); 
function animateMyPath() { 
if (temp < s.length) { 
    drawnPath += s[temp].stroke; 
    myPath.animate({path: drawnPath}, s[temp].time, animateMyPath); 
    temp++; 
    } 
}

请告诉我是这样做这是正确的方式，因为我是新来这个Javascript编程。

来源

2012-06-15 04:59:28 Shruti

是不是你错过'drawnPath + = s [temp] .stroke;'的空间？ – Leonid

@SomeGuy：这是工作，但 – Shruti

@Shruti看起来不错。如果我有机会，我会研究其他解决方案。我现在很好奇，但工作需要我的时间。 :( –

如何动画在拉斐尔JS

回答

相关问题