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