要直接控制動畫暫停和繼續(xù)，可通過操控animation-play-state屬性或使用requestanimationframe實現(xiàn)。對于css動畫，使用element.style.animationplaystate設(shè)置為’paused’或’running’即可暫停或繼續(xù)；對于JS動畫，需維護isrunning標(biāo)志位并使用requestanimationframe控制循環(huán)。平滑控制可通過transition過渡、記錄動畫進度或使用緩動函數(shù)實現(xiàn)。多個動畫屬性可分別封裝控制函數(shù)或通過css變量統(tǒng)一管理。優(yōu)化卡頓問題應(yīng)使用requestanimationframe、減少dom操作、優(yōu)先使用transform和opacity、避免復(fù)雜計算、優(yōu)化圖片資源、啟用硬件加速、避免阻塞主線程，并借助性能分析工具持續(xù)優(yōu)化。
直接控制動畫暫停和繼續(xù)，其實就是操控動畫的播放狀態(tài)。在JS中，我們可以通過修改元素的css屬性來實現(xiàn)，但具體怎么做，還得看你用的是哪種動畫。
解決方案
對于CSS動畫，核心是animation-play-state屬性。JS的作用就是切換這個屬性的值。
立即學(xué)習(xí)“前端免費學(xué)習(xí)筆記（深入）”；
// 獲取需要控制的元素 const element = document.getElementById('myElement'); // 暫停動畫 function pauseAnimation() { element.style.animationPlayState = 'paused'; } // 繼續(xù)動畫 function resumeAnimation() { element.style.animationPlayState = 'running'; } // 綁定按鈕點擊事件（示例） document.getElementById('pauseButton').addEventListener('click', pauseAnimation); document.getElementById('resumeButton').addEventListener('click', resumeAnimation);
這里，pauseAnimation函數(shù)將animationPlayState設(shè)置為paused，動畫就會暫停。resumeAnimation函數(shù)將其設(shè)置為running，動畫就會繼續(xù)。 簡單直接，對吧？
如果你的動畫是基于JavaScript實現(xiàn)的（例如使用requestAnimationFrame），那么控制就更加靈活了。你需要維護一個動畫是否正在運行的標(biāo)志位，并在動畫循環(huán)中根據(jù)這個標(biāo)志位來決定是否更新元素的狀態(tài)。
let animationId; let isRunning = false; function animate() { // 動畫邏輯，例如修改元素的位置 // ... if (isRunning) { animationId = requestAnimationFrame(animate); } } function startAnimation() { if (!isRunning) { isRunning = true; animationId = requestAnimationFrame(animate); } } function stopAnimation() { isRunning = false; cancelAnimationFrame(animationId); } document.getElementById('startButton').addEventListener('click', startAnimation); document.getElementById('stopButton').addEventListener('click', stopAnimation);
這種方式的優(yōu)點是可以更精細地控制動畫的每一幀，但復(fù)雜度也更高。
如何平滑地暫停和繼續(xù)CSS動畫？
直接切換animation-play-state有時會顯得生硬，動畫會瞬間停止或開始。想要更平滑的效果，可以考慮以下策略：
-
使用transition過渡到暫停狀態(tài)： 在暫停時，先將動畫速度設(shè)置為一個非常小的值（例如animation-duration: 0.001s），然后通過transition屬性平滑地過渡到暫停狀態(tài)。恢復(fù)時，再將動畫速度恢復(fù)到正常值。
-
記錄動畫進度： 在暫停時，記錄當(dāng)前動畫的進度（例如已播放的時間百分比），然后在恢復(fù)時，從記錄的進度開始播放。這需要更復(fù)雜的JS邏輯，但可以實現(xiàn)更精確的控制。
-
使用緩動函數(shù)： 選擇合適的緩動函數(shù)可以讓動畫的啟動和停止過程更加自然。例如，使用ease-in-out可以讓動畫在開始和結(jié)束時速度較慢，中間速度較快。
JS控制動畫時，如何處理多個動畫屬性？
當(dāng)元素有多個動畫屬性時，你需要分別控制每個屬性的播放狀態(tài)。 一個簡單的方法是，將每個動畫屬性的控制邏輯封裝成獨立的函數(shù)，然后分別調(diào)用這些函數(shù)。
function pauseAnimationX() { element.style.animationPlayStateX = 'paused'; } function resumeAnimationX() { element.style.animationPlayStateX = 'running'; } function pauseAnimationY() { element.style.animationPlayStateY = 'paused'; } function resumeAnimationY() { element.style.animationPlayStateY = 'running'; } // ...
更優(yōu)雅的方式是使用CSS變量和JS來統(tǒng)一控制。 例如，你可以定義一個CSS變量來表示動畫的播放狀態(tài)，然后在JS中修改這個變量的值。
:root { --animation-state: running; } .element { animation: myAnimation 2s linear var(--animation-state); }
function setAnimationState(state) { document.documentElement.style.setProperty('--animation-state', state); } function pauseAnimation() { setAnimationState('paused'); } function resumeAnimation() { setAnimationState('running'); }
這種方式的好處是可以更方便地控制多個動畫屬性，并且可以避免重復(fù)的代碼。
動畫卡頓怎么辦？如何優(yōu)化JS控制的動畫？
動畫卡頓是個常見問題，尤其是在復(fù)雜的頁面中。以下是一些優(yōu)化建議：
-
使用requestAnimationFrame： 這是瀏覽器提供的專門用于動畫的API，它可以確保動畫在最佳的時機執(zhí)行，避免不必要的重繪和回流。
-
避免頻繁操作DOM： DOM操作是昂貴的，盡量減少DOM操作的次數(shù)。可以將多個DOM操作合并成一次，或者使用DocumentFragment來批量更新DOM。
-
使用transform和opacity： 這兩個屬性的修改不會觸發(fā)回流，因此性能更好。盡量使用這兩個屬性來實現(xiàn)動畫效果。
-
避免復(fù)雜的計算： 復(fù)雜的計算會占用大量的CPU資源，導(dǎo)致動畫卡頓。盡量將計算放在后臺線程中進行，或者使用Web Workers。
-
優(yōu)化圖片資源： 大的圖片資源會占用大量的內(nèi)存和帶寬，導(dǎo)致動畫卡頓。盡量使用壓縮過的圖片，并使用合適的圖片格式。
-
使用硬件加速： 某些CSS屬性可以觸發(fā)硬件加速，例如transform和opacity。利用硬件加速可以提高動畫的性能。
-
避免阻塞主線程： 長時間的JS操作會阻塞主線程，導(dǎo)致動畫卡頓。使用setTimeout或requestIdleCallback將任務(wù)分解成小塊，避免長時間占用主線程。
記住，優(yōu)化是一個持續(xù)的過程，需要不斷地分析和改進。
