比較網上動畫的選項

動畫是一個有趣的話題。無論您是要添加諸如過渡之類的交互動畫,還是要構建完整的全屏體驗,您都擁有所需的所有工具

動畫是一個有趣的話題。無論您是要添加諸如過渡之類的交互動畫,還是要構建完整的全屏體驗,您都擁有所需的所有工具。

您有很多選擇,這些選擇完全不同並且可以達到不同的目的。

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,還有很棒的庫為您抽象了大多數細節: