動畫是一個迷人的主題。無論您想要添加互動動畫,如過渡效果,還是構建整個全屏體驗,您都擁有所有所需的工具。

動畫是一個迷人的主題。無論您想要添加互動動畫,如過渡效果,還是構建整個全屏體驗,您都擁有所有所需的工具。

而且,您有很多不同且具有不同目的的選擇。

CSS 通常被認為更加高效,儘管 JavaScript 也可以非常高效。一切取決於您需要做什麼,以及每幀渲染所需的時間。

讓我們總結這些選項,找出哪一種是合適的選擇。

CSS 過渡效果

CSS 過渡效果 有一個起點和終點。它們將一點從 X 移動到 Y,或從可見變為不可見。

它是最簡單的動畫,主要用於與頁面其餘部分無縫集成的微妙動畫。

通過過渡效果,您可以從一個狀態轉換到另一個狀態,但您無法做更多。

CSS 動畫

與 CSS 過渡效果相比,CSS 動畫 允許您具有不止 2 個狀態,事實上,您可以擁有很多狀態,並且可以用於創建更複雜的動畫。

當您需要相對簡單且無法使用過渡效果實現的動畫時,建議使用 CSS 動畫。

SVG 動畫

SVG 是一種出色的基於矢量的格式,可以使用 SMIL(SVG 動畫的"本地"格式)創建動畫。

由於存在跨瀏覽器的不一致性(並且 IE/Edge 不支援),SMIL 快將在 Chrome 中廢棄,但是團隊已暫時撤銷了此決定。

他們希望推動 CSS 動畫和 Web Animations API 來代替 SMIL。

Canvas API 動畫

Canvas API 提供了一種在屏幕上繪製的方法,使用的是點陣而不是向量。

儘管動畫是可能的,但不如其他選項高效。

Web Animations API

Web Animations API 是 Web 上的動畫未來。它旨在將 CSS 動畫的性能與使用 JavaScript 輕鬆創建較長動畫的能力結合起來。

目前只在 Chrome 和 Firefox 上運行。Safari、IE 和 Edge 仍在考慮中,但 存在一個 polyfill 可以使其在所有瀏覽器中運行。

WebGL

WebGL 允許您創建 3D 動畫,更適合沉浸式全屏動畫體驗和 VR,但複雜性更高。


除了原生 API 外,還有一些很棒的庫可以為您抽象出大部分細節: