SVG和CSS3动画之间的差异和相似之处？ [英] Differences and similarities between SVG and CSS3 animations?

问题描述

Sencha Animator仅使用CSS3动画。

Sencha Animator is using CSS3 animations exclusively.

RaphaelJS正在使用SVG动画。

RaphaelJS is using SVG animations.

SVG和CSS3动画之间的相似性和不同之处？

I wonder what are the similarities and differences between SVG and CSS3 animations?

可以使用一个替代另一个还是用于不同的任务？

Could one be used instead of the other or are they for difference tasks?

推荐答案

好的。我有一个整个演示文稿与 CSS动画简介和一点点SVG。

Ok. I have a whole presentation with an introduction to CSS Animations and A little on SVG.

但这里是过于简单的要素：

But here are the oversimplified essentials:

• CSS动画规范（本身）只是装备你声明


• CSS3中的样式包括变换，它指定页面元素的缩放，旋转，倾斜和位置偏移。


• 可以在样式之间进行转换，并指定转换的时间和速度，甚至可以声明三次贝塞尔定时函数。


• 组合动画，过渡和变换为您提供了一种简单，声明性的方式，以非常丰富的方式移动和转换任何页面元素（一个img，一个div，一个视频等），也会在旧的浏览器（只要你对事情很清楚）。

• The CSS Animation spec (per se) is just equipping you to declare "key frames" or multi-step transitions between Styles.
• "Styles" in CSS3 includes "Transform" which specifies the scale, rotation, skew and position offset of a page element.
• It's possible to "Transition" between styles, and specify the time and pace of that transition, to the extent, even, of declaring a cubic bezier timing function.
• Combining Animations, transitions and transforms gives you an easy, declarative way of moving and transforming ANY page element (an img, a div, a video etc.) in a very rich way, that also progressively degrades nicely in older browsers (as long as you're sane about things).

但是为了动画的目的，每个元素基本上都被视为一个未区分的2d矩形，所以它真的是关于动画sprites。在Sencha，您已经注意到，我们甚至围绕这一点构建了一个整体的 CSS动画工具。你应该看看那里的一些演示，因为它表明你可以真正做很多与CSS给你的一小组原语。

BUT every element is essentially treated as an undifferentiated 2d rectangle for the purposes of animation, so its really all about animating sprites. At Sencha, as you've noted, we've even built a whole CSS Animation tool around this. And you should take a look at some of the demos there because it shows that you can really do a lot with the small set of primitives that CSS gives you.

SVG动画可以使用内置的SVG动画功能（动画，动画元素等）， SMIL （与CSS动画类似的声明式动画描述）或JavaScript），具有比CSS更强大的功能集动画，但只是因为您正在创建SVG对象并更改其属性。您不能使用SVG动画来例如对现有的HTML进行动画处理。

SVG Animation can be performed using the built in SVG animation capabilities (animate, animateelement etc.), SMIL (a declarative animation description similarish to CSS Animations) or JavaScript), has a richer set of capabilities than CSS Animation, but only because you're creating SVG Objects and changing their properties. You can't use SVG "animation" to, for example, animate an existing piece of HTML.

但它也更丰富。 SVG最大的优点是你声明绘制路径和填充有很大的灵活性（线，弧，二次弧，三次bezier弧等），你可以改变这些属性的价值随时间使用变换和关键样条（类似于CSS Transitions中的计时功能））这允许你执行卡通动画而不是精灵动画。 （我不是一个动画师，我只是使用我认为是合适的条款）。因此，您实际上可以绘制像这只猫穿越屏幕，使用CSS动画无法执行的线动画（或不可能为合理的理智的人执行 - 如果疯狂的人想要声明大量的零高度div与边界半径和使用转换模拟弧，那么它是一个自由的国家。）

But it's also much richer. The biggest gain in SVG is that you're declaring drawing paths and fills with great flexibility (lines, arcs, quadratic arcs, cubic bezier arcs etc. etc.) and you can change the value of these properties over time using transforms and key splines (similar to timing functions in CSS Transitions)) This allows you to perform "cartoon" animation rather than sprite animation. (I'm not an animator, I'm just using the terms I think are appropriate). So you can actually draw things like this cat walking across the screen, using line animations impossible to perform with CSS Animation (or impossible to perform for people of reasonable sanity - if insane people want to declare large numbers of zero height divs with border radii and use transforms to simulate arcs, then it's a free country.)

另一方面，如果你不写代码（使用XHTML dtd的详细XML样式），SVG是一个PITA。我强烈推荐Raphael（这是我们实验室项目的一部分），如果你是一个JavaScripter - Raphael有在老IE中退化到VML矢量图形的好处。 SMIL（SVG的声明动画）是一个好主意，但它在许多地方没有得到适当的支持。还有许多浏览器不能正常支持SVG，那些支持SVG，通常不完全支持它，特别是当你尝试动画属性。

On the other hand, SVG is a PITA if you're writing it unassisted (verbose XML style with XHTML dtd). I'd highly recommend Raphael (which is part of our labs projects) if you're a JavaScripter - Raphael has the benefit of degrading to VML vector graphics in older IE. SMIL (declarative animation for SVG) is a nice idea but it's not properly supported in many places. Also many browsers don't properly support SVG and those that do, often support it incompletely, particularly when you try to animate properties.

Android 2没有SVG支持.x，所以如果你想要的网络动画在手机上工作，你会坚持使用CSS动画。

And there's no SVG support in Android 2.x, so if you want web animations that work on phones you're stuck with CSS Animations.

已经教会了SVG动画的基础知识，以便开发在顶部链接的介绍演示，我可以给予一个热心的拇指下来手写SVG。很难记住，它是非直观的，因为它的XML，它往往完全工作或完全失败，使调试令人沮丧的事情。

Having taught myself the basics of SVG animation in order to develop the intro presentation linked at the top, I can give a hearty thumbs down to hand-writing SVG. It's hard to remember, it's non-intuitive and because its XML, it tends to either work completely or fail completely, making the darn thing frustrating to debug.

这篇关于SVG和CSS3动画之间的差异和相似之处？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！