我如何逐漸使用Rapheal.js庫將動畫路徑變爲圓形

我有一個圓形扇形，我想逐漸將該扇形動畫化爲一個完整的圓形，我如何使用Rapheal.js製作它。我如何逐漸使用Rapheal.js庫將動畫路徑變爲圓形

順便說一句，我是SVG新手，我正在使用svg-editor使用SVG繪製形狀。

這裏是我的代碼

var arcPath1 = paper.path("m325.30255,127.93972c33.86002,6.238 52.02301,8.85 90.823,49.616l105.53491,-65.494c-44.84491,-59.9466 -101.70261,-109.25547 -201.98761,-108.83956l5.6297,124.71756z"); 

arcPath1.attr({ 
    "fill": "#003a60", 
    stroke: 'none' 
}); 

arcPath1.rotate(1.0569896697998047 ,420.6666870117177,90.38764953613116); 
arcPath1.node.id= "arch1";

這裏是我的代碼http://jsfiddle.net/v2KeV/

一個例子，我怎樣才能讓動畫完成是一個完整的圓的軌道？

注：我做它只是用於測試路徑動畫動畫..

來源

2012-07-14 palAlaa

嗯，首先第一件事情：以優雅的動畫弧段，我們需要能夠以編程生成它們。考慮三角的這個笨拙位：

// arcPath: 
// cx, cy are the center point 
// inner_radius and outer_radius describe the distance of the arc segment's inner and outer boundaries from the center point. 
// starting_radians describes the offset of the segment start; 
// arc_radians describes the width of the arg segment. 

function arcPath(cx, cy, inner_radius, outer_radius, starting_radians, arc_radians) 
{ 
    var x1 = cx + Math.cos(starting_radians) * inner_radius; 
    var y1 = cy + Math.sin(starting_radians) * inner_radius; 
    var x2 = cx + Math.cos(starting_radians) * outer_radius; 
    var y2 = cy + Math.sin(starting_radians) * outer_radius; 
    var x3 = cx + Math.cos(starting_radians + arc_radians) * outer_radius; 
    var y3 = cy + Math.sin(starting_radians + arc_radians) * outer_radius; 
    var x4 = cx + Math.cos(starting_radians + arc_radians) * inner_radius; 
    var y4 = cy + Math.sin(starting_radians + arc_radians) * inner_radius; 

    var pathstr = "M" + x1 + "," + y1 + " " 
        + "L" + x2 + "," + y2 + " " 
        + "A" + outer_radius + "," + outer_radius + " " + arc_radians + " " + (arc_radians > Math.PI ? "1" : "0") + " 1 " + x3 + "," + y3 + " " 
        + "L" + x4 + "," + y4 + " " 
        + "A" + inner_radius + "," + inner_radius + " " + (0 - arc_radians) + " " + (arc_radians > Math.PI ? "1" : "0") + " 0 " + x1 + "," + y1 + " z"; 

    return pathstr;     
}

用一個簡單的幾何構造，你可以簡單地動畫從局部弧段的路徑，全弧段，讓拉斐爾做提升，像這樣：

var arcPath1 = paper.path(arcPath(150, 150, 75, 125, Math.PI/2, Math.PI * 0.65)) 
    .attr({ fill: "#003a60", 'fill-opacity': 0.5, stroke: 'black' }); 

arcPath1.click(function() 
    { 
     arcPath1.animate({ path: arcPath(150, 150, 75, 125, Math.PI/2, Math.PI * 2 - 0.0001) }, 2000, "<>"); 
    });

不幸的是，拉斐爾在這方面做得非常糟糕，所以你會發生相交弧段的爆炸，將自己重塑成一個完整的圓圈，而不是所需的圓弧掃描。所以爲了讓它做你想做的事情，我們必須手動執行動畫。

function arcSweep(arc, x, y, inner, outer, angle_offset, from_sweep, to_sweep, duration) 
{ 
    var steps = 100; 
    var current_step = 0; 
    var intervalID = setInterval(function() 
       { 
        current_step++; 
        if (current_step >= steps) 
         clearInterval(intervalID); 
        arc.attr({ path: arcPath(x, y, inner, outer, angle_offset, from_sweep + ((to_sweep - from_sweep) * (current_step/steps))) }); 
       }, duration/steps); 
}

因此，基本上我們只是計算一系列中間弧，並依次設置它們直到達到目標角度。除了目標結束角度之外，動畫功能還需要弧的所有原始參數（它不能是Math.PI * 2 - 因爲它會計算爲空弧段！）。可能需要將這個抽象類抽象成一個類，以便弧段的每個實例都可以跟蹤它自己的變量。

這是fiddle演示成品。

來源

2012-07-16 18:57:52

我如何逐漸使用Rapheal.js庫將動畫路徑變爲圓形

回答

相關問題