Rainyday.js雨滴动画效果展示
雨滴落在玻璃上的那种感觉，Rainyday.js 做得还挺像那么回事。这个小巧的 JavaScript 库专门搞网页雨滴动画的，模拟雨水滴在镜头上慢慢滑落，看着还蛮解压的。
基于HTML5 Canvas，它其实就是在上画一些“伪雨滴”，通过控制大小、速度、透明度这些参数，再加上一点随机性，整个画面一下就灵动起来了。实现方式也不复杂，用Rainyday.init()一调就好。
像下面这样写就能跑起来：
Rainyday.init({
canvas: document.getElementById('rainCanvas'),
density: 50, // 雨滴密度
speed: 3, // 下落速度
direction: -45 // 角度，负数代表斜着来
});比较贴心的是，它可以让你调控各种参数，比如雨滴数量、角度、速度这些，适配不同场景不成问题。要做个雨天情绪页或者产品宣传页背景，效果赞。
动画也是持续刷新的，用的是requestAnimationFrame，不卡顿，响应也快。就算用户点一下、滚个动，它也能实时互动更新，体验上加分不少。
兼容性方面你也不用太担心，虽然主打Canvas，但老浏览器的兼容也考虑到了。真要降级，也能兜住。
文件也挺轻巧，扔进项目里基本没啥性能负担。如果你要做一个有氛围感的界面，又不想自己画帧动画，那 Rainyday.js 会是一个省事的选择。
如果你对前端特效感兴趣，可以顺便看看这些：
文件大小：21.86KB
评论区