波浪加载动画

效果说明

本案例实现了一个圆形容器中的波浪加载动画效果。波浪会随着加载进度上升，并且不断波动，呈现出流动的效果。

核心实现

1. 波浪路径生成

使用正弦函数创建波浪形状：

const y = baseY + Math.sin(x * length + frequency * time) * amplitude;

波浪路径生成的原理：

1. 基准线(baseY)

   • 随着进度增加，基准线逐渐上升
   • 通过 canvas.height * (1 - progress / 100) 计算

2. 正弦波形

   • Math.sin() 生成-1到1之间的值
   • x * length 控制水平方向的波长
     • length值越小，波长越长
     • length值越大，波长越短
   • frequency * time 控制波浪移动
     • frequency决定移动速度
     • time随时间增加，使波浪持续移动

3. 振幅(amplitude)

   • 控制波浪的高度
   • 通过与sin值相乘，决定波峰和波谷的范围

完整的绘制过程：

// 1. 开始路径
ctx.beginPath();
ctx.moveTo(0, canvas.height);

// 2. 绘制波浪线
for (let x = 0; x <= canvas.width; x++) {
    const y = wave.y + Math.sin(x * wave.length + wave.frequency * progress) * wave.amplitude;
    ctx.lineTo(x, y);
}

// 3. 闭合路径
ctx.lineTo(canvas.width, canvas.height);
ctx.closePath();

2. 渐变填充效果

使用线性渐变创建立体感：

const gradient = ctx.createLinearGradient(0, 0, 0, canvas.height);
gradient.addColorStop(0, '#4fc3f7');  // 顶部浅色
gradient.addColorStop(1, '#29b6f6');  // 底部深色

3. 进度控制

通过调整波浪基准线位置实现上升效果：

// 进度范围：0-100
const progress = Math.min(wave.progress / 2, 100);
// 基准线位置：从底部往上升
wave.y = canvas.height * (1 - progress / 100);

扩展思路

1. 添加多层波浪效果
   • 使用不同的频率和振幅
   • 设置不同的透明度
2. 实现不同的波浪形状
   • 使用其他三角函数
   • 组合多个正弦波
3. 添加交互控制进度
4. 自定义波浪颜色和速度

Demo