前一陣子在做 CSS 動畫的時候，遇到了特定情況會希望動畫重新開始的狀況 像是每點擊一次按鈕就觸發一次動畫的情境，查了一下相關的做法．記錄在這 舉個例子，我們有個 fade-in 的動畫，希望在點擊文字時重新開始動畫 這時候你可能會很直覺認為再次添加 fade-in class ，像是以下這樣 See the Pen restart css animation by camel2243 (@camel2243) on CodePen. 然後你會發現不 work，於是直覺會想說那先做 remove 再 add XD See the Pen css animation demo1 by camel2243 (@camel2243) on CodePen. 結果發現還是不會動，只好開 setTimeout 大絕 www See the Pen css animation demo3 by camel2243 (@camel2243) on CodePen. 雖然看起來不是很好，但是 […]
之前看到了 requestAnimationFrame 的實作改善了原本使用 setTimeout 與 setInterval 所繪製動畫可能造成的效能問題。(相關文章) 於是想說來試著比較看看目前 css3 animation 與 使用 requestAnimationFrame 的 FPS 差異。 我只打算測試看看 chrome 跟 firefox，因為懶惰XD 首先我們先試著打開瀏覽器 dev tool 中的 FPS 監視器。 chrome 的開啟選項如下圖 打開此選項後，我們可以看到目前的 FPS 及使用的記憶體等資訊。 接下來我們嘗試寫一段 requestAnimationFrame 與 css3 animation 的程式碼 我們可以切換上面這段動畫所實作的方式( requestAnimationFrame 或 css3 animation) 我自己實測 Chrome: requestAnimationFrame 的 FPS 大概在 20-25，GPU 記憶體使用量為 7.5 MB css3 animation FPS則維持 60FPS，GPU 記憶體使用量為7.5 MB […]