logo标签列表

Canvas与SVG动画（特效[滤镜]和性能）比较

performanceanimationcanvassvgeffects
3
我正在开发一个应用程序，应该能在Web浏览器（IE支持完全可选）和iPhone上运行得同样流畅。我已经测试了各种库好几天，包括：jQuery SVG、CAKE（Canvas动画工具实验）、Burst Engine、Processing.js和Raphael，但还没有找到适合这个实验的正确库。
输入是可选的 - 无论是从矢量渲染的SVG还是PNG，动画库的唯二要求是能够对图像进行动画（旋转），并逐渐应用模糊滤镜或“拖尾”效果。
在性能和前面提到的效果方面，我应该选择SVG还是Canvas？
之前的项目是用Flash完成的，但考虑到趋势和缺乏iPhone支持，我决定转向更为先进的软件。
1个回答
2
谢谢，看起来在这个实验中Canvas可能更高效。虽然我还没有找到任何关于动画模糊滤镜（增加和减少模糊量）的示例或参考资料 - 你知道有吗？由于我在之前的项目实现中使用了Flash，SVG似乎更直观，但在AS中，模糊和旋转是不同图层上对象的动画属性 - 你能给我一些使用Canvas实现相同功能的示例吗？（多个对象独立地进行旋转和过滤器动画） - laVie
这是一个模糊动画的示例：http://svg-wow.org/blog/2009/10/04/fast-blur/。该版本需要SMIL动画支持，但并非所有浏览器都支持（我建议在Opera中运行）。但是，可以使用JavaScript更改“stdDeviation”属性，在支持SVG滤镜的浏览器中应该可以正常工作。 - Erik Dahlström
我对性能感到惊讶，因为在我尝试的每个实例中，SVG版本都比基本上是C++代码的JavaScript更快。你试过几个不同的浏览器吗？ - Erik Dahlström
刚刚花了几周时间在全屏世界地图（100k点）上进行复杂的缩放/平移动画，我们的测试表明SVG明显优于Canvas。如果您正在绘制大量细节，则在Win7 / Vista中使用Direct2D硬件支持的SVG比Canvas更胜一筹，后者必须在每帧重新绘制整个屏幕（即用于缩放操作）。 SVG以15fps运行，而启用硬件支持的Canvas仅以3fps运行（高度优化）。 - Joseph Lust
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接