SVG:浪啊,浪来了,大浪来了

2,332 阅读5分钟
原文链接: zhuanlan.zhihu.com

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

  1. 打开我的 浏览器
  2. 进入 代码笔 网站
  3. 搜索 浪
  4. 多点几次下一页,我的老伙计,哦我的天,写这些波浪人都是怪物吗
  5. emmm....这个这个!!这个像设计师要求的
  6. 打开链接,CV 二连
  7. 去和设计师去确认眼神

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


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

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


😋 先拆分下这个动画

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

🤨 无限滚动的实现

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

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

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

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

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

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


😋 波的图形的生成

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

🤨 svg 生成波形的基本思路

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

先来看一张图:

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

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

3. 确定区块后,就是放置波峰波谷了,也是同样的道理,相邻波峰-波谷的高低差不能太大,否则也会爆炸

4. 三个波峰中,第一个和第三个波峰必须一模一样,用来和后面的蓝框衔接

其实到这里,经过上面四个步骤后其实我们可以得到的是一个这样子的图形,折线图?!

就缺个平滑了好像!平滑靠什么实现呢?

🤨 三次贝塞尔曲线平滑波形

还是一样,关于贝塞尔曲线的 教程 隆粽的贴一下!这里我们再再再先看一下 sketch 中的三次贝塞尔曲线的实现

🤩 哦!在这停顿:

这里我们关注四个点,红色的波峰,蓝色的波谷,以及绿色黄色两个控制点,我们要着重关注的就是他们,在这次随机波形中,每个相邻的峰谷间,我们都要确定两个控制点,关于这两个点的这里我总结的规则是:

  1. 两点(绿、黄)分别平行于峰谷,也就是 Y 坐标绿点等于峰,黄点等于谷,这样比较简单
  2. 两点的 X 坐标在峰谷所夹的那个区块X 轴中建位置游走不超过10-20%的位置

这里听上去很不形象,但所做都是为了保证曲线的平滑(说句题外话,其实生成随机波形最大的难点就在于在有限的空间内尽可能的让曲线更顺滑,在图形上的意义也就是对控制点的把握)

这步完成后,其实你就已经有了一段实际有效的波浪了,然后!还记得这段实际有效的波浪的长度是 2000 吗?我们再截取前 1000 长度(蓝框内波形)拼接到这段波形后面,Ta Daa..... 我们的一个波形就完成了,接下来再随机两个出来,层叠在一起,加个位移动画,在视区里你就来到海边咯。

最后,emmmm,大家有人看了以后自己会去实现一下随机波浪吗?

不存在的 🙂

那么,做这个到底有啥用呢?好像也没大用,最后就贴个图吧: