返回

将创意融入编程，一条动态的环形进度条引爆网络

前端

复刻苹果发布会的环形进度条，打造你的交互式杰作

在苹果公司令人印象深刻的发布会上，环形进度条以其优雅的外观和引人注目的动画效果吸引了观众。现在，让我们揭开它的奥秘，看看如何使用 JavaScript 和 Canvas API 复刻这个令人惊叹的效果。

构建一个基本的环形进度条

首先，我们需要一个圆形元素作为进度条的背景，还有一个圆弧元素表示进度。使用 HTML 和 CSS，我们可以轻松地构建这个基础结构。

<div class="progress-container">
  <div class="progress-bar"></div>
</div>

.progress-container {
  width: 200px;
  height: 200px;
  position: relative;
}

.progress-bar {
  width: 180px;
  height: 180px;
  border-radius: 90px;
  background: linear-gradient(to right, #ff0000, #ff9900, #ffff00, #00ff00, #0099ff, #0000ff, #9900ff, #ff00ff);
  position: absolute;
  top: 10px;
  left: 10px;
}

使用 JavaScript 和 Canvas API 实现动画

现在，让我们使用 JavaScript 和 Canvas API 为这个进度条赋予生命。我们在 Canvas 元素中绘制一个圆形路径，并根据进度动态更新圆弧的长度。

const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');

const radius = 90;
const startAngle = -Math.PI / 2; // 12 o'clock
const endAngle = Math.PI * 1.5; // 6 o'clock

let progress = 0; // 0 to 1

function drawProgress() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  ctx.beginPath();
  ctx.arc(radius, radius, radius, startAngle, endAngle);
  ctx.strokeStyle = '#ffffff';
  ctx.lineWidth = 10;
  ctx.stroke();

  ctx.beginPath();
  ctx.arc(radius, radius, radius, startAngle, progress * endAngle);
  ctx.strokeStyle = '#ff0000';
  ctx.lineWidth = 10;
  ctx.stroke();

  requestAnimationFrame(drawProgress);
}

drawProgress();

用户交互

最后，我们希望用户能够控制进度条的进度。只需添加一个按钮，在单击时调用以下函数即可：

function setProgress() {
  progress += 0.1;

  if (progress > 1) {
    progress = 0;
  }
}

扩展应用

环形进度条不仅仅是一个简单的进度指示器。它可以用于多种目的，包括：

  • 计时器： 使用它创建倒计时或计时器，让用户一目了然地了解剩余时间。
  • 仪表盘： 创建仪表盘，显示各种指标和数据，帮助用户快速了解总体情况。
  • 游戏进度： 展示游戏玩家的进度，激励他们继续前进。

只要发挥你的想象力，环形进度条就可以成为你网站或应用程序中的一个引人注目的功能。

结论

通过结合 HTML、CSS、JavaScript 和 Canvas API，我们可以轻松复刻苹果发布会上的标志性环形进度条。这个效果既美观又实用，可以为你的项目增添交互性和视觉吸引力。

常见问题解答

  1. 如何更改进度条的颜色？

    • 在 CSS 中修改 background 属性。

  2. 如何调整进度条的大小？

    • 在 CSS 中修改 .progress-container 和 .progress-bar 的 width 和 height 属性。

  3. 如何控制进度条的动画速度？

    • 调整 drawProgress() 函数中 requestAnimationFrame 的更新频率。

  4. 如何使用进度条来显示计时器？

    • 使用 setInterval() 函数定期更新 progress 变量。

  5. 如何使用进度条来创建仪表盘？

    • 为每个指标创建一个单独的进度条，并根据相关数据动态更新进度。