Wave 动画是一种常见的前端界面装饰效果，它通过绘制正弦曲线来模拟水波浪动的效果，并且可以实现多种不同的变化和交互效果。在本文中，我们将介绍如何使用 HTML、CSS 和 JavaScript 实现一个简单的 Wave 动画，并逐步提高其可定制性和优化性能。
实现原理
Wave 动画基于数学上的正弦函数，其表达式为：
y = A * sin(2π/λ * (x - φ)) + B
其中，A 表示振幅，λ 表示周期，φ 表示相位差，B 表示 y 轴偏移量。我们可以根据这个公式生成一个正弦波形，然后通过修改 A、λ、φ 和 B 的值，以及设置动画帧数和时间间隔等参数，来实现不同形状和效果的 Wave 动画。
实现步骤
步骤一：创建 HTML 结构
首先，我们需要在 HTML 中创建一个容器元素，用于承载动画效果。例如：
<div class="wave-container"></div>
步骤二：添加 CSS 样式
接下来，我们需要设置容器元素的样式，以便实现 Wave 动画。具体来说，我们需要将容器元素的背景颜色设置为渐变色，并使用 CSS 动画让渐变色在容器内产生波浪动画效果。例如：
-- -------------------- ---- -------
--------------- -
------ -----
------- ------
----------- ------------------ ------- ------- --- ------- ---- ------- ---- ------- ------
---------- ---- -- -------- -------
-
---------- ---- -
-- -
-------------------- - --
-
---- -
-------------------- - -------
-
-在上述代码中，我们首先设置了容器元素的宽度和高度，然后在 background 属性中定义了一个从上到下的渐变色，其中 #f7f8fa 和 #e6e9ed 分别代表浅色和深色，50% 处表示两者的中间位置。接着，我们使用 animation 属性添加了一个名为 wave 的动画，周期为 2 秒，循环次数为无限，动画方式为线性（即匀速）。最后，在 @keyframes 中定义了动画的起始和结束状态，即 background-position 从顶部到底部的移动过程。
步骤三：添加 JavaScript 功能
最后，我们可以通过 JavaScript 来修改 Wave 动画的参数，以实现更灵活、更丰富的效果。具体来说，我们可以先在 HTML 中添加一个 Canvas 元素，用于绘制正弦曲线；然后，在 JavaScript 中通过 requestAnimationFrame 方法每帧重新绘制 Canvas 元素，从而实现 Wave 动画。例如：
<canvas class="wave-canvas"></canvas> <div class="wave-container"></div>
.wave-canvas {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 150px;
}-- -------------------- ---- ------- ----- ------ - --------------------------------------- ----- --- - ------------------------ --- --------- - --- -- -- --- ---------- - ---- -- -- --- ----- - -- -- --- --- ------- - ---- -- - ---- -------- ---------- - ----- - ------ ------ - - ----------------------------------------------------------- -------- ----------------------------------------------------------------------------------