SiriWave 使用教程3 分鐘讓網(wǎng)頁(yè)擁有蘋(píng)果同款 Siri 波形動(dòng)畫(huà)【免費(fèi)下載鏈接】siriwaveThe Apple? Siri wave-form replicated in a JS library.項(xiàng)目地址: https://gitcode.com/gh_mirrors/si/siriwave想讓網(wǎng)頁(yè)擁有蘋(píng)果 Siri 那種標(biāo)志性的波形反饋SiriWave 這個(gè)純 JavaScript 波形動(dòng)畫(huà)庫(kù)用 Canvas API 完整復(fù)刻了它不依賴任何框架new一個(gè)實(shí)例幾行代碼就能點(diǎn)亮動(dòng)態(tài)波形。做語(yǔ)音交互頁(yè)面時(shí)這種我正在聽(tīng)的視覺(jué)反饋往往比識(shí)別結(jié)果更影響整體體驗(yàn)。語(yǔ)音反饋是門手藝活為什么大家都在復(fù)刻這條波形回想一下你用過(guò)的手寫(xiě)語(yǔ)音助手頁(yè)面有些用一個(gè)靜止的小圓點(diǎn)表示請(qǐng)說(shuō)話有些干脆什么都不顯示用戶盯著屏幕完全不知道系統(tǒng)有沒(méi)有在收音。蘋(píng)果 Siri 的波形之所以經(jīng)典是因?yàn)樗闷鸱木€條傳遞了三層信息——我已經(jīng)醒了我正在聽(tīng)以及聲音的強(qiáng)度有多大。想自己用原生 Canvas 從零實(shí)現(xiàn)你得處理正弦波疊加、衰減包絡(luò)、逐幀重繪、像素比適配……一套折騰下來(lái)大半天就沒(méi)了。SiriWave 的價(jià)值就在于把這些數(shù)學(xué)細(xì)節(jié)全部封裝好讓你專注在什么時(shí)候開(kāi)、什么時(shí)候停、振幅給多少這些業(yè)務(wù)問(wèn)題上。SiriWave 的原理很簡(jiǎn)單正弦波、衰減與畫(huà)布重繪項(xiàng)目源碼用 TypeScript 編寫(xiě)編譯后提供 ESM 和 UMD 兩種格式任何支持 Canvas 的瀏覽器都能跑。動(dòng)畫(huà)核心是一個(gè)由requestAnimationFrame驅(qū)動(dòng)的循環(huán)每幀先清空畫(huà)布再按當(dāng)前相位重新描邊phase每次遞增波形就流起來(lái)了。經(jīng)典 iOS 風(fēng)格5 條不同衰減系數(shù)、透明度和線寬的正弦波疊加形成層層包裹的立體感iOS9 風(fēng)格幾條彩色子波各自隨機(jī)出生振幅從小到大再慢慢消散再配一條支撐線看起來(lái)像熒光在呼吸。如果你好奇作者是怎么算這些曲線的倉(cāng)庫(kù)里 src/classic-curve.ts 和 src/ios9-curve.ts 就是全部答案而且連設(shè)計(jì)圖紙都留了——etc/gcx/ 目錄下的.gcx文件是 macOS Grapher 繪制的原始函數(shù)圖拿來(lái)做波形設(shè)計(jì)的參考非常直觀。三種風(fēng)格怎么選經(jīng)典 iOS、iOS9 熒光波與未完成的 iOS13SiriWave 目前內(nèi)置兩種成熟風(fēng)格通過(guò)構(gòu)造參數(shù)的style字段切換默認(rèn)是ios。經(jīng)典 iOS 風(fēng)格——低飽和的白色多層波形克制、耐看適合想要低調(diào)致敬的場(chǎng)景iOS9 熒光風(fēng)格——三條彩色曲線配一條白色支撐線動(dòng)起來(lái)自帶發(fā)光感視覺(jué)沖擊力更強(qiáng)至于 iOS13 的氣泡式波形作者在 README 里標(biāo)注了work in progress目前還不能直接使用但這條路線說(shuō)明庫(kù)的玩法上限遠(yuǎn)不止兩種風(fēng)格。三步完成環(huán)境搭建安裝、掛載、點(diǎn)亮第一條波形第一步安裝依賴npm install siriwave第二步在頁(yè)面里放一個(gè)容器div idwave stylewidth: 640px; height: 200px;/div第三步實(shí)例化并啟動(dòng)import SiriWave from siriwave; const wave new SiriWave({ container: document.getElementById(wave), style: ios9, // 換一種風(fēng)格 width: 640, height: 200, autostart: true, // 實(shí)例化后立即播放 });如果你只想快速看效果不用寫(xiě)任何構(gòu)建步驟——庫(kù)的 UMD 包直接script引入即可倉(cāng)庫(kù)里的 index.html 就是現(xiàn)成 demo它還內(nèi)置了 dat.GUI 面板可以在瀏覽器里實(shí)時(shí)拖動(dòng)速度、振幅和顏色滑塊觀察變化。參數(shù)調(diào)校速度、振幅與頻率分別影響什么SiriWave 的可調(diào)參數(shù)不算少但每個(gè)都很好理解speed波形流動(dòng)的快慢默認(rèn)0.2amplitude整條波形的高度默認(rèn)1frequency波的密集程度僅經(jīng)典 iOS 風(fēng)格可用默認(rèn)6color波形顏色僅經(jīng)典 iOS 風(fēng)格可用默認(rèn)#fffcover是否讓畫(huà)布鋪滿容器適合做全屏背景autostart是否創(chuàng)建后立即開(kāi)始動(dòng)畫(huà)pixelDepth描點(diǎn)步長(zhǎng)越小曲線越平滑默認(rèn)0.02lerpSpeed屬性過(guò)渡插值速度默認(rèn)0.1ratio按設(shè)備像素比適配默認(rèn)自動(dòng)計(jì)算。iOS9 風(fēng)格還額外支持ranges參數(shù)用來(lái)覆蓋每條子波的隨機(jī)取值范圍數(shù)量、振幅、寬度、速度、消散時(shí)間等。想讓波形更鬧騰就把振幅范圍調(diào)大想讓它更安靜把數(shù)量壓到 2 條就行。進(jìn)階玩法用 curveDefinition 定制專屬波形不想局限于內(nèi)置風(fēng)格curveDefinition會(huì)給你驚喜。經(jīng)典風(fēng)格下你只需提供一個(gè)包含attenuation、lineWidth、opacity的數(shù)組每條定義對(duì)應(yīng)一條正弦波const wave new SiriWave({ container: document.getElementById(wave), curveDefinition: [ { attenuation: -2, lineWidth: 1, opacity: 0.1 }, { attenuation: -6, lineWidth: 1, opacity: 0.2 }, { attenuation: 4, lineWidth: 1, opacity: 0.4 }, { attenuation: 2, lineWidth: 1, opacity: 0.6 }, { attenuation: 1, lineWidth: 1.5, opacity: 1 }, ], });iOS9 風(fēng)格的curveDefinition則是配置每條彩色波藍(lán)、紅、綠和那條必須存在的supportLine。大膽改改數(shù)字你很可能得到一套完全屬于自己的波形這也是這個(gè)庫(kù)最上頭的地方。常用 API 與兩個(gè)實(shí)用提醒控制動(dòng)畫(huà)的 API 很精簡(jiǎn)全程無(wú)記憶負(fù)擔(dān)方法作用start()啟動(dòng)動(dòng)畫(huà)stop()停止動(dòng)畫(huà)并重置相位setSpeed(value)平滑切換速度setAmplitude(value)平滑切換振幅dispose()停止動(dòng)畫(huà)并銷毀畫(huà)布兩個(gè)提醒setSpeed和setAmplitude是插值過(guò)渡而非瞬變參數(shù)變化時(shí)會(huì)像真實(shí)聲波一樣漸變過(guò)去別誤以為是響應(yīng)遲緩另外dispose()之后實(shí)例就無(wú)法再start()需要重新創(chuàng)建。想接麥克風(fēng)輸入做真實(shí)的跟隨人聲效果社區(qū)已經(jīng)提供了可行的集成思路稍加改造即可。想深入源碼或本地調(diào)試把鏡像倉(cāng)庫(kù)克隆下來(lái)再運(yùn)行npm dev就能得到帶熱更新的實(shí)時(shí)演示環(huán)境git clone https://gitcode.com/gh_mirrors/si/siriwave npm install npm dev說(shuō)到底SiriWave 把蘋(píng)果感最難啃的那塊骨頭替你啃完了剩下的顏色、速度、風(fēng)格都由你做主。下次再做語(yǔ)音交互頁(yè)面別忘了給用戶一條會(huì)呼吸的波形。?【免費(fèi)下載鏈接】siriwaveThe Apple? Siri wave-form replicated in a JS library.項(xiàng)目地址: https://gitcode.com/gh_mirrors/si/siriwave創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考