مثال على تنفيذ خلفية الرسوم المتحركة لجسيمات القماش

بدون تأثير الاتصال:

تأثير الاتصال:

إن تحقيق مثل هذا التأثير هو في الواقع أمر بسيط للغاية ويمكن تقسيمه تقريبًا إلى الخطوات التالية:

أولاً، تحتاج إلى إنشاء علامة canvas في العنصر الأصلي الذي يحتاج إلى عرض خلفية الجسيم وتحديد width height . عندما نقوم بإنشاء إحداثيات نقطة عشوائية، نحتاج إلى استخدام width height كمرجع. width height يساوي عرض وارتفاع العنصر الأصلي.

 // إذا كان العنصر الأصلي هو bodyconst ele = document.body;const Canvas = document.createElement('canvas');canvas.width = ele.clientWidth;canvas.height = ele.clientHeight;// أدخل علامة قماش في ele .appendChild (قماش)؛

قم بإنشاء قدر معين من معلومات إحداثيات النقطة بشكل عشوائي مع width height كمرجع، بما في ذلك x و y و rateX (معدل حركة النقطة على المحور X)، rateY (معدل حركة النقطة على المحور Y) ، و rateX و rateY يحددان حركة مسار النقطة.

 نقاط const = [];// قم بإنشاء إحداثيات النقاط بشكل عشوائي، تحتاج إلى تحديد الحد الأقصى لقيمة نصف القطر function getPoint(radius) { const x = Math.ceil(Math.random() * this.width), // الإحداثي x للجسيم y = Math.ceil(Math.random() * this.height), // الإحداثي y للجسيم r = +(Math.random() * this.radius).toFixed(4) ، // نصف قطر معدل الجسيمX = +(Math.random() * 2 - 1).toFixed(4), // معدل حركة الجسيم في اتجاه x معدلY = +(Math.random() * 2 - 1) .toFixed(4) ); // معدل حركة الجسيمات في الاتجاه y return { x, y, r,rateX,rateY };}// قم بإنشاء معلومات إحداثيات 100 نقطة بشكل عشوائي لـ (let i = 0; i < 100; i++) { point.push(this.getPoint());}

ارسم مصفوفة النقاط التي تم إنشاؤها على اللوحة القماشية

 دالة drawPoints() { point.forEach((item, i) => { ctx.beginPath(); ctx.arc(item.x, item.y, item.r, 0, Math.PI*2, false); ctx.fillStyle = '#fff'; // انقل إحداثيات النقطة وفقًا لمعدل X وrateY if(item.x > 0 && item.x < width && item.y > 0 && item.y < height) { item.x += item.rateX *rate; item.y += item.rateY *rate } else { // إذا تجاوزت حركة الجسيمات الحدود، فحرك إزالة الجسيمات وإعادة إنشاء نقطة جديدة.splice(i, 1);

اجتياز مصفوفة النقاط ومقارنة إحداثيات النقاط إذا كانت المسافة بين النقطتين أقل من قيمة معينة، ارسم خطًا مستقيمًا بين النقطتين يتغير lineWidth مع المسافة بين النقطتين كلما كان الخط أرق.

 // احسب المسافة بين نقطتين function dis(x1, y1, x2, y2) { var disX = Math.abs(x1 - x2), disY = Math.abs(y1 - y2); return Math.sqrt(disX *) disX + disY * disY);} function drawLines() { const len ​​​​= point.length; // الحكم على إحداثيات المركز في أزواج for(let i = 0; i < len; i++) { for(let j = len - 1; j >= 0; j--) { const x1 = point[i].x, y1 = point[i].y, x2 = point[j]. x, y2 = point[j].y, disPoint = dis(x1, y1, x2, y2); // إذا كانت المسافة بين نقطتين أقل من 150، ارسم خطًا if(disPoint <= 150) { ctx.beginPath(); ctx.moveTo(x1, y1); ctx.lineTo(x2, y2); ctx.strokeStyle = '#fff'; // كلما زادت المسافة بين نقطتين، كان الخط أرق بالعكس ctx.lineWidth = 1 - disPoint / distance ctx.stroke();

استخدم requestAnimationFrame لاستدعاء طريقة draw في حلقة (تتضمن طريقة الرسم نقاط وخطوط رسم)، وفي نفس الوقت قم بتغيير موضع النقطة وفقًا لـ rateX و rateY أثناء draw .

 // استدعاء وظيفة الرسم لبدء الرسوم المتحركة (function draw() { ctx.clearRect(0, 0, width, height); drawPoints(); // إذا لم تكن بحاجة إلى رسم خطوط، فما عليك سوى إلغاء السطر التالي من code.drawLines(); window.requestAnimationFrame(draw);}());

يرجى الاطلاع على الكود الكامل: https://github.com/PengJiyuan/particle-bg

موقع جيثب الخاص بي: https://github.com/PengJiyuan

ما ورد أعلاه هو المحتوى الكامل لهذه المقالة وآمل أن يكون مفيدًا لدراسة الجميع وآمل أيضًا أن يدعم الجميع شبكة VeVb Wulin.