SiriWave：纯JavaScript实现的Siri波纹效果
项目地址: https://gitcode.com/gh_mirrors/si/siriwave SiriWave是一个开源的JavaScript库，它完美地复刻了苹果Siri在屏幕上的动态波纹动画。无需任何图形设计经验，只需几行代码，你就能将这种令人印象深刻的视觉效果引入到你的网页应用中。
项目技术分析
SiriWave利用HTML5的Canvas API来创建动画，实现了两种风格的波形：经典的iOS样式和iOS9引入的荧光风格。通过调整速度、振幅、频率等参数，你可以定制出适合各种场景的波纹效果。此外，该项目还支持自定义颜色、曲线定义和随机范围，为开发者提供了极大的灵活性。
应用场景
- 用户交互反馈：当用户点击按钮或进行其他操作时，展示SiriWave动画，以增加用户界面的趣味性和互动性。
- 音频可视化：结合麦克风输入，可以实时显示音量变化，创建音乐播放器的波形效果。
- 页面加载动画：在页面加载期间展示，给用户提供动态的等待体验。
使用方法
浏览器使用（通过CDN）
导入UMD包通过unpkg CDN即可使用：
<script src="https://unpkg.com/siriwave/dist/siriwave.umd.min.js"></script>
ES模块使用
首先通过npm install siriwave或npm add siriwave安装：
import SiriWave from "siriwave";
初始化
创建一个div容器并实例化一个新的SiriWave对象：
<div id="siri-container"></div>
<script>
var siriWave = new SiriWave({
container: document.getElementById("siri-container"),
width: 640,
height: 200,
});
</script>
构造函数选项
| 参数 | 类型 | 描述 | 默认值 | 必需 |
|---|---|---|---|---|
container | DOMElement | 将添加DOM canvas元素的DOM容器 | null | 是 |
style | "ios", "ios9" | 波纹的样式 | "ios" | 否 |
ratio | Number | 使用的显示比率，默认自动计算 | 自动计算 | 否 |
speed | Number | 动画的速度 | 0.2 | 否 |
amplitude | Number | 完整波形的振幅 | 1 | 否 |
frequency | Number | 完整波形的频率（有多少个波），仅在"ios"样式中可用 | 6 | 否 |
color | String | 波纹的颜色，仅在"ios"样式中可用 | "#fff" | 否 |
cover | Bool | canvas是否覆盖容器的整个宽度或高度 | false | 否 |
autostart | Bool | 是否在启动时开始动画 | false | 否 |
pixelDepth | Number | 在canvas上绘制时使用的步数（像素） | 0.02 | 否 |
lerpSpeed | Number | 插值属性的Lerp速度 | 0.01 | 否 |
curveDefinition | ICurveDefinition[] | 覆盖曲线的定义，查看上面获取更多详情 | null | 否 |
ranges | IiOS9Ranges | 覆盖曲线的默认随机范围 | null | 否 |
globalCompositeOperation | GlobalCompositeOperation | canvas的globalCompositeOperation，控制波纹重叠设计 | "lighter" | 否 |
iOS经典样式
这是经典的iOS 9之前的样式。
iOS9样式
这是在iOS9中引入的新荧光波纹。
API
start()
启动动画
stop()
停止动画。
setSpeed(newValue)
设置新的速度值（动画过渡）
setAmplitude(value)
设置新的振幅值（动画过渡）
dispose()
停止动画并销毁canvas，将其从DOM中移除。 在此SiriWave实例上后续的start()调用将失败并抛出异常。
曲线定义
通过传递此参数，您将覆盖默认的曲线定义，从而产生完全不同的样式。
ios经典样式的默认定义是：
[
{ 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 },
];
它产生5个具有不同参数和振幅的正弦波。
您可以为每条曲线设置4个属性：
attenuation：决定衰减的幂因子lineWidth：线宽opacity：不透明度color：颜色，默认为SiriWave.color；可选
ios9样式的定义是：
[
{ color: "255,255,255", supportLine: true },
{ color: "15, 82, 169" }, // 蓝色
{ color: "173, 57, 76" }, // 红色
{ color: "48, 220, 155" }, // 绿色
];
它产生3种不同颜色的波纹+1条需要存在的支持线。
在这里您设置：
supportLine：只有一条这样的曲线必须将此设置为true，它将用于绘制支持线color：波纹的颜色
构建和开发
如果您想在本地环境中进行一些修改，请使用：
npm dev
这将创建一个可观察的构建与RollupJS，并自动创建一个服务器以在浏览器中查看您的更改。
要最终构建所有目标：
npm build
现在，就去尝试一下SiriWave，为你的网站或者应用添加一抹独特的色彩吧！无论是模仿Siri的经典动画，还是探索自己的创意，SiriWave都能成为你手中得心应手的工具。
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
