那些年下过的大雨

Posted 2020-10-23 糊糊糊糊糊了

想了解一下用纯CSS和JS怎么实现一段下雨的动画，于是去CodePen上面搜了一下，发现了很多很有意思的东西。有空可以常去上面逛逛，在对技术产生敬畏的同时也能学到好多好多东西。以下是自己理解的几个代码实现过程，所有源码均出自于CodePen。

代码：github

效果：http://rynxiao.com/The-heavy-rain-in-those-years/

PS: 所有效果均在代码中以注释形式给出，不再额外进行补充，如果想了解更多细节，麻烦参考源码

淅沥淅沥

像一阵细雨打湿你心田，那感觉如此甜蜜。

/**
 * 雨滴容器
 * 宽度为15px，高度为120px
 * 0.5秒内从屏幕上方移动到屏幕90%的高度
 * 模仿雨滴的下降过程
 */
.drop {
    position: absolute;
    bottom: 100%;
    width: 15px;
    height: 120px;
    pointer-events: none;
    animation: drop 0.5s linear infinite;
}
@keyframes drop {
    0% {
        transform: translateY(0vh);
    }
    75% {
        transform: translateY(90vh);
    }
    100% {
        transform: translateY(90vh);
    }
}

雨滴容器模仿的是下降的过程，在下降过程的同时，改变真正雨滴的透明度，模仿出雨滴划过的轨迹

/**
 * 雨滴
 * 宽度为1px，高度为120 * 0.6 = 72px
 * 设置从上到下的渐变色，模仿雨滴划过的轨迹
 * 0.5s内由不透明变为透明，模仿雨滴下落碰撞到物体之后消失的情景
 */
.stem {
    width: 1px;
    height: 60%;
    margin-left: 7px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), 
        rgba(255, 255, 255, 0.25));
    animation: stem 0.5s linear infinite;
}
@keyframes stem {
    0% {
        opacity: 1;
    }
    65% {
        opacity: 1;
    }
    75% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}
/**
 * 水花
 * 雨滴碰撞到地面会溅起水花
 * 宽度为15px，高度为10px
 * 设置上边框为点状，加上设置圆角，模拟水花溅起时的弧形
 * 设置动画，当雨滴下降到地面时，透明度设置为1，同时通过设置缩放
 * 模拟水花放大的过程
 */
.splat {
    width: 15px;
    height: 10px;
    border-top: 2px dotted rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    opacity: 1;
    transform: scale(0);
    animation: splat 0.5s linear infinite;
    /*display: none;*/
}
@keyframes splat {
    0% {
        opacity: 1;
        transform: scale(0);
    }
    80% {
        opacity: 1;
        transform: scale(0);
    }
    90% {
        opacity: 0.5;
        transform: scale(1);
    }
    100% {
        opacity: 0;
        transform: scale(1.5);
    }
}

源码：https://codepen.io/arickle/pen/XKjMZY

是离愁

犹记当时杏花雨，晓幕晨钟去孤舟。说好不回头，止不住，是离愁。

/**
 * 雨滴
 * 下落过程透明度由0变为1
 * 高度由40px变为5px
 */
.drop {
    position: absolute;
    background: #fff;
    width: 2px;
    height: 40px;
    opacity: 0;
    left: 150px;
    animation: fall 0.2s ease-in forwards;
}
@keyframes fall {
    0% {
        top: -100px;
        opacity: 0;
        height: 100px;
    }
    99% {
        opacity: 1;
    }
    100% {
        top: 150px;
        opacity: 0;
        height: 5px;
    }
}

雨滴的下降过程中，高度逐渐变小，因此造成了一种下落的堕落感，这点和第一个动画略有不同。

/**
 * 波纹
 * 沿X轴旋转75度，造成椭圆效果
 * 动画效果：
 * 中心定格，设置波纹延迟，波纹逐渐变大造成扩散效果
 * 先上在下再上，造成波纹的跌宕效果
 */
#ripples {
    position: absolute;
    width: 300px;
    height: 300px;
    transform: rotateX(75deg);
}
.ripple {
    position: absolute;
    /* ... */
    border: 6px solid rgba(255, 255, 255, 0.2);
    animation: grow ease-in-out forwards 1;
}
.ripple:nth-child(1) {
  animation-delay: 0s;
  animation-duration: 2s;
}
/* ... */
@keyframes grow {
    0% {
        width: 1px;
        height: 1px;
        opacity: 0;
        transform: translateY(20px);
    }
    25% {
        opacity: 0.5;
        transform: translateY(-10px);   
    }
    50% {
        transform: translateY(10px);
    }
    100% {
        width: 250px;
        height: 250px;
        opacity: 0;
        transform: translateY(0);
    }
}

所有过程都是中心对齐，然后像周围扩散，例如下面的水珠，模拟的其实就是从中心点的原点上跳过程。

/**
* 水珠
* 中心定位
* 通过控制水花垂直方向位移，造成溅起效果
* 通过控制水平方向便宜，造成运动效果
*/
@keyframes bounce1 {
    /* 中心点 */
    0% {
        left: 150px;
        top: 150px;
        opacity: 0;
    }
    /* 透明度 */
    5% {
        opacity: 0.5;
    }
    /* 上升 */
    50% {
        top: 104px;
    }
    /* 下降，同时左偏 */
    100% {
        left: 125px;
        top: 150px;
        opacity: 0;
    }
}

源码：https://codepen.io/Yakudoo/pen/doObLw

错过

青春灿烂，炫如夏花。你说看过彩色的瀑布，我摸着你的头，笑得像个傻瓜。

// 整个动画的关键点
// 整个动画其实是由一条条细线组成，根据下落的时差，造成瀑布的效果
// 根据计算出的屏幕宽度，每条细线1px，然后在屏幕上均匀分布360色
function anim() {
    window.requestAnimationFrame(anim);
    
    // 通过每次在绘制的细线上在绘制透明黑色，因此最先绘制的就会变暗，造成了尾巴的效果
    ctx.fillStyle = repaintColor;
    ctx.fillRect(0, 0, w, h);

    for(var i = 0; i < total; ++i){
        var currentY = dots[i] - 1;
        // 不断增加每次线段的长度，绘制每次最亮的那一部分
        dots[i] += dotsVel[i] += accelleration;

        // 颜色其实在最开始就已经被分配出来了，根据点在的位置而定
        ctx.fillStyle = 'hsl('+ colors[i] + ', 80%, 50%)';
        ctx.fillRect(occupation * i, currentY, size, dotsVel[i] + 1);

        // 从上面出现的条件，也是造成时差的条件
        if(dots[i] > h && Math.random() < .01){
            dots[i] = dotsVel[i] = 0;
        }
    }
}
anim();

源码：https://codepen.io/towc/pen/VYbYvQ

路过

一个人的记忆就是座城市，时间腐蚀着一切建筑，把高楼和道路全部沙化。如果你不往前走，就会被沙子掩埋。所以我们泪流满面，步步回头，可是只能往前走。

var RAIN_DROP = function(width, height, toInit, renderer){
    this.width = width;
    this.height = height;
    this.toInit = toInit;
    this.renderer = renderer;

    this.init();
};
RAIN_DROP.prototype = {
    SCALE_RANGE : {min : 0.2, max : 1},         // 缩放比例
    VELOCITY_RANGE : {min : -1.5, max : -1},    // 水平速度范围
    VELOCITY_RATE : 3,                          // 垂直速度基值
    LENGTH_RATE : 20,                           // 雨滴长度
    ACCELARATION_RATE : 0.01,                   // 加速度比例
    VERTICAL_OFFSET_RATE : 0.04,                // 垂直偏移量
    FRONT_THRESHOLD : 0.8,                      // 前景临界值（前面的雨滴不至于过小，后面的雨滴不至于过大）
    REFLECTION_RADIUS_RATE : 0.02,              // 雨滴水花半径基值
    COLOR : 'rgba(255, 255, 255, 0.5)',         // 雨滴颜色
    RADIUS_RATE : 0.2,                          // 用于设置全局透明度
    THRESHOLD_RATE : 0.6,                        

    init: function(){
        // 获取随机缩放比例
        this.scale = this.renderer.getRandomValue(this.SCALE_RANGE);
        // 雨滴长度
        this.length = this.LENGTH_RATE * this.scale;
        // 雨滴水平方向速度
        this.vx = this.renderer.getRandomValue(this.VELOCITY_RANGE) * this.scale;
        // 雨滴垂直方向速度
        this.vy = this.VELOCITY_RATE * this.scale;
        // 雨滴垂直方向加速度
        this.ay = this.ACCELARATION_RATE * this.scale;
        // 角度
        this.theta = Math.atan2(this.vy, this.vx);
        // 用于计算垂直方向是否出边界的偏移量
        this.offset = this.height * this.VERTICAL_OFFSET_RATE;
        // 雨滴水平坐标值
        this.x = this.renderer.getRandomValue({min : 0, max : this.width - this.height * Math.cos(this.theta)});
        // 雨滴垂直坐标值
        this.y = (this.toInit ? this.renderer.getRandomValue({min : 0, max : this.height}) : 0) - this.offset;
        // 水花半径
        this.radius = this.length * this.REFLECTION_RADIUS_RATE;
    },
    render: function(context, toFront){
        // 如果雨滴在前面，但是缩放比例小于规定临界值，则去掉雨滴
        // 如果雨滴在后面，但是缩放比例大于规定临界值，则去掉雨滴
        // 保证了在背景前面的雨滴不至于太小，在背景靠后的雨滴不至于太大
        if (toFront && this.scale < this.FRONT_THRESHOLD || !toFront && this.scale >= this.FRONT_THRESHOLD) {
            return true;
        }
        context.save();
        context.strokeStyle = this.COLOR;

        // 如果雨滴的垂直方向坐标大于了临界值，则以水花的形式展示
        // 否则以雨滴下落的方式展示
        if (this.y >= this.height * (1 - (1 - this.scale) * this.THRESHOLD_RATE) - this.offset) {
            context.lineWidth = 3;
            context.globalAlpha = (1 - this.radius / this.length / this.RADIUS_RATE) * 0.5;
            context.beginPath();
            context.arc(this.x, this.y, this.radius, Math.PI, Math.PI * 2, false);
            context.stroke();
            context.restore();

            this.radius *= 1.05;

            if (this.radius > this.length * this.RADIUS_RATE){
               return false;
            }
        } else {
            context.lineWidth = 1;
            context.beginPath();
            context.moveTo(this.x, this.y);
            context.lineTo(this.x + this.length * Math.cos(this.theta), this.y + this.length * Math.sin(this.theta));
            context.stroke();
            context.restore();

            // 通过水平速度改变水平位移
            this.x += this.vx;
            // 通过垂直速度改变垂直位移
            this.y += this.vy;
            // 通过加速度，增加垂直方向的速度
            // 因此雨滴并不是沿着直线运动，而是有一定的弧度
            this.vy += this.ay;
        }
        return true;
    }
};

源码：https://codepen.io/K-T/pen/YVYvdW

都是你

曾经想征服全世界，到最后回首才发现，这世界滴滴点点全部都是你。

// 关键点
function loop() {
    requestAnimationFrame(loop);
    // 不断绘制半透明画布，用来造成尾巴效果
    context.fillStyle = 'rgba(0, 0, 0, 0.2)';
    context.fillRect(0, 0, canvas.width, canvas.height);

    var particle;
    var i, j, ilen, jlen;
    cursor.position.x += (mouseX - cursor.position.x)*0.1;
    cursor.position.y += (mouseY - cursor.position.y)*0.1;
    for (i = 0, ilen = particles.length; i < ilen; i++) {
        particle = particles[i];
        // 通过速度控制角度大小，用来控制流星划过时的速度
        particle.angle += particle.speed;

        // 以相同转动的速度向鼠标中心点不停的移动
        particle.shift.x += (cursor.position.x - particle.shift.x) * particle.speed;
        particle.shift.y += (cursor.position.y - particle.shift.y) * particle.speed;

        // sin/cos 用来控制画圆
        // orbit 半径轨道不断增加， force用来控制轨道系数，最低为0
        // Math.sinx * (particle.orbit*particle.force) 表示以particle.orbit*particle.force为半径画圆
        // 加上中心点坐标，造成不断围绕中心点旋转的效果
        particle.position.x = particle.shift.x + Math.sin(i + particle.angle) * (particle.orbit*particle.force);
        particle.position.y = particle.shift.y + Math.cos(i + particle.angle) * (particle.orbit*particle.force);

        // 不断增加点的半径，最高为100
        particle.orbit += (cursor.orbit - particle.orbit) * 0.01;

        context.beginPath();
        // 根据点所在的位置，随机颜色
        context.fillStyle = "hsl("+((particle.position.x/canvas.width + particle.position.y/canvas.height) * 180) + ", 100%, 70%)";  
        context.arc(particle.position.x, particle.position.y, particle.size/2, 0, Math.PI*2, true);
        context.fill();
    }
} 

源码：https://codepen.io/vennsoh/pen/DuLbo