抽象的なパーティクル アニメーションに魅了されたことがありますか?これらの流れるような動的なビジュアルは、プレーンな JavaScript と HTML の Canvas 要素を使用する驚くほど簡単な手法で実現できます。この記事では、数千のパーティクルにアニメーションを与え、自然な動きを与えるフロー フィールドを作成するプロセスを詳しく説明します。
まず、キャンバスを設定するための HTML ファイル、スタイルを設定するための CSS ファイル、ロジックを処理するための JavaScript ファイルの 3 つのファイルが必要です。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Flow Fields</title> <link rel="stylesheet" href="styles.css"> </head> <body> <canvas id="canvas1"></canvas> <script src="script.js"></script> </body> </html>
シンプルなスタイルを追加して、キャンバスの背景を黒にし、すべてのパディングとマージンが削除されていることを確認しましょう。
* { margin: 0; padding: 0; box-sizing: border-box; } canvas { background-color: black; }
Particle クラスは、アニメーションの中核となる部分です。各パーティクルがキャンバス上を移動し、過去の位置の痕跡を残し、流れるような効果を生み出します。
class Particle { constructor(effect) { this.effect = effect; this.x = Math.floor(Math.random() * this.effect.width); this.y = Math.floor(Math.random() * this.effect.height); this.speedModifier = Math.floor(Math.random() * 5 + 1); this.history = [{ x: this.x, y: this.y }]; this.maxLength = Math.floor(Math.random() * 200 + 10); this.timer = this.maxLength * 2; this.colors = ['#4C026B', '#8E0E00', '#9D0208', '#BA1A1A', '#730D9E']; this.color = this.colors[Math.floor(Math.random() * this.colors.length)]; } draw(context) { context.beginPath(); context.moveTo(this.history[0].x, this.history[0].y); for (let i = 1; i < this.history.length; i++) { context.lineTo(this.history[i].x, this.history[i].y); } context.strokeStyle = this.color; context.stroke(); } update() { this.timer--; if (this.timer >= 1) { let x = Math.floor(this.x / this.effect.cellSize); let y = Math.floor(this.y / this.effect.cellSize); let index = y * this.effect.cols + x; let angle = this.effect.flowField[index]; this.speedX = Math.cos(angle); this.speedY = Math.sin(angle); this.x += this.speedX * this.speedModifier; this.y += this.speedY * this.speedModifier; this.history.push({ x: this.x, y: this.y }); if (this.history.length > this.maxLength) { this.history.shift(); } } else if (this.history.length > 1) { this.history.shift(); } else { this.reset(); } } reset() { this.x = Math.floor(Math.random() * this.effect.width); this.y = Math.floor(Math.random() * this.effect.height); this.history = [{ x: this.x, y: this.y }]; this.timer = this.maxLength * 2; } }
Effect クラスは、パーティクルと、パーティクルの動きを制御する流れフィールド自体の作成を処理します。
class Effect { constructor(canvas) { this.canvas = canvas; this.width = this.canvas.width; this.height = this.canvas.height; this.particles = []; this.numberOfParticles = 3000; this.cellSize = 20; this.flowField = []; this.curve = 5; this.zoom = 0.12; this.debug = true; this.init(); } init() { this.rows = Math.floor(this.height / this.cellSize); this.cols = Math.floor(this.width / this.cellSize); for (let y = 0; y < this.rows; y++) { for (let x = 0; x < this.cols; x++) { let angle = (Math.cos(x * this.zoom) + Math.sin(y * this.zoom)) * this.curve; this.flowField.push(angle); } } for (let i = 0; i < this.numberOfParticles; i++) { this.particles.push(new Particle(this)); } } drawGrid(context) { context.save(); context.strokeStyle = 'white'; context.lineWidth = 0.3; for (let c = 0; c < this.cols; c++) { context.beginPath(); context.moveTo(c * this.cellSize, 0); context.lineTo(c * this.cellSize, this.height); context.stroke(); } for (let r = 0; r < this.rows; r++) { context.beginPath(); context.moveTo(0, r * this.cellSize); context.lineTo(this.width, r * this.cellSize); context.stroke(); } context.restore(); } render(context) { if (this.debug) this.drawGrid(context); this.particles.forEach(particle => { particle.draw(context); particle.update(); }); } }
すべてを機能させるには、キャンバスを継続的にクリアしてパーティクルを再レンダリングするアニメーション ループが必要です。
const effect = new Effect(canvas); function animate() { ctx.clearRect(0, 0, canvas.width, canvas.height); effect.render(ctx); requestAnimationFrame(animate); } animate();
Particle クラスと Effect クラスを分解することにより、バニラ JavaScript のみを使用して、流動的でダイナミックな流れフィールド アニメーションを作成しました。 HTML キャンバスのシンプルさと JavaScript の三角関数を組み合わせることで、これらの魅惑的な視覚効果を構築できます。
パーティクルの数、色、流れ場の式を自由にいじって、独自のユニークな効果を作成してください。
以上がフローフィールド画面の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。