抖音两个旋转小球的加载效果实现原理及代码示例

前端

2023-08-24 17:22:03

抖音小圆球加载效果：让加载界面更吸睛

小圆球大作用

在互联网时代，加载等待是不可避免的，如何让用户在枯燥的等待中保持耐心，成为众多产品设计师苦恼的问题。而抖音的小圆球加载效果，凭借其简单而富有动感的特点，脱颖而出，成为一种广受欢迎的解决方案。

揭秘抖音小圆球加载效果的实现原理

要理解抖音小圆球加载效果的原理，我们需要了解 CSS 动画和 HTML 元素。

CSS 方案：简单高效

CSS 方案是最简单直接的实现方式，它通过在 HTML 中添加一个 <div> 元素，并为其添加 CSS 动画来实现加载效果。具体步骤如下：

添加<div>元素： 在 HTML 中添加一个<div>元素，用作加载动画的容器。
添加 CSS 样式： 为<div>元素添加 CSS 样式，包括背景颜色、边框、圆角和动画效果。
创建旋转动画： 使用 CSS 的关键帧动画，创建小圆球旋转的动画效果。

代码示例：

.loading {
  position: relative;
  width: 100px;
  height: 100px;
}

.ball1, .ball2 {
  position: absolute;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #ff0000;
  animation: rotate 1s infinite linear;
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

HTML 方案：更灵活

HTML 方案则使用两个 <canvas> 元素来实现，虽然比 CSS 方案复杂，但可以实现更复杂的动画效果。步骤如下：

添加<canvas>元素： 在 HTML 中添加两个<canvas>元素，用作小圆球的绘图区域。
创建<canvas>上下文： 使用 JavaScript 代码创建两个<canvas>元素的上下文对象，用于绘制和操控图形。
绘制小圆球： 使用 JavaScript 代码绘制两个小圆球。
创建旋转动画： 使用 JavaScript 代码创建小圆球旋转的动画效果。

代码示例：

// 获取两个`<canvas>`元素的上下文
var ctx1 = canvas1.getContext("2d");
var ctx2 = canvas2.getContext("2d");

// 绘制两个小圆球
ctx1.beginPath();
ctx1.arc(50, 50, 25, 0, 2 * Math.PI);
ctx1.fillStyle = "#ff0000";
ctx1.fill();

ctx2.beginPath();
ctx2.arc(50, 50, 25, 0, 2 * Math.PI);
ctx2.fillStyle = "#00ff00";
ctx2.fill();

// 创建旋转动画
var angle = 0;
function animate() {
  requestAnimationFrame(animate);

  // 清除画布
  ctx1.clearRect(0, 0, 100, 100);
  ctx2.clearRect(0, 0, 100, 100);

  // 旋转画布
  ctx1.save();
  ctx1.translate(50, 50);
  ctx1.rotate(angle);
  ctx1.translate(-50, -50);

  ctx2.save();
  ctx2.translate(50, 50);
  ctx2.rotate(-angle);
  ctx2.translate(-50, -50);

  // 重新绘制小圆球
  ctx1.beginPath();
  ctx1.arc(50, 50, 25, 0, 2 * Math.PI);
  ctx1.fillStyle = "#ff0000";
  ctx1.fill();

  ctx2.beginPath();
  ctx2.arc(50, 50, 25, 0, 2 * Math.PI);
  ctx2.fillStyle = "#00ff00";
  ctx2.fill();

  // 恢复画布
  ctx1.restore();
  ctx2.restore();

  // 更新角度
  angle += 0.01;
}

// 启动动画
animate();