Jak mogę animować narysowaną ścieżkę wektorową za pomocą Raphael JS?

Question

Jak mogę animować ścieżkę wektorową narysowaną za pomocą Raphael JS?

Mam zestaw współrzędnych, które chciałbym połączyć się przy użyciu Raphael JS.

na siatce, współrzędne są (x, y zestawy). Chciałbym zacząć od jednego końca i "połączyć kropki", gdy użytkownik patrzy. Produkt końcowy będzie wyglądał tak:

Picture 9.png http://img213.imageshack.us/img213/8013/picture9my.png

Idealnie, chciałbym być w stanie dokonać ścieżki zakrzywiona tak będą wyglądać mniej więcej tak (współrzędne dodane dla porównania):

Picture 10.png http://img534.imageshack.us/img534/1789/picture10fc.png

współrzędne są:

26,-6 
14,-12 
5,-20 
11,-28 
14,-37 
5,-40 

szukałem w Google i czytałem Thr ough to pytanie How to draw a vector path progressively? (Raphael.js) ale staram się używać Raphael.js konkretnie i przykład na tej stronie dla Raphael.js nie wydają się działać ani nie mówić o używaniu wielu współrzędnych punktów na wejściach.

Answer 1

Progressive Ścieżki

Rysowanie ścieżki stopniowo jest łatwe do zrobienia. Nie podoba mi się druga najbardziej akceptowana odpowiedź na this question, ponieważ odtwarza ścieżkę na każdym kroku, usuwając papier pomiędzy. Oto funkcja użyteczności Użyłem raz po raz:

function drawpath(canvas, pathstr, duration, attr, callback) 
{ 
    var guide_path = canvas.path(pathstr).attr({ stroke: "none", fill: "none" }); 
    var path = canvas.path(guide_path.getSubpath(0, 1)).attr(attr); 
    var total_length = guide_path.getTotalLength(guide_path); 
    var last_point = guide_path.getPointAtLength(0); 
    var start_time = new Date().getTime(); 
    var interval_length = 50; 
    var result = path;   

    var interval_id = setInterval(function() 
    { 
     var elapsed_time = new Date().getTime() - start_time; 
     var this_length = elapsed_time/duration * total_length; 
     var subpathstr = guide_path.getSubpath(0, this_length);    
     attr.path = subpathstr; 

     path.animate(attr, interval_length); 
     if (elapsed_time >= duration) 
     { 
      clearInterval(interval_id); 
      if (callback != undefined) callback(); 
       guide_path.remove(); 
     }          
    }, interval_length); 
    return result; 
} 

Można zobaczyć go w akcji on my site.

Ta sama stałaby animowanie budowie progresywnej ścieżka do punktów liniowo absolutnie proste. Po prostu skompiluj swoją ścieżkę ...

var sequence_path = ["M26,-6", "L14,-12", "L5,-20", "L11,-28", "L14,-37", "L5,-40"]; 

A następnie przekaż ją do dowolnej skonfigurowanej funkcji animacji ścieżki. W moim przypadku,

drawpath(paper, 
      sequence_path, 
      3500, 
      { stroke: 'black', 'stroke-width': 2, 'stroke-opacity': 1, fill: 'none', 'fill-opacity': 0 }, 
      function() 
      { 
       alert("All done"); // trigger whatever you want here 
      }); 

Curve interpolacja

Raphael 2,0 za Catmull Rz cecha sprawia, wijąca wdzięcznie między swoimi punktami niezwykle proste (dzięki Erik Dahlström za wskazanie na to uwagę). Wszystko, co musisz zrobić, to skonstruować ścieżkę za pomocą polecenia "R", aby poruszać się pomiędzy punktami, a Rafael wykona resztę.

function generateInterpolatedPath(points) 
{ 
    var path_sequence = []; 
    path_sequence.push("M", points[0].x, points[0].y); 
    path_sequence.push("R"); 
    for (var i = 1; i < points.length; i++) 
    { 
     path_sequence.push(points[i].x, points[i].y); 
    } 
    return path_sequence; 
} 

Możesz zobaczyć wszystkie elementy pracujące razem here.

Answer 2

Można również użyć Catmull Rom (patrz http://raphaeljs.com/reference.html#Paper.path), aby uzyskać gładką krzywą poprzez podanymi punktami.

Demo na żywo here (kliknij, aby przypisać punkty, następnie kliknij w Shift, aby przejść do krzywej Rom Catmull).