如果你问我当我们想在项目里加一个波浪效果的时候我在想什么？我的回路大概是这样的：

我敢保证这绝对错不了，这年头谁会花时间给你画浪啊，我还要去带娃练盾反呢。什么？设计师你再说一遍，这里的浪花可不可以随机？我随你d.....

好吧，其实没有设计师，也没有这个需求，只是之前在一个卡片列表里想给每个卡片加个波浪，但是一页的卡片看上去都一样的浪未免太过乏味，所以试着写了个随机波浪的效果，效果可以看这个 Demo

这篇文章就讲一下实现的思路和自己想的一般情况下随机波浪的原则，没有代码，没有代码

😋 先拆分下这个动画

可以看到动画其是三个波浪图形组成的，每个单独无限滚动，所以有了第一个点：

🤨 无限滚动的实现

这里真的是无限长的波浪在那里往左翻滚吗？不存在的，在一页有多个这样的动画的情况下，除非想卡爆用户的电脑

其实这里做的是个视觉效果，一个波浪真正的样子是这样的：

可以看到红色箭头是波浪滚动的方向，红框内的波浪就是我们看到的实际有效波浪，为什么说是实际有效呢，因为当我们的视区（黄色背景的卡片）的最左侧接触到蓝框时，波浪位移会立刻被重置成初始状态

而蓝框，其实是和最开始出现在视区内的波段是一毛一样的，所以一次完整的波浪滚动就是红框滚完，蓝框占领视区，这时候瞬间再跳到红框伊始，因为两段波形是一样的，就不会有跳跃的感觉，就给人一种无限滚动的体验。

那么我们要做到更接近无限是否可以呢，答案是一定的，只要不断增加红框内的波长就可以，但这是一种性能和视觉的权衡，略过。

无限滚动就这么简单，现在来说说

😋 波的图形的生成

熟悉 sketch 、PS 或者 AI 的应该都对钢笔(路劲)工具不陌生，制作这样的波形在这些工具中就是放置锚点，拉锚边就可以了，那么对应 SVG 的操作呢？

🤨 svg 生成波形的基本思路

这里 svg 的基本操作就不多做介绍了，随便贴个教程

先来看一张图：

红色的点都是波峰，蓝色的点都是波谷，每一个波峰-波谷之间的间隔我们暂时称为区块，所以生成一段波形的思路就可以是：

假设我们的总波长是 4000，那么我们将其分为两块，第一部分的 2000 就对应上文的红框内的波形，注意这里我们的视区域将是 1000
这里 2000 的长度我们再将其分为 4 个区块，其实也就是三个波峰，两个波谷，这里要注意四个区块的长度不能相差太大，否则会出现断崖式的波形，也就是不够平滑：