畫布與SVG動畫（效果[過濾器]和性能）

我正在開發一個應用程序，應該在Web瀏覽器（IE支持完全可選）和iPhone上同樣流暢地運行，並測試了多種庫，包括：jQuery SVG ，CAKE（畫布動畫工具包實驗），Burst Engine，Processing.js和Raphael，還沒有找到合適的實驗。畫布與SVG動畫（效果[過濾器]和性能）

輸入是可選的 - 無論是從矢量渲染的SVG還是PNG，動畫庫的唯一兩個要求是能夠動畫（旋轉）圖像，並逐漸應用模糊濾鏡或「尾跡「的效果。

我應該去SVG或帆布，性能和前面提到的影響？

此前該項目在Flash中，但關於iPhone支持的趨勢和缺乏，我決定切換到更先進的軟件。

來源

2010-09-30 laVie

在這裏，您可以自己比較過濾器性能svg和canvas。另一個例子展示瞭如何做一個svg 3d lighting effect VS canvas 3d lighting effect

有超過在chromeexperiments許多不錯的演示，展示既帆布和SVG。有svg-wow.org或多或少有相同的。

來源

2010-09-30 21:48:07

謝謝，看來Canvas可能在這個實驗中更具性能。雖然我一直沒有找到任何例子或參考動畫模糊過濾器（既增加和減少模糊量） - 你碰巧知道任何？因爲我在前面的項目實現中使用了Flash，所以SVG看起來更加直觀，但是在模糊和旋轉是不同圖層上的對象的動畫屬性 - 你能給我一些關於如何實現它的例子使用Canvas的功能？（使用旋轉和濾鏡獨立動畫的多個對象） – laVie 2010-10-02 17:47:23

以下是模糊動畫的示例：http://svg-wow.org/blog/2009/10/04/fast-blur/。該特定版本需要SMIL動畫支持，但尚未在所有瀏覽器中使用（我建議在Opera中運行它）。但是，可以使用javascript更改'stdDeviation'屬性，並且在支持svg過濾器的瀏覽器中應該可以正常工作。 – 2010-10-03 10:14:13

另外我對性能感到驚訝，因爲svg版本在我嘗試過的每個實例中都快得多（基本上是C++代碼vs javascript）。嘗試了幾個不同的瀏覽器？ – 2010-10-03 10:23:56

畫布與SVG動畫（效果[過濾器]和性能）

回答

相關問題