手把手教你制作雨滴背景动画效果

最近收到好多小伙伴私信，问雨滴背景动画怎么做才自然。刚好上个月帮客户做了个汽车官网的雨天特效，今天就把压箱底的制作方法分享给大家。咱们先从最基础的开始，保证零基础也能学会！

一、工具全家福

做雨滴动画主要用这俩兄弟：

• AE（After Effects） 影视级特效扛把子
• CSS动画 网页端省钱小能手

工具对比表

渲染效果	电影级	基础级
学习成本	需要2周上手	半天掌握
设备要求	专业显卡	普通电脑

二、AE制作八步曲

上周给某手机广告做的雨滴效果，客户当场拍板加钱。关键步骤记在小本本上了：

1. 新建合成

记得选25帧/秒，尺寸按项目需求来。做手机端的话，建议1080x1920竖版。

2. 粒子系统设置

• 发射器类型选盒子
• 粒子数量调至500-800
• 生命周期设3秒

3. 运动轨迹调试

重点来了！在物理学面板里：

gravity = 200
wind = 50

三、CSS偷懒大法

急着交活的时候，这套代码救我狗命：

.raindrop { animation: fall 1s infinite; background: linear-gradient(transparent, 8EB8E5);

关键参数对照表

下落速度	animation-duration	0.8s-1.2s
雨滴大小	width/height	2px-5px

四、省钱小妙招

上个月发现个宝藏网站RainyDay.js，免费开源库，三行代码出效果：

const engine = new RainyDay({ opacity: 0.7, blur: 10 });

五、常见翻车现场

• 雨滴排队下落 随机数没设好
• 背景闪烁抖动 帧率不匹配
• 手机端卡成PPT 粒子数超300

最近发现个新玩法，把雨滴透明度调低到0.3，叠加两层不同速度的动画，立马就有远近层次感。上次这么改完，甲方爸爸多打了20%尾款。

雨声渐歇，编辑器还开着。要不现在就按我说的方法，打开编辑器试试？记得保存工程文件哈！