简易js特效之气泡效果

何用原生JavaScript写一个气泡的效果。话不多说，直接上代码。

script脚本如下：

html代码如下：

是不是很简单呢。然后我们用手机看看效果

手指点击屏幕，或者在电脑上打开，鼠标移动时，气泡也会跟随移动

效果不错，建议收藏哦

通讯应用和聊天界面中，当你正在与对方交谈时对方正在输入一条信息，会有一个小的气泡动画或者文案提示。本文将探讨使用现代 CSS 来实现这一动画效果，首先会实现一个 Blink 效果的动画，然后实现一个波浪效果动画，最后实现一个语音气泡效果。

1.效果预览

1）Blink 效果：

2）Wave 效果：

3）语音气泡效果：

2.实现方案

2.1.快速创建页面和容器

通过 html:5 和 div.container>(div.dot)*3 快速创建页面及容器。

<div class="container">
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
</div>

2.2.增加基础样式

1）容器居中：

body {
  display: grid;
  place-content: center;
  min-height: 100vh;
  margin: 0;
}

2）容器样式：

注意：此处使用了现代CSS 原生嵌套（参考链接：）

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.25rem;

  background: #e2e8f0;
  border-radius: 9999px;
  padding: 1rem;
  .dot {
    border-radius: 9999px;
    height: 0.5rem;
    width: 0.5rem;
    background: #93a2b7;
  }
}

2.3.实现动画

1）Blink 效果：

核心思想是通过给dot 元素设置 opacity 设置属性来改变其透明度，同时对 3 个 dot 的透明度变化设置不同的动画延迟 animation-delay 属性来实现闪烁的效果。

.container {
  .dot {
    opacity: 0;
    animation: blink 1s infinite;
    &:nth-child(1) {
      animation-delay: 0.3333s;
    }
    &:nth-child(2) {
      animation-delay: 0.6666s;
    }
    &:nth-child(3) {
      animation-delay: 0.9999s;
    }
  }
}
@keyframes blink {
  50% {
    opacity: 1;
  }
}

2）Wave 效果：

核心思想：给 dot 元素增加 transform 属性，设置 translateY 的值将目标元素从下至上垂直重新定位，同时在动画关键帧 keyframes 中对颜色进行调整。

  .container {
    .dot {
      animation: wave 1s infinite;
    }
  }
  @keyframes wave {
    0% {
      transform: translateY(0px);
      background: rgba(148 163 184 / 0);
    }
    25% {
      transform: translateY(-0.25rem);
      background: rgba(148 163 184 / 0.8);
    }
    50% {
      transform: translateY(0px);
      background: rgba(148 163 184 / 0);
    }
    75% {
      transform: translateY(0.25rem);
      background: rgba(148 163 184 / 0.8);
    }
    100% {
      transform: translateY(0);
      background: rgba(148 163 184 / 0);
    }
  }

2）语音气泡效果：

语音气泡是以可视化方式显示对话或思想的一种流行而有效的方法。你可能在漫画、卡通、广告和社交媒体文章中见过它们。它们为设计增添了幽默、情感和个性，同时也为观众提供了语境。此外，语音气泡布局还可以将文字较多的设计分割开来，使其更加吸引人。

核心思想：在 wave 效果的基础上，对 .contianer 容器增加 ::before 和 ::after 两个伪元素来实现左下角的圆圈，同时动画中增加对整个容器的放大和缩小 scale 动画，并采用 ease-out 函数。

.container {
  animation: 2s zoom infinite ease-out;
  position: relative;

  &::before,
  &::after {
    content: '';
    position: absolute;
    border-radius: 9999px;
    background: rgb(226 232 240);
    bottom: 0;
    left: 0;
  }
  &::before {
    height: 1rem;
    width: 1rem;
    transform: translate(-0.125rem, 0.125rem);
  }
  &::after {
    height: 0.5rem;
    width: 0.5rem;
    transform: translate(-0.5rem, 0.5rem);
  }
  .dot {
    border-radius: 9999px;
    height: 0.5rem;
    width: 0.5rem;
    background: rgba(148 163 184 / 1);
    animation: wave 1.2s infinite;
    &:nth-child(1) {
      animation-delay: 0.4s;
    }
    &:nth-child(2) {
      animation-delay: 0.8s;
    }
    &:nth-child(3) {
      animation-delay: 1.2s;
    }
  }
}
@keyframes zoom {
  50% {
    transform: scale(1.1);
  }
}

如果本文对您有帮助，欢迎关注、点赞和转发，感谢您的支持！

家好！欢迎来到本教程，我们将深入了解使用 HTML 画布和 JavaScript 在代码中创建有趣的气泡的世界。最好的部分？我们将只使用一点 HTML 和所有 JavaScript，而不是 CSS 来实现所有这一切。

揭示概念

今天，我们要掌握以下几个概念：

使用画布上下文的 arc 方法创建圆。

利用 requestAnimationFrame 函数实现平滑的圆形动画。

利用 JavaScript 类的强大功能来创建多个圆圈，而无需重复代码。

向我们的圆圈添加描边样式和填充样式以获得 3D 气泡效果。

你可以跟着我一起看，或者如果你想看源代码，可以使用最终的codepen

入门

首先，我们需要一个 HTML5 Canvas 元素。 Canvas 是创建形状、图像和图形的强大元素。这就是气泡将产生的地方。让我们来设置一下 -

<canvas id="canvas"></canvas>

为了使用画布做任何有意义的事情，我们需要访问它的上下文。 Context 提供了在画布上渲染对象和绘制形状的接口。

让我们访问画布及其上下文。

const canvas=document.getElementById('canvas');
const context=canvas.getContext('2d');

我们将设置画布以使用整个窗口的高度和宽度 -

canvas.width=window.innerWidth;
canvas.height=window.innerHeight;

让我们通过添加一些 css 为画布提供一个漂亮的舒缓浅蓝色背景。这是我们要使用的唯一 CSS。如果您愿意，也可以使用 JavaScript 来完成此操作。

#canvas {
  background: #00b4ff;
}

是时候创造泡泡了！

让我们进入有趣的部分。我们将通过单击画布来创建气泡。为了实现这一点，我们首先创建一个点击事件处理程序：

canvas.addEventListener('click', handleDrawCircle);

由于我们需要知道在画布上单击的位置，因此我们将在句柄 DrawCircle 函数中跟踪它并使用事件的坐标 -

//We are adding x and y here because we will need it later.
let x, y
const handleDrawCircle=(event)=> {
  x=event.pageX;
  y=event.pageY;

// Draw a bubble!
  drawCircle(x, y);
};

用圆弧法画圆

为了创建圆圈，我们将利用画布上下文中可用的 arc 方法。 Arc 方法接受 x 和 y - 圆心、半径、起始角和结束角，对于我们来说，这将是 0 和 2* Math.PI，因为我们正在创建一个完整的圆。

const drawCircle=(x, y)=> {
  context.beginPath();
  context.arc(x, y, 50, 0, 2 * Math.PI);

  context.strokeStyle='white';
  context.stroke();
};

使用 requestAnimationFrame 方法移动圆圈

现在我们有了圆圈，让我们让它们移动，因为……

GIF

请记住，当我们创建圆时，我们使用了 arc 方法，它接受 x 和 y 坐标 - 圆的中心。如果我们快速移动圆的 x 和 y 坐标，就会给人一种圆在移动的印象。让我们试试吧！

//Define a speed by which to increment to the x and y coordinates

const dx=Math.random() * 3;
const dy=Math.random() * 7;//Increment the center of the circle with this speed
x=x + dx;
y=y - dy;

我们可以将其移至函数内 -

let x, y;

const move=()=> {
  const dx=Math.random() * 3;
  const dy=Math.random() * 7;  x=x + dx;
  y=y - dy;
};

为了让我们的圆圈无缝移动，我们将创建一个动画函数并使用浏览器的 requestAnimationFrame 方法来创建一个移动的圆圈。

const animate=()=> {
  context.clearRect(0, 0, canvas.width, canvas.height);

  move();
    drawCircle(x,y);  requestAnimationFrame(animate);
};//Don't forget to call animate at the bottom 
animate();

创建粒子：引入粒子类

现在我们已经创建了一个圆圈，是时候创建多个圆圈了！

但在我们创建多个圆圈之前，让我们准备一下我们的代码。为了避免重复我们的代码，我们将使用类并引入 Particle 类。粒子是我们动态艺术作品和动画的构建块。每个气泡都是一个粒子，具有自己的位置、大小、运动和颜色属性。让我们定义一个 Particle 类来封装这些属性：

class Particle {
  constructor(x=0, y=0) {}

  draw() {
    // Drawing the particle as a colored circle
    // ...
  }  move() {
    // Implementing particle movement
    // ...
  }
}

让我们将一些已设置的常量移至 Particle 类 -

class Particle {
  constructor(x=0, y=0) {
    this.x=x;
    this.y=y;
    this.radius=Math.random() * 50;
    this.dx=Math.random() * 3;
    this.dy=Math.random() * 7;
  }

  draw() {
    // Drawing the particle as a colored circle
    // ...
  }  move() {
    // Implementing particle movement
    // ...
  }
}

draw 方法将负责在画布上渲染粒子。我们已经在drawCircle中实现了这个功能，所以让我们将它移动到我们的类中并将变量更新为类变量

class Particle {
  constructor(x=0, y=0) {
    this.x=x;
    this.y=y;
    this.radius=Math.random() * 50;
    this.dx=Math.random() * 3;
    this.dy=Math.random() * 7;
    this.color='white';
  }

  draw() {
    context.beginPath();
    context.arc(this.x, this.y, this.radius, 0, 2 * Math.PI);
    context.strokeStyle=this.color;
    context.stroke();    context.fillStyle=this.color;
    context.fill();
  }  move() {}
}

同样，让我们在类中移动 move 函数 -

move() {
    this.x=this.x + this.dx;
    this.y=this.y - this.dy;
}

现在，我们需要确保在事件处理程序中调用 Particle 类。

const handleDrawCircle=(event)=> {
  const x=event.pageX;
  const y=event.pageY;

  const particle=new Particle(x, y);
};canvas.addEventListener('click', handleDrawCircle);

由于我们需要在 animate 函数中访问该粒子，以便调用其 move 方法，因此我们将该粒子存储在一个名为 molecularArray 的数组中。当创建大量粒子时，这个数组也会很有帮助。这是反映这一点的更新代码 -

const particleArray=[];

const handleDrawCircle=(event)=> {
  const x=event.pageX;
  const y=event.pageY;  const particle=new Particle(x, y);
  particleArray.push(particle);
};canvas.addEventListener('click', handleDrawCircle);

记得也要更新动画功能 -

此时，您将在屏幕上看到这个粒子 -

惊人的！现在，到了有趣的部分！让我们创建很多圆圈并设计它们的样式，使它们看起来像气泡。

为了创建大量气泡，我们将使用 for 循环创建粒子并将它们添加到我们在此处创建的粒子数组中。

const handleDrawCircle=(event)=> {
  const x=event.pageX;
  const y=event.pageY;

  for (let i=0; i < 50; i++) {
    const particle=new Particle(x, y);
    particleArray.push(particle);
  }
};canvas.addEventListener('click', handleDrawCircle);

在动画函数中，我们将通过清除画布并在新位置重新绘制粒子来不断更新画布。这会给人一种圆圈在移动的错觉。

const animate=()=> {
  context.clearRect(0, 0, canvas.width, canvas.height);

  particleArray.forEach((particle)=> {
    particle?.move();
    particle?.draw();
  });  requestAnimationFrame(animate);
};animate();

现在我们有了移动的气泡，是时候给它们添加颜色，使它们看起来像气泡了！

我们将通过向气泡添加渐变填充来实现此目的。这可以使用 context.createRadialGradient 方法来完成。

const gradient=context.createRadialGradient(
  this.x,
  this.y,
  1,
  this.x + 0.5,
  this.y + 0.5,
  this.radius
);

gradient.addColorStop(0.3, 'rgba(255, 255, 255, 0.3)');
gradient.addColorStop(0.95, '#e7feff');context.fillStyle=gradient;

总结

恭喜！您刚刚仅使用 HTML Canvas 和 JavaScript 创建了一些超级有趣的东西。您已经学习了如何使用 arc 方法、利用 requestAnimationFrame、利用 JavaScript 类的强大功能以及使用渐变设计气泡以实现 3D 气泡效果。

请随意尝试颜色、速度和大小，使您的动画真正独一无二。

我希望您在学习本教程时能像我在创建它时一样获得乐趣。现在，轮到你进行实验了。我很想看看你是否尝试过这个以及你创造了什么。与我分享您的代码链接，我很乐意查看。

在线咨询

上一篇：Apache 个人主页搭建
下一篇：利用 50 行 Python 代码构建一个在线文本生

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商