css - SVG 和 CSS3 动画的异同？

Question

Sencha Animator 专门使用 CSS3 动画。

RaphaelJS 使用 SVG 动画。

我想知道 SVG 和 CSS3 动画之间的异同是什么？

是否可以使用一个代替另一个，或者它们用于不同的任务？

Answer 1

好的。我有一个完整的演示 an introduction to CSS Animations and A little on SVG.

但这里有过于简单化的要点:

• CSS 动画规范(本身)只是让您能够声明“关键帧”或样式之间的多步转换。
• CSS3 中的“样式”包括“变换”，它指定页面元素的缩放、旋转、倾斜和位置偏移。
• 可以在样式之间“过渡”，并指定该过渡的时间和速度，甚至可以声明三次贝塞尔定时函数。
• 结合使用动画、过渡和变换，您可以通过一种简单的声明方式以非常丰富的方式移动和变换任何页面元素(img、div、视频等)，并且在旧版浏览器中也能很好地逐渐降级(只要你对事情保持清醒)。

但是为了动画的目的，每个元素本质上都被视为一个未区分的二维矩形，所以它实际上都是关于动画 Sprite 。 在 Sencha，正如您所指出的，我们甚至构建了一个完整的 CSS Animation tool围绕这个。你应该看看那里的一些演示，因为它表明你真的可以用 CSS 给你的一小部分基元做很多事情。 - 产品已停产。

可以使用 built in SVG animation capabilities 执行 SVG 动画(动画、动画元素等)，SMIL (类似于 CSS 动画的声明性动画描述)或 JavaScript)，具有比 CSS 动画更丰富的功能集，但这只是因为您正在创建 SVG 对象并更改它们的属性。例如，您不能使用 SVG“动画”为现有的 HTML 片段设置动画。

但它也更丰富。 SVG 的最大收获是您可以非常灵活地声明绘图路径和填充(直线、圆弧、二次圆弧、立方贝塞尔圆弧等)，并且您可以使用变换和键样条随时间更改这些属性的值(类似于 CSS Transitions 中的计时功能))这允许您执行“装配”动画而不是 Sprite 动画。 (我不是动画师，我只是使用我认为合适的术语)。所以你实际上可以画出像 this cat walking across the screen 这样的东西，使用 CSS 动画无法执行的线条动画(或者对于合理理智的人来说不可能执行 - 如果疯狂的人想要声明大量具有边界半径的零高度 div 并使用变换来模拟弧线，那么它是一个自由的国家。)

另一方面，如果您独立编写 SVG(使用 XHTML dtd 的冗长 XML 样式)，它就是一个 PITA。如果您是 JavaScripter，我强烈推荐 Raphael - Raphael 的好处是可以在旧版 IE 中降级为 VML 矢量图形。 SMIL(SVG 的声明性动画)是一个不错的主意，但它在很多地方都没有得到适当的支持。此外，许多浏览器不能正确支持 SVG，而支持 SVG 的浏览器通常支持不完全，尤其是当您尝试对属性进行动画处理时。更新:现在有更多更新的动画库，包括 snap.svg、greensock 等。

而且 Android 2.x 中不支持 SVG，因此如果您想要在手机上运行的网络动画，您只能使用 CSS 动画。

自学了 SVG 动画的基础知识以开发顶部链接的介绍演示文稿后，我可以对手写 SVG 表示由衷的反对。它很难记住，它不直观，而且由于其 XML，它往往要么完全工作要么完全失败，这使得调试变得令人沮丧。