Canvas 实践案例：页面动态气泡上升动画效果

2024-08-17 21:27:27 浏览数 (3)

前言

在现代网页设计中，动画效果能够显著提升用户体验。本文将详细介绍如何使用 HTML5 <canvas> 元素和 JavaScript 实现一个简单而引人注目的底部气泡上升动画效果。这个效果可以用于背景装饰或网页的一部分，增加视觉趣味性。

实现效果概述

我们将创建一个底部气泡动画，气泡从页面底部上升到随机高度，同时具有水平漂移效果。每个气泡的速度和上升高度都不同，使得动画看起来更自然和生动。

创建 HTML 结构

首先，在 HTML 文件中添加一个 <canvas> 元素，这是绘制动画的画布：

代码语言：html复制
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bubble Animation</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <canvas id="bubbleCanvas"></canvas>
    <script src="script.js"></script>
</body>
</html>

添加 CSS 样式

使用 CSS 确保 <canvas> 元素覆盖整个视口并定位在页面底部：

代码语言：css复制
/* styles.css */
body {
    margin: 0;
    overflow: hidden;
}

canvas {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
}

编写 JavaScript 动画代码

最后，编写 JavaScript 代码来创建和控制气泡动画。以下代码实现了气泡的创建、绘制和更新，使每个气泡的上升运动具有不同的速度和高度：

代码语言：javascript复制
// 获取 canvas 元素并获取绘图上下文
const canvas = document.getElementById('bubbleCanvas');
const ctx = canvas.getContext('2d');

// 设置 canvas 的宽度和高度为浏览器窗口的宽度和高度
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

// 存储所有气泡对象的数组
const bubbles = [];
// 气泡的数量
const numBubbles = 100;

// 创建一个新的气泡并添加到 bubbles 数组中
function createBubble() {
    // 气泡的半径，范围在 5 到 15 之间
    const radius = Math.random() * 10   5;
    // 气泡的初始 x 位置
    const x = Math.random() * canvas.width;
    // 气泡的初始 y 位置（在 canvas 底部下方）
    const y = canvas.height   radius;
    // 气泡的上升速度，范围在 1 到 4 之间
    const speed = Math.random() * 3   1;
    // 气泡的水平漂移量，范围在 -1 到 1 之间
    const drift = Math.random() * 2 - 1;

    // 气泡将上升到的随机高度（在 canvas 高度的 30% 到 80% 之间）
    const riseDistance = Math.random() * canvas.height * 0.5   canvas.height * 0.3;

    // 将新创建的气泡对象添加到 bubbles 数组中
    bubbles.push({ x, y, radius, speed, drift, riseDistance });
}

// 绘制单个气泡
function drawBubble(bubble) {
    ctx.beginPath();
    // 使用 arc 方法绘制圆形气泡
    ctx.arc(bubble.x, bubble.y, bubble.radius, 0, Math.PI * 2);
    // 设置气泡的填充颜色
    ctx.fillStyle = 'rgba(255, 255, 255, 0.6)';
    // 填充气泡
    ctx.fill();
}

// 更新单个气泡的位置
function updateBubble(bubble) {
    // 气泡向上移动
    bubble.y -= bubble.speed;
    // 气泡在水平位置上漂移
    bubble.x  = bubble.drift;

    // 如果气泡上升到指定的高度，则重置气泡
    if (bubble.y < bubble.riseDistance) {
        bubble.y = canvas.height   bubble.radius; // 将气泡重置到底部
        bubble.x = Math.random() * canvas.width; // 随机设置新的水平位置
        bubble.drift = Math.random() * 2 - 1; // 随机设置新的水平漂移量
        bubble.riseDistance = Math.random() * canvas.height * 0.5   canvas.height * 0.3; // 随机设置新的上升高度
    }
}

// 动画循环函数
function animate() {
    // 清除整个画布
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    // 更新并绘制每个气泡
    for (let i = 0; i < bubbles.length; i  ) {
        updateBubble(bubbles[i]);
        drawBubble(bubbles[i]);
    }

    // 请求下一帧动画
    requestAnimationFrame(animate);
}

// 初始化气泡
for (let i = 0; i < numBubbles; i  ) {
    createBubble();
}

// 开始动画循环
animate();

代码解析

  • createBubble: 生成一个气泡对象并将其添加到 bubbles 数组中。每个气泡有不同的半径（5到15像素）、位置（随机分布在画布宽度上，从底部开始）、速度（1到4像素每帧）、漂移量（-1到1像素每帧）和上升高度（随机分布在画布高度的30%到80%之间）。
  • drawBubble: 绘制气泡。使用 arc 方法在画布上绘制圆形气泡，气泡的颜色为半透明的白色。
  • updateBubble: 更新气泡的位置，如果气泡超出了视口，则将其重置到底部。还会调整气泡的水平漂移和上升高度。
  • animate: 清除画布并绘制所有气泡，然后请求下一帧动画，形成动画循环。

相关知识点

  1. HTML5 Canvas: <canvas> 元素用于在网页上绘制图形，通过 JavaScript 进行控制。getContext('2d') 方法返回一个 2D 绘图上下文，用于绘制路径、矩形、圆形等。
  2. JavaScript 动画: 使用 requestAnimationFrame 方法来创建流畅的动画效果。这个方法告诉浏览器你希望执行一个动画，并请求浏览器在下次重绘之前调用指定的函数来更新动画。
  3. 随机数生成: Math.random() 方法生成一个 0 到 1 之间的随机数，通过乘以一个范围值并加上一个偏移量，可以生成指定范围内的随机数。
  4. CSS 定位: 使用 position: absolute; 和 bottom: 0; left: 0; 可以将 <canvas> 元素定位在视口的底部左侧，覆盖整个视口。

总结

通过上述步骤，我们创建了一个简单而引人注目的气泡上升动画效果。你可以根据需要调整气泡的数量、速度、漂移范围以及上升高度，以实现不同的视觉效果。希望能帮助你在网页中添加更具吸引力的动画效果！

javascript canvas 腾讯技术创作特训营S8

0 人点赞