比较网上动画的选项

动画是一个有趣的话题。无论您是要添加诸如过渡之类的交互动画,还是要构建完整的全屏体验,您都拥有所需的所有工具

动画是一个有趣的话题。无论您是要添加诸如过渡之类的交互动画,还是要构建完整的全屏体验,您都拥有所需的所有工具。

您有很多选择,这些选择完全不同并且可以达到不同的目的。

CSS尽管JavaScript可能也非常高效,但通常被称为具有更高的性能。这完全取决于您需要执行的操作,以及每帧渲染需要多少时间。

让我们看一下这些选项的概述,以找出哪个是正确的选择。

CSS过渡

CSS过渡有一个开始和结束。它们从X移到Y,或从可见移到不可见。

这是最简单的动画,主要用于与页面其余部分很好集成的细微动画。

通过过渡,您可以从一种状态过渡到另一种状态,但您不能拥有更多。

CSS动画

CSS动画与CSS过渡相比,您可以拥有两个以上的状态,实际上您可以有很多状态,并且它们可以用于创建更复杂的动画。

如果您需要相对简单的动画,而过渡则不可能使用CSS动画,那么建议您使用CSS动画。

SVG动画

SVG是一种很棒的基于矢量的格式,允许使用SMIL(SVG动画“本机”格式)创建动画。

Chrome即将弃用SMIL,但由于SMIL存在跨浏览器不一致的问题(并且IE / Edge不支持),暂时由于抵制而撤消了该决定。

他们希望推送CSS动画和Web动画API,而不是SMIL。

画布API动画

画布API提供了一种使用栅格而不是矢量在屏幕上绘画的方法。

动画是可能的,尽管表现不佳

Web动画API

Web动画API是Web动画的未来。它旨在通过使用JavaScript轻松创建更长的动画来提高CSS动画的性能。

目前仅在Chrome和Firefox中可用。 Safari,IE和Edge仍在考虑,但存在一个polyfill使它可以在所有浏览器中使用。

WebGL

WebGL允许您创建3D动画,尽管更复杂,但它更适合沉浸式全屏动画体验和VR。


除了本机API,还有很棒的库为您抽象了大多数细节: