Zarah.js: kiraan dan bentuk zarah kawalan

Tutorial zarah -zarah sebelumnya. Secara ringkas meliputi pelbagai ciri yang disediakan oleh perpustakaan dan bagaimana untuk memulakannya. Tutorial ini akan memberikan pengenalan terperinci kepada semua aspek yang berkaitan dengan penampilan fizikal zarah dalam zarah.js.

nombor zarah, warna dan kelegapan

Pertama, kita akan berurusan dengan bilangan dan ketumpatan zarah. Ketumpatan menentukan bilangan zarah yang berkumpul di rantau tertentu. Ia didayakan secara lalai, dan

ditetapkan kepada 800. Kod JSON berikut membolehkan anda mengawal bilangan zarah: value_area

<code>"number": {<br>  "value": 50, <br>  "density": {<br>    "enable": true,<br>    "value_area": 500<br>  }<br>}<br></code>

Jika anda menetapkan

pada ketumpatan ke enable, bilangan zarah yang dipaparkan akan betul -betul 50. Ganda nilai false akan mengurangkan bilangan zarah dengan kira -kira separuh. value_area

Terdapat tiga cara untuk menetapkan warna zarah. Anda boleh menetapkan warna menggunakan format heksadesimal, format RGB, atau format HSL. Oleh kerana ralat di perpustakaan, format RGB dan HSL hanya sah apabila nilai warna lalai dikeluarkan dari perpustakaan.

Jika anda mahu menetapkan warna zarah secara rawak, anda boleh menggunakan nilai "rawak". Akhirnya, untuk menetapkan warna secara rawak dari senarai warna, anda mesti memberikan warna dalam format heksadesimal sebagai array. Berikut adalah kod JSON untuk menetapkan warna zarah:

<code>"color": {<br>  "value": "#fff" //使用十六进制设置白色 (我们使用此版本)<br>  "value": {r:255, g:255, b:255} //使用RGB设置白色<br>  "value": {h:0, s:100%, l:100%} //使用HSL设置白色<br>  "value": ["#f00", "#0f0", "#00f"] //随机设置红色、绿色和蓝色<br>  "value": "random" //随机设置颜色<br>}<br></code>

Atribut Opacity memberi anda banyak kawalan. Anda boleh menetapkannya ke nilai yang tepat atau menggunakan nilai rawak dengan menetapkan

ke "random". Bukan itu sahaja, anda juga boleh menetapkan kelegapan zarah. Berikut adalah kod JSON untuk sifat opacity: true

<code>"opacity": {<br>  "value": 1,<br>  "random": true, // 在我们的例子中设置为false<br>  "anim": {<br>    "enable": true,<br>    "speed": 8,<br>    "opacity_min": 0.4,<br>    "sync": false<br>  }<br>}<br></code>

Menetapkan

ke "sync" akan menetapkan animasi kelegapan untuk semua zarah pada masa yang sama. Gunakan nilai 0.4 sebagai true untuk memastikan bahawa kelegapan mana -mana zarah tidak jatuh di bawah 0.4 semasa proses animasi. Ini adalah demonstrasi bintang yang bergerak melalui ruang angkasa. Cuba ubah nombor, warna, atau kelegapan zarah untuk melihat bagaimana ia berfungsi. "opacity_min"

Bentuk dan saiz

Particles.js mempunyai lima nilai yang berbeza untuk mencipta bentuk asas. Bentuk mudah seperti

akan menghasilkan zarah bulat, circle akan menghasilkan zarah segitiga, dan triangle akan menghasilkan persegi. Anda boleh menggunakan nilai edge untuk membuat poligon dengan edge polygon, anda perlu memberikan nilai nb_sides. Untuk membuat bintang sebenar, anda boleh menetapkan jenis bentuk ke nb_sides. Parameter star menambah garis besar warna dan lebar yang diberikan di sekitar semua zarah. Kod JSON berikut akan membuat heksagon. stroke

<code>"number": {<br>  "value": 50, <br>  "density": {<br>    "enable": true,<br>    "value_area": 500<br>  }<br>}<br></code>

juga boleh memaparkan imej dan bukannya bentuk asas. Pertama, anda mesti menentukan jenis bentuk sebagai image. Selepas itu, anda boleh menetapkan sumber imej dan ketinggian dan lebar yang dikehendaki. Perlu diingat bahawa lebar dan ketinggian tidak menentukan saiz zarah imej, tetapi nisbah aspek mereka. Berikut adalah beberapa kod JSON yang menggunakan imej bola sepak untuk membuat zarah:

<code>"color": {<br>  "value": "#fff" //使用十六进制设置白色 (我们使用此版本)<br>  "value": {r:255, g:255, b:255} //使用RGB设置白色<br>  "value": {h:0, s:100%, l:100%} //使用HSL设置白色<br>  "value": ["#f00", "#0f0", "#00f"] //随机设置红色、绿色和蓝色<br>  "value": "random" //随机设置颜色<br>}<br></code>

Perpustakaan ini juga membolehkan anda mencampurkan pelbagai bentuk. Sebagai contoh, anda boleh membuat keputusan untuk membuat bulatan, dataran, dan heksagon pada masa yang sama. Dalam kes ini, anda hanya lulus pelbagai yang mengandungi semua bentuk ini.

<code>"opacity": {<br>  "value": 1,<br>  "random": true, // 在我们的例子中设置为false<br>  "anim": {<br>    "enable": true,<br>    "speed": 8,<br>    "opacity_min": 0.4,<br>    "sync": false<br>  }<br>}<br></code>

Harta saiz

mempunyai semua pilihan untuk harta kelegapan. Anda boleh menetapkan saiz secara rawak serta menetapkan saiz animasi zarah tunggal. Semak kod JSON berikut dengan teliti.

<code>"shape": {<br>  "type": "polygon",<br>  "stroke": {<br>     "width": 4,<br>     "color": "#fff"<br>  },<br>  "polygon": {<br>     "nb_sides": 6<br>  }<br>}<br></code>

Jika anda menetapkan random ke false, semua zarah akan mempunyai saiz 25. Apabila random ditetapkan ke true, saiz bertindak sebagai had saiz maksimum untuk zarah. Menetapkan sync ke true dalam animasi akan mengubah saiz semua elemen pada masa yang sama. Anda harus membuka demo dan mencuba nilai yang berbeza untuk bilangan tepi poligon, animasi, dan sifat lain untuk melihat bagaimana ia mempengaruhi hasil akhir.

zarah yang disambungkan

Apabila zarah cukup dekat, anda boleh melukis garis sambungan di antara mereka dengan membolehkan harta line_linked.

Harta ini mempunyai empat nilai tambahan. Hartanah distance menentukan jarak maksimum di mana garis akan ditarik. Anda juga boleh menetapkan color ke rentetan hexadecimal. Kelegapan garis berbeza -beza mengikut jarak antara zarah. Nilai yang anda nyatakan sebagai opacity adalah kelegapan garis apabila zarah sangat dekat. Akhirnya, width menentukan lebar garis. Berikut adalah coretan kod JSON untuk demonstrasi yang disertakan.

<code>"shape": {<br>  "type": "image",<br>  "image": {<br>     "src": "img/football.png", // 设置图像路径。<br>     "width": 1,   // 宽度和高度不决定大小。<br>     "height": 1   // 它们只决定纵横比。<br>  }<br>}<br></code>

anda dapat melihat bahawa apabila jarak antara zarah melebihi 200 piksel, garisan hilang.

Ringkasan

Saya telah mencuba yang terbaik untuk menampung semua yang anda perlu tahu tentang mengubah bentuk, saiz, warna zarah, dan hampir setiap harta fizikal yang lain. Contoh -contoh dalam tutorial ini jelas menggambarkan betapa mudahnya menggunakan perpustakaan ini. Jika anda memerlukan perpustakaan zarah asas, anda pasti harus mencuba zarah.js.

Tutorial seterusnya akan mengajar anda bagaimana untuk mengawal pergerakan zarah dan interaksi mereka antara satu sama lain dan interaksi anda.

Artikel ini telah dikemas kini dan mengandungi sumbangan dari Kingsley Ubah. Kingsley bersemangat untuk mencipta kandungan yang mendidik dan memberi inspirasi kepada pembaca. Hobi termasuk membaca, bola sepak dan berbasikal.

Atas ialah kandungan terperinci Zarah.js: kiraan dan bentuk zarah kawalan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!