7.2 Web Animations APIWeb Animations API簡稱 WAAPI是 W3C 標準化的原生 JavaScript 動畫接口它將 CSS 動畫、SVG 動畫的底層能力統(tǒng)一暴露給 JavaScript既保留了 CSS 動畫的 GPU 加速、合成線程渲染的性能優(yōu)勢又具備 JavaScript 的動態(tài)性與可控性。它彌補了 CSS 動畫難以動態(tài)傳參、無法實時控制播放流程的不足是復(fù)雜交互動畫、動態(tài)業(yè)務(wù)動效的標準實現(xiàn)方案。7.2.1 element.animate() 基礎(chǔ)用法element.animate()是 WAAPI 的核心入口方法用于在 DOM 元素上快速創(chuàng)建并播放動畫直接傳入關(guān)鍵幀與配置參數(shù)即可生成動畫實例無需預(yù)定義 CSS 規(guī)則。一、核心語法const animation element.animate(keyframes, options);參數(shù)1keyframes動畫關(guān)鍵幀集合定義動畫各階段的樣式狀態(tài)參數(shù)2options動畫配置參數(shù)控制時長、次數(shù)、緩動等全局行為返回值A(chǔ)nimation實例對象用于后續(xù)的播放控制與狀態(tài)監(jiān)聽二、關(guān)鍵幀的兩種寫法1. 數(shù)組形式多幀完整寫法數(shù)組中每個對象對應(yīng)一個關(guān)鍵幀瀏覽器自動均勻分配幀的時間位置適合 2 幀以上的復(fù)雜動畫。const keyframes [ { opacity: 0, transform: translateY(30px) }, // 起始幀0% { opacity: 1, transform: translateY(0) } // 結(jié)束幀100% ];也支持通過offset屬性手動指定幀的百分比位置const keyframes [ { opacity: 0, offset: 0 }, { opacity: 0.5, offset: 0.3 }, { opacity: 1, offset: 1 } ];2. 對象形式兩幀簡寫僅需起始與結(jié)束兩個狀態(tài)時可直接傳入對象瀏覽器自動解析為兩幀動畫寫法更簡潔。const keyframes { opacity: [0, 1], transform: [translateY(30px), translateY(0)] };三、核心配置選項options為動畫全局配置完整對應(yīng) CSS 動畫的能力同時支持更精細的時序控制。配置項類型說明對應(yīng) CSS 屬性durationnumber單次動畫時長單位毫秒animation-durationdelaynumber動畫延遲播放時間單位毫秒animation-delayeasingstring動畫緩動函數(shù)animation-timing-functioniterationsnumber播放次數(shù)Infinity為無限循環(huán)animation-iteration-countdirectionstring播放方向normal/reverse/alternateanimation-directionfillstring填充模式none/forwards/backwards/bothanimation-fill-modeendDelaynumber動畫結(jié)束后的延遲時間單位毫秒無對應(yīng) CSS 屬性四、基礎(chǔ)示例const box document.querySelector(.box); // 創(chuàng)建并播放淡入上移動畫 const fadeInAnim box.animate( [ { opacity: 0, transform: translateY(20px) }, { opacity: 1, transform: translateY(0) } ], { duration: 500, easing: ease-out, fill: forwards } );7.2.2 動畫控制暫停、恢復(fù)、取消、反轉(zhuǎn)animate()返回的Animation實例提供了完整的播放控制方法支持對動畫進行實時的暫停、恢復(fù)、跳轉(zhuǎn)、反轉(zhuǎn)等操作這是 WAAPI 相比 CSS 動畫最核心的優(yōu)勢。一、核心控制方法方法作用說明play()播放動畫從當(dāng)前暫停位置繼續(xù)播放或從頭開始播放已取消的動畫pause()暫停動畫凍結(jié)在當(dāng)前幀保留當(dāng)前播放進度cancel()取消動畫終止動畫并重置到初始狀態(tài)元素樣式恢復(fù)到動畫前reverse()反轉(zhuǎn)播放從當(dāng)前位置反向播放播放方向翻轉(zhuǎn)finish()結(jié)束動畫直接跳轉(zhuǎn)到動畫結(jié)束狀態(tài)觸發(fā)finish事件二、播放狀態(tài)屬性通過animation.playState可實時讀取動畫的當(dāng)前狀態(tài)返回枚舉值running正在播放paused已暫停finished已完成idle空閑未播放三、控制示例const anim box.animate([/* 關(guān)鍵幀 */], { duration: 1000 }); // 暫停播放 document.querySelector(#pauseBtn).addEventListener(click, () { anim.pause(); console.log(anim.playState); // paused }); // 恢復(fù)播放 document.querySelector(#playBtn).addEventListener(click, () { anim.play(); }); // 反轉(zhuǎn)播放 document.querySelector(#reverseBtn).addEventListener(click, () { anim.reverse(); }); // 取消動畫 document.querySelector(#cancelBtn).addEventListener(click, () { anim.cancel(); });四、finish 與 cancel 的核心區(qū)別finish()直接跳到動畫結(jié)束幀保留動畫結(jié)束后的樣式受 fill 影響觸發(fā)finish事件屬于正常結(jié)束。cancel()直接終止動畫元素樣式恢復(fù)到動畫開始前的狀態(tài)觸發(fā)cancel事件屬于強制中斷。7.2.3 動畫時序與緩動控制WAAPI 提供了比 CSS 動畫更精細的時序控制能力與更靈活的緩動配置支持精準到毫秒的進度跳轉(zhuǎn)、單幀獨立緩動等高級能力。一、精準時序控制1. 當(dāng)前時間讀寫通過animation.currentTime可以直接讀取或設(shè)置動畫的當(dāng)前播放時間單位毫秒實現(xiàn)任意進度跳轉(zhuǎn)、進度拖拽等交互這是 CSS 動畫無法實現(xiàn)的能力。// 獲取當(dāng)前播放進度時間 console.log(anim.currentTime); // 250 // 直接跳轉(zhuǎn)到 500ms 位置 anim.currentTime 500;2. 首尾延遲控制除了常規(guī)的開始延遲delay還支持endDelay結(jié)束延遲在動畫結(jié)束后、觸發(fā)完成事件前插入等待時間用于多動畫序列的時間對齊。element.animate(keyframes, { duration: 300, delay: 100, // 開始前延遲100ms endDelay: 200 // 結(jié)束后延遲200ms再觸發(fā)完成事件 });3. 迭代起始點通過iterationStart可以設(shè)置動畫從第幾次迭代的什么位置開始播放支持非整數(shù)次迭代適合中途入場的循環(huán)動畫。// 無限循環(huán)動畫從第2.5次迭代開始播放 element.animate(keyframes, { iterations: Infinity, iterationStart: 2.5 });二、緩動控制1. 全局緩動在 options 中配置easing作用于整個動畫的所有關(guān)鍵幀之間與 CSS 緩動完全兼容。{ easing: cubic-bezier(0.4, 0, 0.2, 1) // 自定義貝塞爾曲線 }支持所有 CSS 緩動關(guān)鍵字linear、ease、ease-in、ease-out、ease-in-out以及steps()階躍函數(shù)。2. 單幀獨立緩動WAAPI 支持給單個關(guān)鍵幀設(shè)置easing緩動作用于當(dāng)前幀到下一幀之間實現(xiàn)同一段動畫中不同階段不同的運動曲線靈活性遠超 CSS 動畫。const keyframes [ { transform: translateX(0), easing: ease-in }, // 0%-50% 加速 { transform: translateX(100px), easing: ease-out }, // 50%-100% 減速 { transform: translateX(200px) } ];三、動畫事件WAAPI 提供 Promise 化的事件與傳統(tǒng)事件兩種方式監(jiān)聽動畫生命周期節(jié)點// Promise 方式動畫完成回調(diào) anim.finished.then(() { console.log(動畫播放完成); }); // 傳統(tǒng)事件方式 anim.addEventListener(finish, () { console.log(動畫結(jié)束); }); anim.addEventListener(cancel, () { console.log(動畫被取消); });四、適用場景需要動態(tài)控制播放、暫停、進度的交互動畫參數(shù)動態(tài)計算的業(yè)務(wù)動效如根據(jù)數(shù)據(jù)決定動畫幅度多動畫序列編排、精準時間對齊的復(fù)雜動效無法通過 CSS 類切換實現(xiàn)的動態(tài)生成動畫 Web Animation API
7.2 Web Animations APIWeb Animations API簡稱 WAAPI是 W3C 標準化的原生 JavaScript 動畫接口它將 CSS 動畫、SVG 動畫的底層能力統(tǒng)一暴露給 JavaScript既保留了 CSS 動畫的 GPU 加速、合成線程渲染的性能優(yōu)勢又具備 JavaScript 的動態(tài)性與可控性。它彌補了 CSS 動畫難以動態(tài)傳參、無法實時控制播放流程的不足是復(fù)雜交互動畫、動態(tài)業(yè)務(wù)動效的標準實現(xiàn)方案。7.2.1 element.animate() 基礎(chǔ)用法element.animate()是 WAAPI 的核心入口方法用于在 DOM 元素上快速創(chuàng)建并播放動畫直接傳入關(guān)鍵幀與配置參數(shù)即可生成動畫實例無需預(yù)定義 CSS 規(guī)則。一、核心語法const animation element.animate(keyframes, options);參數(shù)1keyframes動畫關(guān)鍵幀集合定義動畫各階段的樣式狀態(tài)參數(shù)2options動畫配置參數(shù)控制時長、次數(shù)、緩動等全局行為返回值A(chǔ)nimation實例對象用于后續(xù)的播放控制與狀態(tài)監(jiān)聽二、關(guān)鍵幀的兩種寫法1. 數(shù)組形式多幀完整寫法數(shù)組中每個對象對應(yīng)一個關(guān)鍵幀瀏覽器自動均勻分配幀的時間位置適合 2 幀以上的復(fù)雜動畫。const keyframes [ { opacity: 0, transform: translateY(30px) }, // 起始幀0% { opacity: 1, transform: translateY(0) } // 結(jié)束幀100% ];也支持通過offset屬性手動指定幀的百分比位置const keyframes [ { opacity: 0, offset: 0 }, { opacity: 0.5, offset: 0.3 }, { opacity: 1, offset: 1 } ];2. 對象形式兩幀簡寫僅需起始與結(jié)束兩個狀態(tài)時可直接傳入對象瀏覽器自動解析為兩幀動畫寫法更簡潔。const keyframes { opacity: [0, 1], transform: [translateY(30px), translateY(0)] };三、核心配置選項options為動畫全局配置完整對應(yīng) CSS 動畫的能力同時支持更精細的時序控制。配置項類型說明對應(yīng) CSS 屬性durationnumber單次動畫時長單位毫秒animation-durationdelaynumber動畫延遲播放時間單位毫秒animation-delayeasingstring動畫緩動函數(shù)animation-timing-functioniterationsnumber播放次數(shù)Infinity為無限循環(huán)animation-iteration-countdirectionstring播放方向normal/reverse/alternateanimation-directionfillstring填充模式none/forwards/backwards/bothanimation-fill-modeendDelaynumber動畫結(jié)束后的延遲時間單位毫秒無對應(yīng) CSS 屬性四、基礎(chǔ)示例const box document.querySelector(.box); // 創(chuàng)建并播放淡入上移動畫 const fadeInAnim box.animate( [ { opacity: 0, transform: translateY(20px) }, { opacity: 1, transform: translateY(0) } ], { duration: 500, easing: ease-out, fill: forwards } );7.2.2 動畫控制暫停、恢復(fù)、取消、反轉(zhuǎn)animate()返回的Animation實例提供了完整的播放控制方法支持對動畫進行實時的暫停、恢復(fù)、跳轉(zhuǎn)、反轉(zhuǎn)等操作這是 WAAPI 相比 CSS 動畫最核心的優(yōu)勢。一、核心控制方法方法作用說明play()播放動畫從當(dāng)前暫停位置繼續(xù)播放或從頭開始播放已取消的動畫pause()暫停動畫凍結(jié)在當(dāng)前幀保留當(dāng)前播放進度cancel()取消動畫終止動畫并重置到初始狀態(tài)元素樣式恢復(fù)到動畫前reverse()反轉(zhuǎn)播放從當(dāng)前位置反向播放播放方向翻轉(zhuǎn)finish()結(jié)束動畫直接跳轉(zhuǎn)到動畫結(jié)束狀態(tài)觸發(fā)finish事件二、播放狀態(tài)屬性通過animation.playState可實時讀取動畫的當(dāng)前狀態(tài)返回枚舉值running正在播放paused已暫停finished已完成idle空閑未播放三、控制示例const anim box.animate([/* 關(guān)鍵幀 */], { duration: 1000 }); // 暫停播放 document.querySelector(#pauseBtn).addEventListener(click, () { anim.pause(); console.log(anim.playState); // paused }); // 恢復(fù)播放 document.querySelector(#playBtn).addEventListener(click, () { anim.play(); }); // 反轉(zhuǎn)播放 document.querySelector(#reverseBtn).addEventListener(click, () { anim.reverse(); }); // 取消動畫 document.querySelector(#cancelBtn).addEventListener(click, () { anim.cancel(); });四、finish 與 cancel 的核心區(qū)別finish()直接跳到動畫結(jié)束幀保留動畫結(jié)束后的樣式受 fill 影響觸發(fā)finish事件屬于正常結(jié)束。cancel()直接終止動畫元素樣式恢復(fù)到動畫開始前的狀態(tài)觸發(fā)cancel事件屬于強制中斷。7.2.3 動畫時序與緩動控制WAAPI 提供了比 CSS 動畫更精細的時序控制能力與更靈活的緩動配置支持精準到毫秒的進度跳轉(zhuǎn)、單幀獨立緩動等高級能力。一、精準時序控制1. 當(dāng)前時間讀寫通過animation.currentTime可以直接讀取或設(shè)置動畫的當(dāng)前播放時間單位毫秒實現(xiàn)任意進度跳轉(zhuǎn)、進度拖拽等交互這是 CSS 動畫無法實現(xiàn)的能力。// 獲取當(dāng)前播放進度時間 console.log(anim.currentTime); // 250 // 直接跳轉(zhuǎn)到 500ms 位置 anim.currentTime 500;2. 首尾延遲控制除了常規(guī)的開始延遲delay還支持endDelay結(jié)束延遲在動畫結(jié)束后、觸發(fā)完成事件前插入等待時間用于多動畫序列的時間對齊。element.animate(keyframes, { duration: 300, delay: 100, // 開始前延遲100ms endDelay: 200 // 結(jié)束后延遲200ms再觸發(fā)完成事件 });3. 迭代起始點通過iterationStart可以設(shè)置動畫從第幾次迭代的什么位置開始播放支持非整數(shù)次迭代適合中途入場的循環(huán)動畫。// 無限循環(huán)動畫從第2.5次迭代開始播放 element.animate(keyframes, { iterations: Infinity, iterationStart: 2.5 });二、緩動控制1. 全局緩動在 options 中配置easing作用于整個動畫的所有關(guān)鍵幀之間與 CSS 緩動完全兼容。{ easing: cubic-bezier(0.4, 0, 0.2, 1) // 自定義貝塞爾曲線 }支持所有 CSS 緩動關(guān)鍵字linear、ease、ease-in、ease-out、ease-in-out以及steps()階躍函數(shù)。2. 單幀獨立緩動WAAPI 支持給單個關(guān)鍵幀設(shè)置easing緩動作用于當(dāng)前幀到下一幀之間實現(xiàn)同一段動畫中不同階段不同的運動曲線靈活性遠超 CSS 動畫。const keyframes [ { transform: translateX(0), easing: ease-in }, // 0%-50% 加速 { transform: translateX(100px), easing: ease-out }, // 50%-100% 減速 { transform: translateX(200px) } ];三、動畫事件WAAPI 提供 Promise 化的事件與傳統(tǒng)事件兩種方式監(jiān)聽動畫生命周期節(jié)點// Promise 方式動畫完成回調(diào) anim.finished.then(() { console.log(動畫播放完成); }); // 傳統(tǒng)事件方式 anim.addEventListener(finish, () { console.log(動畫結(jié)束); }); anim.addEventListener(cancel, () { console.log(動畫被取消); });四、適用場景需要動態(tài)控制播放、暫停、進度的交互動畫參數(shù)動態(tài)計算的業(yè)務(wù)動效如根據(jù)數(shù)據(jù)決定動畫幅度多動畫序列編排、精準時間對齊的復(fù)雜動效無法通過 CSS 類切換實現(xiàn)的動態(tài)生成動畫