canvas动画：气泡上升效果

Posted 2020-12-24 franklongger

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了canvas动画：气泡上升效果相关的知识，希望对你有一定的参考价值。

html5中的canvas真是个很强大的东西呢！

这几天突发奇想想做一个气泡上升的动画，经过许久的思考和多次失败，终于做出了如下效果

技术分享图片

由于是录制的gif图，看着会有点卡顿，实际演示是很自然的

想要做出这种效果需要用到大量的随机数

先上代码：

CSS+HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #canvas1{
            display: block;
            position: absolute;
            bottom: 0;
            transition: all 0.2s ease;
        }
    </style>
</head>
<body>
    <canvas id="canvas1">您的浏览器不支持canvas</canvas>
<script src="qipao.js"></script>
</body>
</html>

let canvas1 = document.getElementById(‘canvas1‘);
let context1 = canvas1.getContext(‘2d‘);
let canvasH = 300;

function resizeCanvas() {
    if (window.innerHeight > 1920) {
        canvas1.width = window.innerWidth;
    }
    else {
        canvas1.width = 1920;
    }
    canvas1.height = canvasH;
}//设置canvas宽高

resizeCanvas(canvas1);

let num = 100;//气泡数量
let ballX = [];//球心的横坐标
let ballY = [];//球心的纵坐标
let ballR = [];//球的半径
let ballF = [];//小球左右摆动幅度
let speed = [];//小球向上移动速度
let colours = ["rgb(91,155,213)","rgb(180,199,231)","rgb(0,0,255)","rgb(46,177,182)","rgb(68,114,196)"];//小球颜色
let finalCol=[];

//在随机位置产生num个随机半径的球，储存变量
for(let i = 0;i < num; i++) {
    let radius = Math.floor(Math.random() * 15 + 10);
    let x = Math.floor(Math.random() * canvas1.offsetWidth);
    let y = Math.floor(Math.random() * 300);
    let fudu = Math.floor(Math.random() * 10 + 5);
    let sp = Math.floor(Math.random() * 30 + 5);
    let color = colours[Math.floor(Math.random() * colours.length)];
    ballX.push(x);
    ballY.push(y);
    ballR.push(radius);
    ballF.push(fudu);
    speed.push(sp);
    finalCol.push(color);
}

let reX;
let reY;
let ballK=[];

//使小球移动(向上做曲线运动)
function move(){
    context1.clearRect(0, 0, canvas1.offsetWidth, 300);
    for(let i = 0;i < num; i++) {
        (function (i) {
            if(ballK[i] == null){
                ballK[i] = 0;
            }
            reX = ballK[i] * speed[i] + ballY[i];
            reY = Math.sin(ballK[i]) * ballF[i] + ballX[i];
            if(reX + ballR[i] <= 0){
                ballY[i] = 320;
                ballK[i] = 0;
                reX = ballK[i] * speed[i] + ballY[i];
            }
            context1.beginPath();
            context1.fillStyle = finalCol[i];
            context1.globalAlpha = 0.5;
            context1.arc(reY, reX, ballR[i], 0, Math.PI * 2);
            context1.fill();
            ballK.splice(i,1,ballK[i]);
            ballK[i]-=0.1;
        })(i);
    }
}
setInterval(move,20);//定时器