動畫是一個迷人的主題。無論您想要添加互動動畫,如過渡效果,還是構建整個全屏體驗,您都擁有所有所需的工具。
動畫是一個迷人的主題。無論您想要添加互動動畫,如過渡效果,還是構建整個全屏體驗,您都擁有所有所需的工具。
而且,您有很多不同且具有不同目的的選擇。
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 外,還有一些很棒的庫可以為您抽象出大部分細節: