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），仅供参考