# :-: CSS動畫第二講 ***** [TOC] ## 1、復習上一節 ## 2、有人的地方，就有人養豬：動畫庫表來襲！ [https://animista.net/play/entrances](https://animista.net/play/entrances)（1、多，2、開，3、簡單） [https://animate.style/#accessibility](https://animate.style/#accessibility)（俺也一樣！） ## 3、動畫界的老大哥：requestAnimationFrame 目前大多數設備的屏幕刷新率為`60次/秒`，如果在頁面中有一個動畫或者漸變效果，或者用戶正在滾動頁面，那么瀏覽器渲染動畫或頁面的每一幀的速率也需要跟設備屏幕的刷新率保持一致。 **卡頓 **其中每個幀的預算時間僅比`16毫秒`多一點（`1秒/ 60 = 16.6毫秒`）。但實際上，瀏覽器有整理工作要做，因此您的所有工作是需要在`10毫秒`內完成。如果無法符合此預算，幀率將下降，并且內容會在屏幕上抖動。此現象通常稱為卡頓，會對用戶體驗產生負面影響。 **跳幀**: 假如動畫切換在 16ms, 32ms, 48ms時分別切換，跳幀就是假如到了32ms，其他任務還未執行完成，沒有去執行動畫切幀，等到開始進行動畫的切幀，已經到了該執行48ms的切幀。就好比你玩游戲的時候卡了，過了一會，你再看畫面，它不會停留你卡的地方，或者這時你的角色已經掛掉了。必須在下一幀開始之前就已經繪制完畢; requestAnimationFrame與`setTimeout`相比，`requestAnimationFrame`最大的優勢是****由系統來決定回調函數的執行時機。****具體一點講，如果屏幕刷新率是60Hz,那么回調函數就每16.7ms被執行一次，如果刷新率是75Hz，那么這個時間間隔就變成了1000/75=13.3ms，換句話說就是，`requestAnimationFrame`的步伐跟著系統的刷新步伐走。**它能保證回調函數在屏幕每一次的刷新間隔中只被執行一次**，這樣就不會引起丟幀現象，也不會導致動畫出現卡頓的問題。 var progress = 0; //回調函數 function render() { progress += 1; //修改圖像的位置 if (progress < 100) { //在動畫沒有結束前，遞歸渲染 window.requestAnimationFrame(render); } } //第一幀渲染 window.requestAnimationFrame(render); ``` var progress = 0; //回調函數 function render() { progress += 1; //執行動畫 if (progress < 100) { //在動畫沒有結束前，遞歸渲染 window.requestAnimationFrame(render); } } //第一幀渲染 window.requestAnimationFrame(render); ``` ## 4、 將數學知識運用到動畫中 繪制鐘表 ## 5、笑而不語的：拉塞貝爾曲線 ## 6、實戰干貨！！！VUE中搞定復雜動畫（40行VUE代碼 實現 原生500行代碼功能）