每个人的青春，都有几场盛夏里难以忘怀的暴雨。
有的人在暴雨中失意；有的人在暴雨中相拥；有的人在躲雨的屋檐下相遇；有的人只是坐在窗边听雨声、看雨落，一眨眼便是很多年；
我也还记得许多场雨。
18岁，高考最后一门英语结束，走出考场大雨倾盆，同窗们不及告别，匆匆避雨归家，踏上各自的人生；
21岁，十一假期，和大学室友去打工兼职，暴雨倾城，没有伞的我们举着纸壳子走了几里路搭乘公交；
23岁，下班路上电动车没电了，推着电动车在乌泱乌泱的雨幕里艰难跋涉归家。
喜怒悲欢，皆是青春。……
暴雨常有，青春的经历却不会再有，那么我们有没有办法在屏幕上完成一次 “暴雨的演绎” ,让你和盛夏的暴雨再度重逢呢?
当然，没问题。
我甚至为此专门写了一个 “开源” 作品，让我们一一品味雨天的感觉：
(感谢这张照片的提供者：翊君 大佬，他是一位有才情、有技术的后端大佬)
不用害怕，这个效果的实现原理非常容易，你可以轻易 get 到，我会手把手教你理解其中的关隘，也可以来和我一起维护这个小小的开源作品；
首先，我们的目标不是写一个 “小 demo”，毕竟我已经写了太多 demo，需要对自己有一些更高的要求了。
所以，我们需要是一个 可发布 、 可调试 的组件库，其代码组织如下：
代码结构比较常规：
当你想进行代码调试时，只需要执行命令 yarn dev 或者 npm run dev，根据提示访问调试页面了：
关于工程的搭建、构建、发布，内容太多，不在本文细数，后续再专门发文解释；
Ok，现在工程搭建好了，让我们来看看 “雨打西窗” 的效果究竟是怎么实现的。
为了让开发出来的工具简单好用，一眼就懂，我初步如此设计本库的 api:
按照 API 的设计，我们现在有了一个 div 元素，然后我们就需要考虑需要几层画布（canvas），以及如何定位它们了；
我的设计是在 div 内放置两层画布：
通过如下代码，我们可以将一张图片清晰地画在画布上：
实现如下效果：
但这显然不符合 “暴雨中窗户起雾” 的效果，因此，我们还需要给它加上一层淡淡的 “高斯模糊”:
加完之后，效果立竿见影：
水滴的绘制，可能是本文最让人一开始摸不着头脑的地方了。
绘制一个看起来像那么回事的水滴，其实只需要一点简单的 初中物理知识 : 凸透镜成像！
因此，当我们想画水滴时，其实只需要以下三个步骤：
初中物理说：“只要你身处凸透镜的焦距以外，它的成像就是倒影。”
而水滴通常很饱满，焦距就很短，所以你看到的水滴上的图案，通常就是窗外风景的倒影；
代码如下：
因此，我们不能直接放一个倒影给用户看，至少我们得将它剪裁成水滴的形状；
因此，我将水滴对象 Drop 赋予三个基础属性，即：
代码如下：
这样就完成水滴绘制了吗？
很可惜，并不是如此，并不是每个水滴中呈现的 “影像” 都完全一致的，在水滴滚落的过程中，我们可以清晰地观察到其中的影响再随着滚动发生着变换；身处玻璃不同位置的水滴，也总是倒映着不同的图案；
让我们按 5.2 节的思路画三颗水珠：
虽然它们已经很像是 “水珠” 了，但每颗水珠都显示一模一样的风景并不太符合我们平时观察风景时的现象；
“真实的表现” 应该是如右图所示，每颗水滴都只倒影风景的一部分，这样才更显真实。
那么，这要怎么实现呢？
分析一下，屏幕上水滴的移动范围，和 “水滴视野” 的移动范围是存在差异的：
于是，可以写出如下代码：
这样，就能实现如下效果了：
水不会一直凝固在玻璃上，重力会拽着它们奔向地面，因此大部分水滴都会选择合适的时候向下滚落，沿途将碰到的水滴据为己有，一路向下。
这种情况下，我们就必须补一个动画常识了：
Canvas 动画绘制按帧更新，绝大多数时候，都是通过以下函数：
一般而言，此函数的使用方法如下：
对于我们的动画也是如此思路：
然后，我们使用 “补间动画库” 来完成其 x 和 y 轴数值的变换，就能完成水滴的绘制了。
通过以上思路，就可以成功让水滴运动起来了：
除了主动随机地给水滴赋予速度外，我们还需要考虑到，“过大的水滴” 是不存在的，当水滴大到一定程度，就
上面图片里，你能够看到水滴在滚动时留下了 “一滴滴” 微小的水滴。
在实际生活中，这是因为玻璃并不光滑和干净，导致水滴残留，而在代码里，我更愿意将其称为 “生崽”。
原理也很简单，当一滴水珠在 “运动时”，每隔一个随机时间段，便在其末梢生成一个小半径的水滴加入页面水滴池即可；
为了体现随机性和合理性，让 “水滴崽” 在 [x - r/2, x + r/2] 的范围内产生；
此代码比较容易，就不赘述；
当两颗水滴重叠时，它们表面的张力会被破坏，从两颗圆润的水滴变成一颗更加圆润的水滴。
但是，“水滴融合”究竟要怎么实现呢？
假设有水滴A和水滴B相交了:
就有以上三种情况：
其实三种思路都没毛病，但我们在实现时往往要选择和业务最贴合的方式，在我们的业务中有一个隐藏条件：“水滴可能正在运动。”
因此，我们可以按这个思路来思考实现：
先算新水滴的半径：
设：水滴A的半径为r1，水滴B的半径为r2，那么融合后水滴C的半径r3是多少？
再算新圆心：
按照上面简单的计算，就可以完成 “水滴融合” 的炫酷效果啦，看起来是不是还真是像那么一回事呢？
源码地址：https://github.com/zhangshichun/rainy-window
npm地址：https://www.npmjs.com/package/rainy-window
unpkg：https://unpkg.com/rainy-window@0.0.1/dist/umd/index.js
安装：
使用：
目前的版本比较早期，很多细节还没处理好，包括但不限于：
我是春哥。大龄前端打工仔，依然在努力学习。我的目标是给大家分享最实用、最有用的知识点，希望大家都可以早早下班，并可以飞速完成工作，淡定摸鱼 。
你可以在公众号里找到我：前端要摸鱼。
