Baru -baru ini, saya melihat animasi grid partikel sangat mempesona, dan saya membuatnya, dan itu cukup bagus sebagai latar belakang. CSDN tidak dapat mengunggah lebih dari 2m gambar, jadi cukup potong gambar statis:
Mari kita mulai mengatakan bagaimana mencapai efek ini:
Pertama -tama, tentu saja, tambahkan kanvas:
<Canvas ID = Canvas> </canvas>
Gaya berikut:
<Style> #Canvas {Posisi: Absolute;Peran z -index: -1 kanvas di atas adalah bahwa ia dapat ditempatkan di bawah latar belakang beberapa elemen.
Untuk memastikan bahwa kanvas dapat diisi dengan seluruh browser, perlu untuk mengatur tinggi kanvas yang sama seperti browser:
Function getSize () {w = canvas.width = window.innerwidth;W dan H di atas mewakili lebar browser.
Dapatkan lebar browser, dan langkah selanjutnya adalah menarik partikel.
Var opt = {Particleamount: 50, // Jumlah partikel default speed: 1, // varian kecepatan gerak partikel: 1, // variabel kecepatan gerakan partikel: rgb (32.245.245), // warna partikel Linecolor: RGB (32.245.245), // Warna koneksi grid defaultradius: 2, // Radius partikel varianstradius: 2, // variabel pemikiran radius partikel: 200 // jarak minimum antara partikel};Variabel kecepatan dan variabel jari -jari di atas adalah untuk memastikan bahwa ukuran dan kecepatan partikel tidak persis sama.
Kemudian kami membuat kelas untuk menginisialisasi partikel.
Function partical () {this.x = math.random ()*w; .speed = OptionsPeed + opt.variantspeed*math.random (); Warna = opt.particlecolor; // Warna partikel this.radius = opt.defaultradius+math.random () * opt.variTytradius; ), // kecepatan partikel pada x -axis y: this.speed * math.sin (this.directionangle) // kecepatan partikel pada y -axis} this.update = function () {// fungsi pembaruan partikel this.border (); momen this.y += this.vector.y; // partikel -partikel partikel akan berada di koordinat m -axis momen berikutnya} this.border = function () {// menilai bahwa partikel telah mencapai perbatasan jika (this.x> = w || this.x <= 0) {// angka negatif this.vector.x *= -1;} if (this.y> = h || this.y <= 0) {// Jika mencapai batas atas dan bawah, buat kecepatan y -axis ke nomor negatif asli ini .vector.y *= -1;} if (this.x> w) {// berikut berikut berikut adalah operasi mengubah jendela browser dalam ukuran ukuran, dan beberapa partikel setelah ukuran jendela akan disembunyikan. if (this.x <0) {this.x = 0;} if (this.y <0) {this.yy = 0;} this.draw = function () {// Gambar fungsi partikel ctx. BeginPath ();1. Kecepatan awal dan sudut masing -masing partikel dihasilkan secara acak, dan warna partikel ditentukan oleh opsi pengaturan yang relevan.
2. Vektor ini digunakan untuk menyimpan arah pergerakan partikel: jika ini. Vektor.x adalah 1, partikel bergerak ke kanan; Demikian pula, jika this.vector.y negatif, partikel bergerak ke atas, dan jika positif, partikel bergerak ke bawah.
This.update digunakan untuk memperbarui koordinat posisi berikutnya dari setiap partikel. Pertama, deteksi tepi dilakukan; jika pergerakan partikel melebihi ukuran kanvas, vektor arah dikalikan dengan -1 untuk menghasilkan arah gerakan terbalik.
3. Zoom jendela dapat menyebabkan partikel melampaui batas, sehingga fungsi deteksi tepi tidak dapat ditangkap, sehingga serangkaian pernyataan IF diperlukan untuk mendeteksi situasi ini dan mengatur ulang posisi partikel ke batas kanvas saat ini.
4. Gambarlah titik -titik ini di kanvas di langkah terakhir.
Partikel -partikel partikel telah ditulis, dan dia akan menariknya di bawah:
Function init () {getSize (); for (let i = 0; i <ompt.particalamount; i ++) {parical.push (new partical ());} loop ();}Inisialisasi Opt.particalAmount di atas memiliki objek partikel, yang menginisialisasi objek tetapi tidak ditarik.
Function loop () {ctx.clearrect (0,0, w, h); draw ();} window.requestanimationframe (loop);}Setiap kali fungsi loop () dieksekusi, konten pada kanvas akan dihapus, dan kemudian koordinat partikel dialkulasikan ulang melalui fungsi pembaruan () dari objek partikel, dan partikel ditarik melalui fungsi draw () dari objek partikel. Berikut ini adalah efeknya saat ini:
Namun, setelah ukuran jendela browser berubah, beberapa partikel akan hilang.
Window.addeventListener (mengubah ukuran, fungsi () {winResize ()}, false);Maka Anda perlu menulis fungsi WinResize () Dan lebih banyak kinerja yang dikonsumsi. Ukuran browser.
Var Particlle = [], W, H; tinggi, ada pengantar}, tunda)} di bagian atas artikel
Dengan cara ini, semua animasi partikel selesai, dan kemudian kita dapat menggambar garis antara partikel. akan menariknya di antara mereka.
Jadi bagaimana menghitung jarak antara kedua partikel, Anda dapat memikirkan pelajaran pertama matematika SMA Junior, teorema pirotheboken, kuadrat dan kuadrat dan kuadrat dan segitiga kanan dari segitiga kanan sama dengan kuadrat dari Perubahan ketiga.
Kita sekarang tahu koordinat sumbu x -axis dan y dari masing -masing partikel, maka kita dapat menghitung jarak antara dua titik, menulis fungsi, dan melewati dua titik, sebagai berikut:
Fungsi getDistance (point1, point2) {return math.sqrt (math.pow (point1.x -point2.x, 2) + math.pow (point1.y -point2.y, 2));}Sekarang kita dapat menghitung jarak antara dua titik, jadi kita menghitung jarak antara semua partikel dan semua partikel lain untuk menentukan apakah mereka perlu terhubung. Bit itu jelek, sehingga kita dapat menentukan transparansi koneksi sesuai dengan jarak antara kedua partikel. Jarak tertentu tidak akan ditampilkan.
Function linepoint (point, hub) {for (let i = 0; i <hub.length; i ++) {let Distance = getDistance (point, hub [i]); (if (opacity> 0) {ctx.linewidth = 0,5; ctx.strokestyle = rgba (+line [0]+,+line [1]+,+line [2]+,+opacity+); ctx.beginpath () ; }}}}}}}}Dua parameter yang ditransmisikan di atas adalah array dari satu titik dan seluruh titik, membiarkan opacity = 1 -Distance/optionistance yang digunakan untuk menentukan transparansi antara koneksi dan juga menilai jarak. adalah negatif, dan penilaian berikut disaring.
var line = option.linecolor.match (// d+/g);
Akhirnya, jarak perhitungan jarak secara terus -menerus diedarkan dalam fungsi loop ().
Function loop () {ctx.clearrect (0,0, w, h); draw ();} untuk (biarkan i = 0; i <particle.length; i ++) {// Tambahkan linepoint siklik ini (partikel [i], partikel)} window.requestanimationframe (loop);}Harus ditunjukkan bahwa jika Anda menambahkan terlalu banyak titik ke/atau terlalu banyak jarak koneksi (jarak koneksi akan membuat terlalu banyak baris), animasi tidak akan dibawa. Ketika port tampilan menyempit, yang terbaik adalah mengurangi kecepatan gerakan partikel: semakin kecil ukuran partikel, dan kecepatan gerakan di ruang sempit tampak lebih cepat.
Tunjukkan seluruh kode:
<! 0; Canvas); var ctx = canvas.getContext (2D); ), // Warna partikel linecolor: rgb (32.245.245), // warna kisi yang menghubungkan warna defaultradius: 2, // radius partikel varianstradius: 2, // variabel mindistance dari jari -jari partikel: 200 / / Kawat yang terhubung antara jarak minimum partikel}; init (); () {GetSize (getSize); i <particle.length; i ++) {partic [i] .update (); Linepoint (partikel [i], partikel)} window.requestanimationframe (loop);} fungsi linepoint (titik, hub) {for (misalkan i = 0; i <hub.length; i ++) let Dispance = getDistance (titik, hub [i]); +line [2],+opacity+); .closePath (); -Point2, 2));} getSize () {w = canvas.width = window.innerwidth; x -axis Koordinat partikel this.y = math.random ()*h; Kecepatan Gerakan Partikel adalah. .Defaultradrad IUS+Math. partikel dalam x -axis y: this.speed* matematika. partikel this.border (); momen berikutnya ini.y += this.vector.y; Apakah mereka semua mencapai perbatasan jika (this.x> = w || this.x <= 0) {// Jika Anda mencapai batas kiri dan kanan, buat kecepatan x -axis berubah menjadi angka negatif asli ini .vector.x *= -1;} if (this.y> = h || this.y <= 0) {// Jika mencapai batas atas dan bawah, kecepatan y -sumbu akan berubah menjadi Nomor negatif this.vector.y *= -1; , sehingga ia dapat menampilkan this.x = w;} if (this.y> h) {this.y = h;} if (this.x <0) {this.x = 0;} if (this.y <0) {this.y = 0;} this.draw = function () {{{// Fungsi partikel menggambar ctx.beginpath (); 0, Math.pi * 2);Di atas adalah semua isi artikel ini.