SVG和CSS3动画之间的差异和相似之处？

但这里有过于简单的要点：

> CSS动画规范(本身)只是为您提供声明“关键帧”或样式之间的多步转换.
> CSS3中的“样式”包括“变换”,它指定页面元素的缩放,旋转,倾斜和位置偏移.
>可以在样式之间进行“转换”,并指定转换的时间和速度,甚至是声明立方贝塞尔定时函数的程度.
>结合动画,过渡和变换为您提供了一种简单,声明性的方式,以非常丰富的方式移动和转换任何页面元素(img,div,视频等),在旧版浏览器中也会逐渐降级(只要很长时间)因为你对事情是理智的.

但是为了动画的目的,每个元素基本上被视为一个无差别的2d矩形,所以它真的是关于动画精灵.正如你所指出的那样,在Sencha,我们甚至围绕这个建立了整个CSS Animation tool.你应该看看那里的一些演示,因为它表明你可以用CSS给你的一小部分原语做很多事情.

可以使用built in SVG animation capabilities(动画,动画元素等),SMIL(类似于CSS动画的声明性动画描述)或JavaScript执行SVG动画,具有比CSS动画更丰富的功能集,但仅仅因为您正在创建SVG对象并改变他们的财产.例如,您无法使用SVG“动画”为现有的HTML动画制作动画.

但它也更丰富. SVG的最大收获是你要声明绘图路径和填充具有很大的灵活性(线条,弧线,二次圆弧,三次贝塞尔曲线等等),你可以使用变换和关键样条曲线随时间改变这些属性的值(类似于CSS Transitions中的计时功能))这允许您执行“卡通”动画而不是精灵动画. (我不是动画师,我只是使用我认为合适的术语).因此你可以实际绘制像this cat walking across the screen这样的东西,使用无法用CSS动画执行的线动画(或者对于合理理智的人来说不可能执行 – 如果疯狂的人想要声明具有边界半径的大量零高度div并使用变换来模拟弧,那是一个免费的国家.)

另一方面,SVG是一个PITA,如果你是独立编写的(使用XHTML dtd的详细XML样式).如果你是一个JavaScripter,我强烈推荐Raphael(这是我们实验室项目的一部分) – Raphael具有降低旧版IE中VML矢量图形的好处. SMIL(SVG的声明性动画)是一个不错的主意,但在很多地方都没有得到适当的支持.此外,许多浏览器不能正确支持SVG,而那些通常不完全支持SVG的浏览器,尤其是当您尝试为属性设置动画时.

并且Android 2.x中没有SVG支持,因此如果您想要在手机上运行的网络动画,那么您将无法使用CSS动画.

在自学了SVG动画的基础知识以便开发顶部链接的介绍演示文稿之后,我可以大胆地用手写SVG.它很难记住,它是非直观的,因为它的XML,它往往完全工作或完全失败,使得调试令人沮丧.