正文

canvas动画：气泡上升效果(代码片段)

franklongger  franklongger  2022-12-16  261

关键词：

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);//定时器

整体思路：

首先定义几个数组，一个是装横坐标，一个装纵坐标，一个装半径，一个装圆的颜色

绘制若干个圆，圆心的横坐标、纵坐标、半径全部采用随机数的形式得到

用fill()方法填充圆，fillStyle()方法指定颜色，颜色也全部用随机数得到

用golbalAlpha设置透明度

这样每个圆都有了自己的初始位置，颜色，和透明度

然后开始绘制每个球的运动路线

绘制路线这里我用了sin函数，通过该变角度，振幅等来改变路线，因此又要定义两个数组，一个装振幅，另外一个装圆移动的速度，这两个变量也用随机数的形式得到

因为sin函数的轨迹总体是水平方向上的运动，因此如果想实现从下往上，就要把横坐标与纵坐标颠倒过来

当圆从下往上运动时，如果圆已经移出了canvas的范围也就是圆心的纵坐标-半径<=0，那么改变圆的坐标，这样就可以循环从下往上运动了

设置定时器，每过20毫秒，使用clearRect清除先前的圆的位置，并在新的位置上绘制圆

说了这么多，个人认为这个动画的核心是储存变量。

炫丽的倒计时效果canvas绘图与动画基础(代码片段)

前言想要在自己做的网页中，加入canvas动画效果，但是发现模板各种调整不好，觉得还是要对canvas有所了解，才可以让自己的网页变得狂拽炫酷吊炸天！一、绘制基础1<!DOCTYPEhtml>2<htmllang="en">3<head>4<metacharset="UTF-8"&... 查看详情

179.纯css动画气泡(代码片段)

效果(源码网盘地址在最后)源码index.html<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"/><metahttp-equiv="X-UA-Compatible"content="IE=edge"/><metaname="viewport"content="widt 查看详情

canvas动画之三--黑客帝国文字掉落效果(代码片段)

今天要实现的效果是黑客帝国里面的文字掉落效果，先来看一下图点击这里，查看demo其实效果也是比较好实现的，只要计算出每个文字该出现的地方，然后绘制文字就可以了。下面就来说具体的实现方法吧。首先... 查看详情

用canvas实现红心飘飘的动画效果(代码片段)

两周前，项目里需要实现一个红心飘飘的点赞效果。抓耳挠腮了老半天，看了几篇大佬的文章，终于算是摸了个七七八八。不禁长叹一声，还是菜啊。先来看一下效果:(传送门进去点一波)一、Bezier曲线运动轨迹其实用大白话描述... 查看详情

必备的canvas接口和动画效果大全(代码片段)

1、概述<canvas>元素用于生成图像。它本身就像一个画布，JavaScript通过操作它的API，在上面生成图像。它的底层是一个个像素，基本上<canvas>是一个可以用JavaScript操作的位图（bitmap）。它与SVG图像的区别在于，<canvas>... 查看详情

《每周一点canvas动画》——3d点线与水波动画(代码片段)

《每周一点canvas动画》——差分函数的妙用每周一点canvas动画代码文件好像上次更新还是十一前，这唰唰唰的就过去大半个月了，现在才更新实在不好意思。这次我们不涉及canvas3D的内容，主要分享一个比较炫的动画效果，可以... 查看详情

canvas绘制气泡(代码片段)

思路：使用Math.random()函数绘制是个不同位置，大小，颜色的圆形，然后设置定时器，前一个状态用一个与画布相同颜色的背景图片进行覆盖，改变圆形的位置，每次改变都是在这张空白的背景图片上面重新进行重新绘制的过程... 查看详情

canvas动画之二--创建动态粒子网格动画(代码片段)

最近看到一个粒子网格动画挺炫的，自己也就做了一个，当背景挺不错的。CSDN不能上传超过2M的图片，所以就简单截了一个静态图片：可以点击这里查看动画.下面就开始说怎么实现这个效果吧：首先当然是添... 查看详情

如何在canvas中实现自定义路径动画(代码片段)

...目中笔者需要做一个新需求：在canvas中实现自定义的路径动画。这里所谓的自定义路径不单单包括一条直线，也许是多条直线的运动组合，甚至还包含了贝塞尔曲线，因此，这个动画也许是下面这个样子的：那么如何才能在canvas... 查看详情

canvas动画(代码片段)

...礼拜了平面的东西玩来玩去也就那样所以就开始折腾动画和3D了什么是动画？就像思考哲学问题无法回避思维和存在的关系一样制作动画同样无法逃避的问题是动画的原理是什么？图像序列的变化运动给我们最为直观的感受... 查看详情

html5实现小车动画效果(canvas/css3/jquery)(代码片段)

HTML5正在变得越来越流行。在这个移动设备日益增长的时代，对来自Adobe的Flash插件的改造需求也正在快速增长。因为就在最近，Adobe宣布Flash将不再支持移动设备。这意味着，Adobe自身也认为对移动设备来讲HTML5是一项... 查看详情

canvas动画之一--百分比进度加载(代码片段)

...其他图像，我们使用脚本来绘制图形。先看一下这次动画的结果：gif图可能不完整，可以点击这里查看完整效果。canvas的API较多，这里我们只介查看详情

记录-有意思的气泡loading效果(代码片段)

...用纯CSS实现超酷炫的粘性气泡效果巧用CSS实现酷炫的充电动画圆弧的实现首先，我们可能需要实现这样一段圆弧：这里需要用到的技术是：角向渐变 conic-gradient() + mask 以及两个伪元素。图片示意如下：核心代... 查看详情

涨姿势了，有意思的气泡loading效果(代码片段)

...用纯CSS实现超酷炫的粘性气泡效果巧用CSS实现酷炫的充电动画圆弧的实现首先，我们可能需要实现这样一段圆弧：这里需要用到的技术是：角向渐变conic-gradient()+mask以及两个伪元素。图片示意如下：核心代码如下图：<divclass="g... 查看详情

一起talkandroid吧（第五百一十九回：波浪上升动画)(代码片段)

...;绘制波浪效果",这一回中咱们说的例子是"波浪上升动画"。闲话休提，言归正转，让我们一起TalkAndroid吧！整体思路我们是在绘制波浪的基础上让波浪一边波动一边上升。波浪波动的部分还是使用一章回中的... 查看详情

博客园添加动态背景效果(代码片段)

背景动画先直接看效果吧，还是挺有趣的（来自官网上的一张图）使用食用食用方法先良心安利js写的动画库。其原理就是基于HTML5新特性canvas，渲染的动画效果。有兴趣可以访问一下：动画库原地址，里面有使用方法的详... 查看详情

canvas动态画圆弧及requestanimationframe(代码片段)

...和结束角度来做限定，然后通过累加临时的角度变量实现动画效果。相关函数：context.arc(x,y,r,sAngle,eAngle,counterclockwise); 效果展示：查看详情

canvas动画气球

canvas小球的动画我用canvas画布实现的小球动画效果，可以参考下我用canvas画布实现的小球动画效果，可以参考下我用canvas画布实现的小球动画效果，可以参考下我用canvas画布实现的小球动画效果，可以参考下我用canvas画布实现的... 查看详情