使用 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 上的現場演示，並在下面的評論中分享您的想法或改進。