Canvas 与 SVG 动画(效果[滤镜]和性能)
我正在开发一个应用程序,它应该在 Web 浏览器(IE 支持完全可选)和 iPhone 上同样流畅地运行,并且已经测试了多个库几天,包括:jQuery SVG、CAKE(Canvas Animation Kit Experiment)、Burst Engine、Processing.js和拉斐尔,但尚未找到适合该实验的人。
输入是可选的 - 无论是从矢量渲染的 SVG 还是 PNG,动画库的唯一两个要求是能够对图像进行动画处理(旋转),并逐渐应用模糊滤镜或类似“轨迹”的效果。
就性能和上述效果而言,我应该选择 SVG 还是 Canvas?
以前该项目使用的是 Flash,但考虑到趋势和缺乏 iPhone 支持,我决定改用更先进的软件。
I am developing an application that should run equally smoothly on a web browser (IE support completely optional) and on iPhones and have tested various libraries for days, including: jQuery SVG, CAKE (Canvas Animation Kit Experiment), Burst Engine, Processing.js and Raphael, and have yet to find the right one for this experiment.
The input is optional - whether an SVG or a PNG rendered from the vector, the only two requirements for the animation library are to be able to animate (rotate) the image, and gradually apply a blur filter or a "trails"-like effect.
Should I go for SVG or Canvas, performance- and the forementioned effectswise?
Previously the project was in Flash, but regarding the trends and lack of iPhone support, I decided to switch to a more progressive software.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
您可以在此处比较滤镜性能 svg 与 canvas 自己。另一个示例展示了如何制作 svg 3d 灯光效果 与 canvas 3d 灯光效果
chromeexperiments 显示画布和 svg。还有 svg-wow.org 或多或少做了同样的事情。
Here you can compare filter performance svg vs canvas yourself. Another example shows how to do an svg 3d lighting effect vs canvas 3d lighting effect
There are many nice demos over at chromeexperiments showing both canvas and svg. And there's svg-wow.org which does the same more or less.