Raphael.js customAttributes動畫

我正在嘗試使用Raphael.js創建一個圈子扇區的簡單動畫。動畫應該展開從0到2 * Pi的圓形扇區。問題在於1秒後只畫一個沒有任何動畫的圓圈。Raphael.js customAttributes動畫

這裏是我的代碼：

<html> 
<head> 
    <title></title> 
    <script src="raphael.js"></script> 
</head> 
<body> 
    <script> 
     window.onload = function() { 
      var paper = Raphael("holder"); 

      paper.ca.sector = function (x, y, r1, r2, startAngle, endAngle, color) { 
        var x11 = x + r1 * Math.sin(startAngle); 
        var y11 = y - r1 * Math.cos(startAngle); 
        var x21 = x + r1 * Math.sin(endAngle); 
        var y21 = y - r1 * Math.cos(endAngle); 

        var x12 = x + r2 * Math.sin(startAngle); 
        var y12 = y - r2 * Math.cos(startAngle); 
        var x22 = x + r2 * Math.sin(endAngle); 
        var y22 = y - r2 * Math.cos(endAngle); 

        var big = 0; 
        if (endAngle - startAngle > Math.PI) 
         big = 1; 

        var pathList = ["M", x12, y12, 
            "A", r2, r2, 0, big, 1, x22, y22, 
            "L", x21, y21, 
            "A", r1, r1, 0, big, 0, x11, y11, 
            "Z"]; 

        return {path: pathList, fill: color, stroke: "none"}; 
       } 

      var p = paper.path().attr({sector: [300, 300, 100, 140, 0, 0.0001, "pink"]}); 
      p.animate({sector: [300, 300, 100, 140, 0, Math.PI * 1.999999, "pink"]}, 1000, "bounce"); 
     }; 
    </script> 

    <div id="holder" style="width: 700px; height: 700px;"></div> 
</body> 
</html>

很抱歉的長列表。

所以這個問題爲什麼會發生？我做錯了什麼？

謝謝！

來源

2013-10-19 DaZzz

這裏是工作代碼：

 var paper = Raphael("holder"); 

     var createSector = function (x, y, r1, r2, startAngle, endAngle, color) { 
       var x11 = x + r1 * Math.sin(startAngle); 
       var y11 = y - r1 * Math.cos(startAngle); 
       var x21 = x + r1 * Math.sin(endAngle); 
       var y21 = y - r1 * Math.cos(endAngle); 

       var x12 = x + r2 * Math.sin(startAngle); 
       var y12 = y - r2 * Math.cos(startAngle); 
       var x22 = x + r2 * Math.sin(endAngle); 
       var y22 = y - r2 * Math.cos(endAngle); 

       var big = 0; 
       if (endAngle - startAngle > Math.PI) 
        big = 1; 

       var pathList = ["M", x12, y12, 
           "A", r2, r2, 0, big, 1, x22, y22, 
           "L", x21, y21, 
           "A", r1, r1, 0, big, 0, x11, y11, 
           "Z"]; 

       return {path: pathList, fill: color, stroke: "none"}; 
      } 

     var p = paper.path(); 
      p.attr(createSector(300, 300, 100, 140, 0, 0.001, "pink")); 
     p.animate(createSector(300, 300, 100, 140, 0.01, Math.PI * 1.999999, "pink"), 1000, "bounce");

不過我不知道的是，爲什麼你的代碼不能正常工作

JSFiddle demo

編輯：好吧，我一直在想一些價值觀和它看起來像raphael中的某種bug，因爲路徑的填充不與動畫一起使用。

var paper = Raphael("holder"); 

     paper.customAttributes.sector = function (x, y, r1, r2, startAngle, endAngle, color,strokeWidth) { 
       var x11 = x + r1 * Math.sin(startAngle); 
       var y11 = y - r1 * Math.cos(startAngle); 
       var x21 = x + r1 * Math.sin(endAngle); 
       var y21 = y - r1 * Math.cos(endAngle); 

       var x12 = x + r2 * Math.sin(startAngle); 
       var y12 = y - r2 * Math.cos(startAngle); 
       var x22 = x + r2 * Math.sin(endAngle); 
       var y22 = y - r2 * Math.cos(endAngle); 

       var big = 0; 
       if (endAngle - startAngle > Math.PI) 
        big = 1; 

       var pathList = ["M", x12, y12, 
           "A", r2, r2, 0, big, 1, x22, y22, 
           "L", x21, y21, 
           "A", r1, r1, 0, big, 0, x11, y11, 
           "Z"]; 

      return {path: pathList, fill: color,'stroke-width':strokeWidth}; 
      } 

     var p = paper.path(); 
      p.attr({sector: [300, 300, 100, 140, 0, 0.0001, "#caac12",1]}); 
     p.animate({sector: [300, 300, 100, 140, 0.0001, Math.PI * 1.999999, "#cacaca",0]}, 3000);

JSFiddle demo 2

來源

2013-10-21 05:43:00

Raphael.js customAttributes動畫

回答

相關問題