Particles.js: Pengenalan

Terdapat sejumlah besar zarah kecil yang bergerak dan berinteraksi antara satu sama lain -atau berinteraksi dengan anda -dengan tarikan yang unik. Zarah.js akan sangat berguna jika anda perlu berurusan dengan sejumlah besar zarah. Seperti namanya, ia adalah perpustakaan JavaScript yang membantu anda membuat sistem zarah. Plus, ia ringan, mudah digunakan, dan memberi anda banyak kawalan.

Tutorial ini akan meliputi semua ciri perpustakaan ini dan membantu anda memulakannya. Tutorial ini adalah bahagian pertama siri ini dan hanya meliputi asas -asasnya.

Pemasangan dan Gunakan

Pertama, anda perlu menjadi tuan rumah perpustakaan. Anda boleh memuat naiknya ke pelayan anda sendiri atau menggunakan cdn JSDeliver seperti yang saya lakukan.

<code><br></code>

anda juga perlu membuat elemen dom di mana zarah.js akan membuat zarah. Beri bulatan yang mudah dikenalpasti. Pada ketika ini, fail anda sepatutnya kelihatan seperti ini:

<code>{<br>  "particles": {<br>    "number": {<br>      "value": 100<br>    },<br>    "shape": {<br>      "type": "circle"<br>    }<br>  },<br>  "interactivity": {<br><br>  }<br>}<br></code>

Saya menggunakan nilai 10 untuk menetapkan saiz salji salji. Oleh kerana kepingan salji berbeza -beza, saya menetapkan

ke random. Dengan cara ini, saiz kepingan salji boleh berbeza -beza antara batas sifar dan maksimum yang kami tentukan. Untuk melumpuhkan atau memadam semua baris yang menghubungkan zarah -zarah ini, anda boleh menetapkan true line_linked ke enable. false

Untuk memindahkan zarah, anda mesti menetapkan atribut

ke enable. Tanpa sebarang tetapan lain, zarah akan bergerak dalam keadaan huru -hara, sama seperti mereka berada di angkasa. Anda boleh menetapkan orientasi zarah -zarah ini menggunakan nilai rentetan (seperti true). Walaupun gerakan keseluruhan zarah ke bawah, mereka masih perlu bergerak sedikit secara rawak untuk kelihatan semula jadi. Ini boleh dilakukan dengan menetapkan "bottom" ke straight. Pada ketika ini, false akan mengandungi kod berikut: snowflakes.json

<code>{<br>  "particles": {<br>    "number": {<br>      "value": 100<br>    },<br>    "shape": {<br>      "type": "circle"<br>    },<br>    "size": {<br>      "value": 10,<br>      "random": true<br>    },<br>    "line_linked": {<br>      "enable": false<br>    },<br>    "move": {<br>      "enable": true,<br>      "speed": 2,<br>      "direction": "bottom",<br>      "straight": false<br>    }<br>  },<br>  "interactivity": {<br><br>  }<br>}<br></code>

Gunakan kod JSON di atas, anda akan mendapat hasil berikut:

Tukar tingkah laku interaktif

Jika anda melayang ke atas demo di atas, anda akan melihat bahawa garis masih wujud, tetapi hanya memaparkan sementara semasa hover. Untuk memadamnya sepenuhnya, anda boleh menetapkan sifat

acara onhover ke enable. Cuba klik pada demo di atas dan anda akan melihat bahawa setiap klik menghasilkan empat zarah. Ini adalah tingkah laku lalai. Anda juga boleh menukar bilangan zarah menggunakan atribut false di bawah push. Dalam kes ini, saya telah menetapkan nombor ini kepada 12. particles_nb

anda juga boleh menggunakan pilihan

untuk menentukan sama ada untuk mengesan peristiwa pada tetingkap atau pada kanvas. detect_on

Berikut adalah kod lengkap fail JSON:

<code><br></code>

seperti yang anda lihat, saya tidak perlu mengaktifkan acara onclick secara khusus. Ia didayakan secara lalai. Begitu juga, saya boleh memadamkan pilihan lain seperti interactivity dan "detect_on": "canvas" di bawah move. Saya menyimpannya supaya pemula tidak akan keliru tentang soalan seperti mengapa zarah tidak bergerak dalam garis lurus. "straight": false"

anda boleh mencuba nilai yang berbeza untuk mengubah suai kepingan salji di codepen di atas. Cukup klik tab JS

untuk mengedit JSON. Pemikiran Akhir

Particles.js mudah dimulakan. Sekiranya anda tidak pernah menggunakan sistem zarah sebelum ini, perpustakaan ini akan membantu anda memulakannya dengan segera. Tutorial ini hanyalah pengenalan asas kepada perpustakaan. Dalam dua tutorial yang akan datang dalam siri ini, saya akan merangkumi semua aspek perpustakaan dengan lebih terperinci.

Jika anda mempunyai sebarang soalan mengenai tutorial ini, sila beritahu saya di forum.

Atas ialah kandungan terperinci Particles.js: Pengenalan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!