更改值時動畫SVG路徑

我正嘗試使用SVG和角度指令來創建圖形以更改動態部分。現在，我已經做到了這一點：更改值時動畫SVG路徑

http://plnkr.co/edit/TcbK7kyzM3tapDISxndh?p=preview

app.directive('pieChart', function($document) { 
    return { 
     restrict: "E", 
     template: '<svg width="500" height="500">' + 
      '<path d="M100,200 a150,150 0 1,0 150,-150" stroke="black" stroke-width="10" fill="none"></path>' + 
     '</svg>', 
     scope: { 
      value: '=' 
     }, 
     link: function(scope, elem, attr) { 
     } 
    } 
});

我希望我的圖表看起來像這樣當它是100％的值，而當值是 - 讓我們說 - 45％，我會喜歡看這條線，但只有45％從頂尖中心開始。我可能不得不重新計算路徑的路徑值，但我想問一下，是否有可能在改變路徑時使用JS使其在改變大小時變爲動畫效果？

預先感謝您，或者如果您有任何人知道這個東西的好教程，請鏈接到我。

編輯：我改變了指令爲一個簡單的條形圖，但這只是例如，我知道這可以做到沒有SVG，因爲你可以使用divs，但我希望圖表後更復雜。

這裏有一個的jsfiddle http://jsfiddle.net/fg9e7eo4/1/

在我的例子，圖表一直保持一個，我想使它動畫只有一次，不是停留在這一點上。

順便說一句，這是我想出來，使其工作指令：

testApp.directive('pieChart', function() { 
    var html = 
    '<svg width="510" height="20" style="background: #fff">' + 
     '<path d="{{path}}" stroke="red" stroke-width="10" fill="none">' + 
     '<animate dur="1s" repeatCount="indefinite" attributeName="d" values="{{path2}}"/>' + 
     '</path>' + 
    '</svg>'; 

    return { 
    restrict: 'E', 
    template: html, 
    scope: { 
     'value': '=' 
    }, 

    link: function(scope, elem, attrs) { 

     scope.$watch('value', function(newValue, oldValue) { 
     scope.path = 'M 5 10, L ' + (newValue * 5) + ' 10'; 
     scope.path2 = 'M 5 10, L ' + (oldValue * 5) + ' 10; M 5 10, L ' + (newValue * 5) + ' 10'; 
     elem.children().children().beginElement(); 
     }); 

    } 
    }; 
});

來源

2014-12-03 Pacuraru Daniel

您需要$觀察attr – Dylan 2014-12-03 18:46:23

的值我得到的值是我在指令中調用的範圍更新的值，但我不知道何時更改模板中的路徑，如何從上一個'd '到新的 – 2014-12-03 18:49:08

您將必須使用一些緩動功能間隔地修改路徑。有框架（如snap或d3）可以爲你做到這一點 - [這裏]（http://bl.ocks.org/mbostock/31ec1817b2be2660c453）是一個使用d3的例子。 – user1620220 2014-12-03 19:12:13

如果你想讓它只有一次動畫然後停止更換repeatCount =「無限期」由repeatCount = 「1」fill =「freeze」

如果確保值中的路徑在命令的數字和類型中是一致的，則應該獲得平滑的動畫。這裏有一個例子：

<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500"> 
 
    <path d="M100,200 L150,200" stroke="black" stroke-width="10" fill="none"> 
 
     <animate attributeName="d" values="M100,200 L150,200;M100,200 L200, 200" fill="freeze" begin="1s" dur="2s" /> 
 
    </path> 
 
</svg>

的SVG測試套件具有an example of path animation.，並有一個w3c primer on animation。

來源

2014-12-10 22:39:27

然後動畫死了。 – 2014-12-10 22:54:42

是的，我在jsfiddle中測試過它，但動畫不再工作 – 2014-12-10 23:36:17

除非你讓我看到更新的小提琴，否則我看不到你做錯了什麼。並且「不再工作」是指它不光滑或者什麼都不做？ – 2014-12-11 05:15:52

如果要使用條形圖，爲什麼不使用rect而不是path？ IMO，rect比path更具描述性。

這裏是我的例子，使用rect爲它設置動畫。

http://plnkr.co/edit/2hEzBqIVgh0rgE3D0Pd4?p=preview

對於AngularJS，您只需設置width和to屬性。

<rect x="10" y="10" height="110" width="500" 
    style="stroke:#ff0000; fill: #0000ff"> 
    <animate 
     attributeName="width" 
     begin="0s" 
     dur="2s" 
     from="0" 
     to="500" 
    /> 
</rect>

這個答案也是有幫助的，我想。
SMIL animation on SVG ng-repeat'ed element only occurs on page load

來源

2014-12-15 22:03:33 allenhwkim

我很欣賞你的迴應，但我正在尋找一種方式來通過角度指令來啓動/停止動畫，有沒有一種方法可以在指令中使用函數來鉤住動畫的開始/停止？所以我可以在模型更改時調用 – 2014-12-18 00:40:39

@PacuraruDaniel，我可能是錯的，但我沒有看到你的問題是停止/開始SVG動畫。我有我自己的答案，但我們不要讓讀者困惑。我會建議你發佈另一個問題，並讓我知道，我會很樂意爲此回答。 – allenhwkim 2014-12-18 04:33:20

不知道，如果你彌補嘗試新的插件，但是從Easy Pie Chart.js長相有你想要的東西，它是真正的快速配置和漂亮輕巧。如果你開始使用SVG，看看Raphael.js，我知道你可以爲SVG創建動畫（甚至可以從一個到另一個）。

希望這有助於！

來源

2014-12-17 14:16:13

更改值時動畫SVG路徑

回答

相關問題