使用 JavaScript 創建令人著迷的粒子動畫
發佈於2024-11-08
瀏覽：807
這就是我們要創建的，將滑鼠移到粒子上即可查看效果。
在本文中，我將引導您完成使用 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 上的現場演示，並在下面的評論中分享您的想法或改進。
版本聲明
本文轉載於：https://dev.to/sohrabzia/creating-a-mesmerizing-particle-animation-with-javascript-e35?1如有侵犯，請聯絡[email protected]刪除
最新教學
更多>
-
jQuery 可以幫助使用 Comet 模式進行伺服器傳送訊息嗎？利用Comet 透過jQuery 進行伺服器傳送訊息在JavaScript 程式設計領域，伺服器推播功能已經獲得了突出地位，彗星設計模式正在成為一種流行的方法。本文探討了建構在著名 jQuery 函式庫之上的此類解決方案的可用性。 基於 jQuery 的 Comet 實現儘管 Comet 模式很流行...程式設計 發佈於2024-11-08 -
如何在 Keras 中實作 Dice 誤差係數的自訂損失函數？Keras 中的自訂損失函數：實作Dice 誤差係數在本文中，我們將探討如何建立自訂損失函數在Keras 中，聚焦在Dice 誤差係數。我們將學習實現參數化係數並將其包裝以與 Keras 的要求相容。 實現係數我們的自訂損失函數將需要係數和一個包裝函數。此係數測量 Dice 誤差，該誤差比較目標值和...程式設計 發佈於2024-11-08
-
為什麼 MySQL 會拋出「警告：mysql_fetch_assoc 參數無效」錯誤？MySQL 警告：mysql_fetch_assoc 的參數無效問題：嘗試從MySQL 檢索資料時資料庫時，遇到以下錯誤訊息：mysql_fetch_assoc(): supplied argument is not a valid MySQL result resource說明：mysql_fet...程式設計 發佈於2024-11-08
-
在 Python 中使用 ElementTree 的「find」和「findall」方法時如何忽略 XML 命名空間？在ElementTree 的“find”和“findall”方法中忽略XML 命名空間使用ElementTree 模組解析和定位XML 文件中的元素時，命名空間會帶來複雜性。以下介紹如何在 Python 中使用「find」和「findall」方法時忽略命名空間。 當 XML 文件包含命名空間時，會導...程式設計 發佈於2024-11-08
-
為什麼在 Node.js 應用程式中連接到 MySQL 時出現「connect ECONNREFUSED」錯誤？Node.js MySQL：解決「connect ECONNREFUSED」錯誤將Node.js 應用程式部署到遠端伺服器時，您可以嘗試建立與MySQL 資料庫的連線時遇到「connect ECONNREFUSED」錯誤。當 MySQL 連線參數中提供的主機配置不正確時，通常會出現此問題。 在您的特...程式設計 發佈於2024-11-08
-
用 Go 建構密碼管理器作为一名软件开发人员，我一直对安全性和可用性的交集着迷。最近，我决定开始一个令人兴奋的项目：使用 Go 创建一个命令行密码管理器。我想与您分享这段旅程的开始，从第一次提交开始。 创世记 2023 年 11 月 27 日，我对我的项目进行了初步提交，我将其命名为“dost”（印地语中的...程式設計 發佈於2024-11-08
-
如何使用 HTML ruby 元素在 HTML 中增強文字註釋在本教程中，我們將探索如何有效地使用 HTML 元素來建立增強的文字註解。 HTML5 中的 元素旨在顯示 ruby 註釋，這是東亞排版中常用的小文字元件。這些註釋通常用於提供發音指南或附加資訊。 元素對於需要在正文旁邊或上方進行詳細註釋的文檔至關重要，這使其在教育內容、語言學習資源和某...程式設計 發佈於2024-11-08
-
如何使用 RequestAnimationFrame 來穩定動畫的幀速率 (FPS)？RequestAnimationFrame Fps 穩定RequestAnimationFrame (rAF) 已在動畫中變得流行，可提供流暢且高效的執行。然而，控制幀速率 (FPS) 以確保一致性可能具有挑戰性。 將 rAF 限制為特定 FPS要將 rAF 限制為特定 FPS，您可以自上一幀執行以...程式設計 發佈於2024-11-08
-
如何實作跨域JavaScript的JSONP回呼？跨域JavaScript的JSONP回調實現為了方便不同域之間的通信，引入了JSONP（JSON with Padding）。此技術涉及建立一個回調函數，該函數可用於包裝 JSON 資料並使其可以從不同的網域進行存取。以下是如何在PHP 中實作JSONP：接受回呼參數首先，在GET 請求中，我們接受...程式設計 發佈於2024-11-08
-
每週部落格：本週我遇到的四件有趣的事情1. 避免 VS Code 中檔案名稱混淆 在VS Code中編寫C檔案時，我將一個檔案命名為first.c.cpp。完成程式後，我在執行過程中遇到了錯誤。經過30分鐘的檢查，我發現問題出在檔名： .c 副檔名導致 IDE 錯誤地將其識別為 C 程序，導致 VS Code 使用 g...程式設計 發佈於2024-11-08
-
Python正規表示式中「\d」和「[0-9]」有什麼不同？[字元]：正規表示式中的\dPython風格正規表示式中的「\d」字元類別用於匹配數字。數字通常定義為數字字元 (0-9)。然而，值得注意的是，「\d」的行為可能會根據程式語言和實現的不同而有所不同。 對於Python，「\d」符合滿足Unicode 的\p{Nd} 的字元屬性，其中包括以下內容：[...程式設計 發佈於2024-11-08
-
如何在 Golang 中寫入 Bytes.Buffer 的開頭？Golang 中的前綴緩衝區寫入在Golang 中，bytes.Buffer 是一種為高效字串連接和操作而設計的類型。然而，一些開發人員可能會遇到寫入緩衝區開頭的需要，這與僅附加到緩衝區的內建幫助器方法（例如 WriteString）不同。 寫入緩衝區開頭雖然 bytes.Buffer 的底層 bu...程式設計 發佈於2024-11-08
-
在 Laravel 中為本機檔案建立臨時 URL在 Laravel 處理私人檔案通常意味著涉及 S3 或 DigitalOcean 等第三方服務。但是如果您在本地開發環境中或有一個輕量級專案怎麼辦？您可能不想依賴第三方雲端服務。 幸運的是，Laravel 可以輕鬆地為本地儲存的文件提供臨時 URL。這種方法可以加快開發速度並簡化文件共享。 您...程式設計 發佈於2024-11-08
-
了解如何建立 API 支援的 Zelda BOTW 怪物畫廊 Web 元件模数教程回来了！ 大家好！暑假结束后，我带着 Modulo 教程回来了。我正在制作更多教程 - 请继续关注。也就是说，如果您对我的下一个主题有任何具体想法，请务必在评论中告诉我！ 我的上一篇教程是关于 API 驱动的 Pokémon Dance Party 组件的超级快速且有趣的“...程式設計 發佈於2024-11-08
-
如何將 jQuery 函數套用到具有相同 ID 的多個元素？使用 jQuery 存取具有相同 ID 的元素在 HTML 中，每個元素都應該有一個唯一的 ID。但是，在某些情況下，您可能需要將 jQuery 函數套用到具有相同 ID 的多個元素。在本文中，我們將探討如何處理這種情況。 根據提供的程式碼片段，jQuery 的 jcarousel() 函數僅應用於...程式設計 發佈於2024-11-08
![Python正規表示式中「\d」和「[0-9]」有什麼不同？](http://www.luping.net/uploads/20241108/1731036984672d87381abc1.jpg)
學習中文
- 1 走路用中文怎麼說？ 走路中文發音，走路中文學習
- 2 坐飛機用中文怎麼說？ 坐飞机中文發音，坐飞机中文學習
- 3 坐火車用中文怎麼說？ 坐火车中文發音，坐火车中文學習
- 4 坐車用中文怎麼說？ 坐车中文發音，坐车中文學習
- 5 開車用中文怎麼說？ 开车中文發音，开车中文學習
- 6 游泳用中文怎麼說？ 游泳中文發音，游泳中文學習
- 7 騎自行車用中文怎麼說？ 骑自行车中文發音，骑自行车中文學習
- 8 你好用中文怎麼說？ 你好中文發音，你好中文學習
- 9 謝謝用中文怎麼說？ 谢谢中文發音，谢谢中文學習
- 10 How to say goodbye in Chinese? 再见Chinese pronunciation, 再见Chinese learning
