跳到主要内容

你应该使用CSS,JS或SMIL进行动画制作吗?

CSS,SMIL和JavaScript各有利弊。根据您的需要权衡它们以做出明智的决定......

01. CSS有利于转换

Codepen screengrab

并非所有SVG属性都可以通过CSS动画

CSS非常适合您可以使用它实现的任何动画。但是在SVG中,它有其局限性,因为并非所有SVG属性都可以通过CSS动画。

因此,如果您需要为无法使用CSS设置动画的属性设置动画,则可以选择SMIL或JS。 CSS通常适用于包括转换在内的动画。 SVG上的CSS动画在移动设备上的表现也优于SMIL动画。

02. SMIL不具备未来性

Codepen screengrab

SMIL能够为CSS当前无法动画的属性设置动画

SMIL动画与JS动画相比具有一个主要优势:当SVG作为图像嵌入时,它们会被保留(使用或作为CSS中的背景图像)。

SMIL还能够为CSS当前无法动画制作的属性设置动画 - 例如路径数据属性。但是SMIL在任何版本的IE中都不起作用,并且将来会被弃用以支持Web Animations API。

使用SMIL在同一元素上定义多个动画很容易变得乏味,特别是如果它们包含多个转换 - 这就是CSS派上用场的地方。

03. JavaScript提供创作自由

JavaScript makes animating easier if you use an SVG animation library

如果使用SVG动画库,JavaScript可以使动画更容易

JavaScript为您提供了对动画的出色控制,如果您使用许多可用的SVG动画库(我最喜欢的是snap.svg),可以使动画更容易,并且可以更好地控制计时功能和缓动。

但是,当SVG作为图像嵌入时,不会保留JS动画。

话: Sara Soueidan

Sara Soueidan是来自黎巴嫩的前端开发人员,作家和演讲者。

像这样?阅读这些!



翻译字数超限