7.2 Web Animations APIWeb Animations API簡稱 WAAPI是 W3C 標(biāo)準(zhǔn)化的原生 JavaScript 動畫接口它將 CSS 動畫、SVG 動畫的底層能力統(tǒng)一暴露給 JavaScript既保留了 CSS 動畫的 GPU 加速、合成線程渲染的性能優(yōu)勢又具備 JavaScript 的動態(tài)性與可控性。它彌補(bǔ)了 CSS 動畫難以動態(tài)傳參、無法實(shí)時控制播放流程的不足是復(fù)雜交互動畫、動態(tài)業(yè)務(wù)動效的標(biāo)準(zhǔn)實(shí)現(xiàn)方案。7.2.1 element.animate() 基礎(chǔ)用法element.animate()是 WAAPI 的核心入口方法用于在 DOM 元素上快速創(chuàng)建并播放動畫直接傳入關(guān)鍵幀與配置參數(shù)即可生成動畫實(shí)例無需預(yù)定義 CSS 規(guī)則。一、核心語法const animation element.animate(keyframes, options);參數(shù)1keyframes動畫關(guān)鍵幀集合定義動畫各階段的樣式狀態(tài)參數(shù)2options動畫配置參數(shù)控制時長、次數(shù)、緩動等全局行為返回值A(chǔ)nimation實(shí)例對象用于后續(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)] };三、核心配置選項(xiàng)options為動畫全局配置完整對應(yīng) CSS 動畫的能力同時支持更精細(xì)的時序控制。配置項(xiàng)類型說明對應(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實(shí)例提供了完整的播放控制方法支持對動畫進(jìn)行實(shí)時的暫停、恢復(fù)、跳轉(zhuǎn)、反轉(zhuǎn)等操作這是 WAAPI 相比 CSS 動畫最核心的優(yōu)勢。一、核心控制方法方法作用說明play()播放動畫從當(dāng)前暫停位置繼續(xù)播放或從頭開始播放已取消的動畫pause()暫停動畫凍結(jié)在當(dāng)前幀保留當(dāng)前播放進(jìn)度cancel()取消動畫終止動畫并重置到初始狀態(tài)元素樣式恢復(fù)到動畫前reverse()反轉(zhuǎn)播放從當(dāng)前位置反向播放播放方向翻轉(zhuǎn)finish()結(jié)束動畫直接跳轉(zhuǎn)到動畫結(jié)束狀態(tài)觸發(fā)finish事件二、播放狀態(tài)屬性通過animation.playState可實(shí)時讀取動畫的當(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事件屬于強(qiáng)制中斷。7.2.3 動畫時序與緩動控制WAAPI 提供了比 CSS 動畫更精細(xì)的時序控制能力與更靈活的緩動配置支持精準(zhǔn)到毫秒的進(jìn)度跳轉(zhuǎn)、單幀獨(dú)立緩動等高級能力。一、精準(zhǔn)時序控制1. 當(dāng)前時間讀寫通過animation.currentTime可以直接讀取或設(shè)置動畫的當(dāng)前播放時間單位毫秒實(shí)現(xiàn)任意進(jìn)度跳轉(zhuǎn)、進(jìn)度拖拽等交互這是 CSS 動畫無法實(shí)現(xiàn)的能力。// 獲取當(dāng)前播放進(jìn)度時間 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. 迭代起始點(diǎn)通過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. 單幀獨(dú)立緩動WAAPI 支持給單個關(guān)鍵幀設(shè)置easing緩動作用于當(dāng)前幀到下一幀之間實(shí)現(xiàn)同一段動畫中不同階段不同的運(yùn)動曲線靈活性遠(yuǎ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é)點(diǎn)// Promise 方式動畫完成回調(diào) anim.finished.then(() { console.log(動畫播放完成); }); // 傳統(tǒng)事件方式 anim.addEventListener(finish, () { console.log(動畫結(jié)束); }); anim.addEventListener(cancel, () { console.log(動畫被取消); });四、適用場景需要動態(tài)控制播放、暫停、進(jìn)度的交互動畫參數(shù)動態(tài)計(jì)算的業(yè)務(wù)動效如根據(jù)數(shù)據(jù)決定動畫幅度多動畫序列編排、精準(zhǔn)時間對齊的復(fù)雜動效無法通過 CSS 類切換實(shí)現(xiàn)的動態(tài)生成動畫 Web Animation API
7.2 Web Animations APIWeb Animations API簡稱 WAAPI是 W3C 標(biāo)準(zhǔn)化的原生 JavaScript 動畫接口它將 CSS 動畫、SVG 動畫的底層能力統(tǒng)一暴露給 JavaScript既保留了 CSS 動畫的 GPU 加速、合成線程渲染的性能優(yōu)勢又具備 JavaScript 的動態(tài)性與可控性。它彌補(bǔ)了 CSS 動畫難以動態(tài)傳參、無法實(shí)時控制播放流程的不足是復(fù)雜交互動畫、動態(tài)業(yè)務(wù)動效的標(biāo)準(zhǔn)實(shí)現(xiàn)方案。7.2.1 element.animate() 基礎(chǔ)用法element.animate()是 WAAPI 的核心入口方法用于在 DOM 元素上快速創(chuàng)建并播放動畫直接傳入關(guān)鍵幀與配置參數(shù)即可生成動畫實(shí)例無需預(yù)定義 CSS 規(guī)則。一、核心語法const animation element.animate(keyframes, options);參數(shù)1keyframes動畫關(guān)鍵幀集合定義動畫各階段的樣式狀態(tài)參數(shù)2options動畫配置參數(shù)控制時長、次數(shù)、緩動等全局行為返回值A(chǔ)nimation實(shí)例對象用于后續(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)] };三、核心配置選項(xiàng)options為動畫全局配置完整對應(yīng) CSS 動畫的能力同時支持更精細(xì)的時序控制。配置項(xiàng)類型說明對應(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實(shí)例提供了完整的播放控制方法支持對動畫進(jìn)行實(shí)時的暫停、恢復(fù)、跳轉(zhuǎn)、反轉(zhuǎn)等操作這是 WAAPI 相比 CSS 動畫最核心的優(yōu)勢。一、核心控制方法方法作用說明play()播放動畫從當(dāng)前暫停位置繼續(xù)播放或從頭開始播放已取消的動畫pause()暫停動畫凍結(jié)在當(dāng)前幀保留當(dāng)前播放進(jìn)度cancel()取消動畫終止動畫并重置到初始狀態(tài)元素樣式恢復(fù)到動畫前reverse()反轉(zhuǎn)播放從當(dāng)前位置反向播放播放方向翻轉(zhuǎn)finish()結(jié)束動畫直接跳轉(zhuǎn)到動畫結(jié)束狀態(tài)觸發(fā)finish事件二、播放狀態(tài)屬性通過animation.playState可實(shí)時讀取動畫的當(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事件屬于強(qiáng)制中斷。7.2.3 動畫時序與緩動控制WAAPI 提供了比 CSS 動畫更精細(xì)的時序控制能力與更靈活的緩動配置支持精準(zhǔn)到毫秒的進(jìn)度跳轉(zhuǎn)、單幀獨(dú)立緩動等高級能力。一、精準(zhǔn)時序控制1. 當(dāng)前時間讀寫通過animation.currentTime可以直接讀取或設(shè)置動畫的當(dāng)前播放時間單位毫秒實(shí)現(xiàn)任意進(jìn)度跳轉(zhuǎn)、進(jìn)度拖拽等交互這是 CSS 動畫無法實(shí)現(xiàn)的能力。// 獲取當(dāng)前播放進(jìn)度時間 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. 迭代起始點(diǎn)通過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. 單幀獨(dú)立緩動WAAPI 支持給單個關(guān)鍵幀設(shè)置easing緩動作用于當(dāng)前幀到下一幀之間實(shí)現(xiàn)同一段動畫中不同階段不同的運(yùn)動曲線靈活性遠(yuǎ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é)點(diǎn)// Promise 方式動畫完成回調(diào) anim.finished.then(() { console.log(動畫播放完成); }); // 傳統(tǒng)事件方式 anim.addEventListener(finish, () { console.log(動畫結(jié)束); }); anim.addEventListener(cancel, () { console.log(動畫被取消); });四、適用場景需要動態(tài)控制播放、暫停、進(jìn)度的交互動畫參數(shù)動態(tài)計(jì)算的業(yè)務(wù)動效如根據(jù)數(shù)據(jù)決定動畫幅度多動畫序列編排、精準(zhǔn)時間對齊的復(fù)雜動效無法通過 CSS 類切換實(shí)現(xiàn)的動態(tài)生成動畫