animation

學習使用API以可預測的方式執行動畫並安排事件 requestAnimationFrame()是一個相對較新的瀏覽器API。它提供一種更可預測的方式來連接到瀏覽器的渲染循環。 目前，所有現代瀏覽器（包括IE 10+）都支援這個API。 它不是專門用於動畫的API，但這是它被最廣泛使用的領域。 JavaScript有一個事件循環（event loop）。它不斷運行以執行JavaScript。 在過去，使用setTimeout()或setInterval()執行動畫。你執行一點點動畫，然後使用setTimeout()在幾毫秒後重複執行這段代碼： const performAnimation = () => { //... setTimeout(performAnimation, 1000 / 60) } setTimeout(performAnimation, 1000 / 60) 或是 const performAnimation = () => { //... } setInterval(performAnimation, 1000 / 60) 你可以透過獲取timeout或interval的參考並將其清除來停止動畫： let timer const performAnimation = () => { //... timer = setTimeout(performAnimation, 1000 / 60) } timer = setTimeout(performAnimation, 1000 / 60) //... clearTimeout(timer) performAnimation()調用之間的1000 / 60間隔取決於顯示器的刷新頻率，大多數情況下是60 Hz（每秒重繪60次），因為由於其限制，如果顯示器無法顯示，執行重繪將是無用的。這導致我們有大約16.6毫秒的時間來顯示每一個幀。 這種方法的問題是，即使我們精確指定了這個間隔，瀏覽器可能忙於執行其他操作，我們的setTimeout調用可能不能及時進行重繪，並且將被延遲到下一個循環。 這很糟糕，因為我們丟失了一個幀，在下一個幀中，動畫將被執行兩次，使眼睛注意到不平滑的動畫。 在Glitch上的這個使用setTimeout()構建的動畫的示例中可以看到這個問題。 requestAnimationFrame是執行動畫的標準方式，儘管代碼看起來非常類似於setTimeout/setInterval的代碼，它的工作方式非常不同：...

動畫是一個迷人的主題。無論您想要添加互動動畫，如過渡效果，還是構建整個全屏體驗，您都擁有所有所需的工具。 動畫是一個迷人的主題。無論您想要添加互動動畫，如過渡效果，還是構建整個全屏體驗，您都擁有所有所需的工具。 而且，您有很多不同且具有不同目的的選擇。 CSS 通常被認為更加高效，儘管 JavaScript 也可以非常高效。一切取決於您需要做什麼，以及每幀渲染所需的時間。 CSS 過渡效果 CSS 動畫 SVG 動畫 Canvas API 動畫 Web Animations API WebGL 讓我們總結這些選項，找出哪一種是合適的選擇。 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 提供了一種在屏幕上繪製的方法，使用的是點陣而不是向量。 儘管動畫是可能的，但不如其他選項高效。...