端动画一般在展示性网站、交互操作或者移动端活动页面使用比较多，可能对于大部分前端平时只会用 css 里的 transition 动画，其实前端动画还有很多实现方式，下面是常见的几种形式：

• css 动画
• js 动画
• SVG 动画
• Canvas 动画
• WebGL 动画
• gif 动图
• 图片+位移模拟动画
• 视频
• flash 动画

css 动画

css 动画应该是前端工作中用得最多的，兼具性能和丰富的动画效果，很多常见的第三方动画库也都是基于 css 实现的。

transition 动画

用来实现 DOM 元素形变或位移动画，也是大部分前端工作中最常用的动画形式，一般 web 上很多交互操作动效都是用这个实现的，简单好用。

animation 关键帧动画

css3 里新出的关键帧动画，比 transition 强大数倍，可以实现各种酷炫的动画效果。关键帧的意思就是我们只需要定义动画的几个关键节点的值，animation 会自动根据计时函数插值计算出来中间的步骤，实现比较平滑的动画效果，使用时需要配合 @keyframes 来定义关键帧。

• animation 是以下8个属性的简写形式：
• animation-name：要绑定的 @keyframes 关键帧动画名
• animation-duration：动画时长
• animation-timing-function：动画计时函数、速度曲线，可以用预制关键字或者cubic-bezier()函数自定义贝塞尔曲线、steps()函数直接设置要多少步
• animation-delay：动画开始前延迟的时长
• animation-iteration-count：动画次数，无限循环 infinite
• animation-direction：设置是否可以反向播放动画
• animation-fill-mode：设置 CSS 动画在执行之前和之后如何将样式应用于其目标，一般用来解决动画停止后界面闪现问题
• animation-play-state：设置动画是运行还是暂停，可以配合 js 来实现中途让动画停止

animation 的简写其实也没啥规则，就是直接往后面随便堆，css会有一套自己的解析规则来直接从里面取，具体可以参考 MDN，看着脑阔痛，推荐还是别简写了。

js 动画

严格来说 js 动画不算一个单独的动画，因为一般需要利用 js 里的定时器配合像 DOM 元素、Canvas 才能实现动画效果。

setTimeout 定时器

通过 setTimout、setInterval 定时器不断更新元素的状态位置等来实现动画，要求画面的更新频率要达到大部分屏幕要求的每秒60次才能让肉眼看到比较流畅的，受不同屏幕和定时器执行时间影响，动画中间容易出现丢帧的情况。

setInterval(function() {
  // 执行动画任务
}, 1000 / 60)

requestAnimationFrame 定时器

除了定时器还有 HTML5 新出的 requestAnimationFrame，专门为实现高性能的帧动画而设计的一个API。它的作用就是告诉浏览器你希望执行一个动画，让浏览器在下次重绘之前调用指定的回调函数更新动画。该方法需要传入一个回调函数作为参数，该回调函数会在浏览器下一次重绘之前执行。

若你想在浏览器下次重绘之前继续更新下一帧动画，那么回调函数自身必须再次调用 requestAnimationFrame()，这样就能实现动画效果了。

和 setTimeout 定时器类似，requestAnimationFrame 也可以通过 cancelAnimationFrame 取消回调函数请求。相比 setTimeout 有两点优势： 跟屏幕刷新频率保持一致，不会出现像 setTimeout 丢帧的情况 性能更好，运行在后台标签页或者隐藏的 里时，requestAnimationFrame() 会被暂停调用以提升性能和电池寿命

function animate() {
  // 执行动画任务
  requestAnimationFrame(animate)
}
requestAnimationFrame(animate)

SVG 动画

SVG（Scalable Vector Graphics）可伸缩矢量图形，基于 xml 语法，和我们常见的 png、jpg 等位图相比，它的文件容量较小，在进行放大、缩小或旋转等操作时图象不会失真。

HTML5 中是支持内联 SVG 的，所以我们可以将 svg 标签当作 html 标签直接在页面结构中使用，成为 DOM 的一部分，然后用 JavaScript 和 CSS 都是可以对其进行操作的，所以 css 的动画效果也都是可以直接作用在 svg 元素上的。

除此之外，SVG 中也自带 animate 元素，可以直接用来创建动画，css 中的动画效果也都能用其实现，相比 css 动画 svg 可以实现出更加复杂的动画效果，如路径动画、描边动画等，很多网站的 logo 动画就是用 svg 来实现的。

Canvas 动画

使用 canvas 绘制动画原理就是，配合 js 定时器不断的绘制擦除图形，当绘制的速度够快，看上去就像动起来了一样，适合用来实现一些复杂的自定义场景动画。

WebGL 动画

WebGL 在前端领域也是一项很热门的技术，它可以在网页上绘制和渲染三维图形，并且让用户与其进行交互。前面我们提到的各种动画都是基于 2D 的二维图形动画，像 css 动画中虽然也有 z 轴的概念，但是和真实的三维效果还是有很大差距的。

像常见的线上看房开车、全景展示、产品展示等都有用到 WebGL 技术，其中大名鼎鼎的三维模型库 Three.js 应该很多人都听过，开发成本比较高，即使有经验的前端工程师也需要系统学习后才能上手。

gif 动图

设计师直接导出 gif 动图，适合一些简单的动画，直接利用 PS 里的动作就可以完成制作，基本没啥前端工作量，简单适配性好不过容易出现颜色失真或者边缘出现锯齿。

图片+位移模拟动画

这个其实跟 gif 图类似，只不过把 gif 图的每一帧导出成单独的 png 图片再拼成雪碧图，前端利用 css 的 transition、animation 来做位移模拟实现动画的效果，跟以前放电影有点类似，把静态的图片在一个固定的视窗内不断移动，让人看着就像动起来了一样。

视频

直接放一个 video 视频，有的展示性网站会采用这种方式，直接整块网页背景放个 video 视频，让人看着像动画的效果，实现简单有音画效果，但是视频往往会很大。

flash 动画

flash 动画是一种基于 Adobe Flash 技术创建的动态图像或影片，它可以在网页中播放。flash 动画通常包含矢量图形、位图、音频、视频等多种元素，具有高质量的图像和动态效果。不过会影响网页的性能，特别是在移动设备或低端设备上，现在差不多灭绝了，属于过时了的技术。

家好！ 欢迎来到本教程，我们将深入了解使用 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 气泡效果。

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

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

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