使用 JavaScript 创建令人着迷的粒子动画

这是 JavaScript 动画的核心部分。我们将定义粒子的配置并设置画布来绘制它们。

在上面的代码中，我们为粒子配置了各种属性，包括它们的数量、速度、半径、颜色（色调）和画布的背景颜色。

初始化粒子

绘制粒子

核心动画逻辑在绘制函数中处理，我们在其中不断更新和渲染粒子：

CSS 样式

为了确保我们的动画看起来优美，我们将使用一些 CSS 来设计主体和画布的样式：

随意尝试配置对象中的粒子属性来创建您独特的动画！查看 CodePen 上的现场演示，并在下面的评论中分享您的想法或改进。

首页 > 编程 > 使用 JavaScript 创建令人着迷的粒子动画

使用 JavaScript 创建令人着迷的粒子动画

发布于2024-11-08

Creating a Mesmerizing Particle Animation with JavaScript

这就是我们要创建的，将鼠标移到粒子上即可查看效果。

在本文中，我将引导您完成使用 JavaScript 和 HTML5 画布创建迷人粒子动画的过程。该项目不仅增强了网页的美观性，而且还是深入研究一些有趣的编码概念的绝佳机会。让我们开始吧！

项目概况

动画的特点是粒子围绕中心点以圆形图案移动。当鼠标悬停在画布上时，粒子会被吸引到光标上，从而创建动态且引人入胜的效果。我们将利用 Simplex Noise 库引入一些随机性，并使粒子的运动更加有机且更具视觉吸引力。

使用的技术

HTML5 Canvas：用于渲染动画。
JavaScript：用于管理动画逻辑。
CSS：用于样式和布局。
Simplex Noise：为粒子运动添加随机性。

设置环境

首先，创建一个 HTML 文件并使用以下脚本标记包含 Simplex Noise 库：

JavaScript 实现

这是 JavaScript 动画的核心部分。我们将定义粒子的配置并设置画布来绘制它们。

'use strict'; // Enables strict mode to enforce stricter parsing and error handling in JavaScript

// Configuration object for particle system
const config = {
    particleCount: 100,                  // Total number of particles in the system
    particlePropCount: 9,                // Number of properties each particle has
    baseTTL: 1,                          // Base time-to-live for each particle (in seconds)
    rangeTTL: 2,                         // Range of time-to-live variation (in seconds)
    baseSpeed: 0.001,                    // Base speed of particle movement
    rangeSpeed: 0.002,                   // Variation in particle speed
    circularSpeed: 0.001,                // Speed of particles' circular motion
    baseRadius: 2,                       // Minimum radius of particles
    rangeRadius: 3,                      // Maximum variation in particle radius
    baseHue: 220,                        // Base hue (color) of particles
    rangeHue: 120,                       // Variation in hue for particle colors
    backgroundColor: '#111827',          // Color of the background
    circleRadius: 250,                   // Radius of the circular area in which particles move
    glowStrength: 10,                    // Strength of the glow effect around particles
    randomnessFactor: 4,                 // Factor to introduce randomness in particle behavior
    trailLength: 10.2,                   // Length of the trail left by particles
    mouseForce: 2,                       // Increased mouse attraction force to pull particles
    mouseRadius: 200                      // Radius within which mouse influence affects particles
};

// Additional JavaScript code goes here...

在上面的代码中，我们为粒子配置了各种属性，包括它们的数量、速度、半径、颜色（色调）和画布的背景颜色。

初始化粒子

我们以圆形图案初始化粒子并为它们分配随机属性：

function initParticles() {
    particleProps = new Float32Array(config.particleCount * config.particlePropCount);
    const angleIncrement = TAU / config.particleCount;

    for (let i = 0; i 




  
  
  绘制粒子


核心动画逻辑在绘制函数中处理，我们在其中不断更新和渲染粒子：



function draw() {
    tick  ;
    ctx.a.clearRect(0, 0, canvas.a.width, canvas.a.height);
    ctx.b.fillStyle = config.backgroundColor;
    ctx.b.fillRect(0, 0, canvas.a.width, canvas.a.height);

    drawParticles();
    renderGlow();
    renderToScreen();
    requestAnimationFrame(draw);
}








  
  
  CSS 样式


为了确保我们的动画看起来优美，我们将使用一些 CSS 来设计主体和画布的样式：



body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh; /* Full viewport height */
    margin: 0;
    background: #000; /* Optional: background color */
}

.content--canvas {
    position: absolute; 
    top: 0;
    z-index: 1;
    width: 100vw; /* Full viewport width */
    height: 100vh; /* Full viewport height */
}

canvas {
    display: block; 
}





随意尝试配置对象中的粒子属性来创建您独特的动画！查看 CodePen 上的现场演示，并在下面的评论中分享您的想法或改进。