Zarah.js: gerakan dan interaksi

Dalam tutorial ini, kita akan menyelam ke dalam zarah.js dan belajar bagaimana untuk mengawal gerakan zarah, corak interaksi, dan peristiwa. Dalam tutorial sebelumnya, kami telah belajar bagaimana untuk membuat zarah -zarah yang berbeza -beza bentuk dan saiz. Walau bagaimanapun, terdapat kekurangan interaksi antara zarah, dan mereka melewati satu sama lain, seolah -olah tidak ada zarah lain. Tutorial ini akan membuat kelemahan ini.

Pergerakan zarah kawalan

tidak semua zarah dalam sistem zarah bergerak dalam arah rawak. Malah untuk pergerakan rawak, terdapat kuasa lain. Sebagai contoh, zarah boleh mempercepatkan apabila menghampiri satu sama lain, atau pulih selepas perlanggaran. Semua pilihan ini boleh dikawal oleh pelbagai parameter di bawah atribut

. move

Jika anda tidak mahu zarah bergerak, anda boleh menetapkan

ke enable. Halaju zarah boleh ditentukan menggunakan parameter false. Untuk membuat setiap zarah bergerak pada kelajuan rawak, tetapkan speed ke random. Sebaliknya, untuk menjadikannya bergerak ke arah rawak, nyatakan true sebagai direction. none

zarah akhirnya akan bergerak ke sempadan sistem.

Parameter menentukan sama ada zarah melantun atau muncul dari arah yang lain. Apabila ditetapkan ke out_mode, zarah akan keluar dari kanvas; out bounce Nampaknya tidak wajar bahawa zarah melewati satu sama lain sementara kelajuan tetap tidak berubah. Untuk menukar halaju zarah pada setiap perlanggaran, tetapkan

ke

. Menariknya, tetapan ini hanya sah apabila sifat bounce atau true diaktifkan. Setiap kali zarah bertembung, ia membalikkan arahnya, walaupun ia bukan perlanggaran. line_linked attraction Akhirnya, mari kita bincangkan daya tarikan. Apabila daya tarikan diaktifkan, zarah mengubah halaju apabila zarah -zarah lain wujud di dekatnya. Perubahan mungkin positif atau negatif, bergantung kepada nilai parameter lain. Daya tarikan setiap arah berkadar songsang dengan nilai -nilai parameter masing -masing

dan

. Nilai lalai adalah tinggi supaya tarikan jelas diperhatikan. Sebaliknya, jika nilai -nilai ini ditetapkan terlalu rendah, zarah akan mendapat halaju yang sangat tinggi selepas tempoh masa. rotateX rotateY

Kod JSON untuk gerakan zarah di atas adalah seperti berikut:

ingat bahawa apabila

"move": {
  "enable": true,
  "speed": 20,
  "random": true,
  "direction": "none",
  "bounce": true,
  "out_mode": "bounce",
  "attract": {
    "enable": true,
    "rotateX": 10,
    "rotateY": 10
  }
}

ditetapkan ke

dan straight ke true pada masa yang sama, zarah tidak akan bergerak. direction none

peristiwa dan corak interaktif

Bolehkah pengguna berinteraksi dengan zarah? Jawapannya adalah ya. Zarah.js boleh bertindak balas kepada tiga peristiwa: hover, click dan resize. Dengan menetapkan nilai parameter detect_on, peristiwa dalam kanvas atau tingkap itu sendiri dapat dikesan. Semua peristiwa ini akan dicetuskan apabila melayang, mengklik, atau mengubah saiz kanvas/tingkap.

Apabila resize ditetapkan ke true, zarah menyesuaikan diri di ruang yang tinggal tanpa cacat. Apabila resize ditetapkan kepada false, zarah -zarah berubah bentuk untuk memenuhi sebarang perubahan dalam saiz kanvas.

"move": {
  "enable": true,
  "speed": 20,
  "random": true,
  "direction": "none",
  "bounce": true,
  "out_mode": "bounce",
  "attract": {
    "enable": true,
    "rotateX": 10,
    "rotateY": 10
  }
}

Parameter

mode Tentukan bagaimana pengguna berinteraksi dengan zarah. Perpustakaan mentakrifkan lima mod interaksi: grab, bubble, repulse, push, remove, dan

.

grab

Mod Membuat garis sambungan antara titik yang anda hover atau klik dan zarah berdekatan dalam jarak tertentu. Mod ini hanya terpakai untuk melayang peristiwa. Kod JSON di bawah menarik garis dengan kelegapan 1 untuk menyambungkan semua zarah dalam 800 piksel.

"detect_on": "canvas",
"events": {
  "onhover": {
    "enable": true,
    "mode": "repulse"
  },
  "onclick": {
    "enable": true,
    "mode": "push"
  },
  "resize": true
}

Mod bubble repulse mengubah saiz dan kelegapan semua zarah dalam jarak tertentu, tempohnya terpulang kepada anda. Mod hover menyimpan zarah dari kedudukan klik. Kedua -dua mod boleh ditambah kepada click atau

. Tempoh hanya terpakai untuk mengklik peristiwa dalam kedua -dua kes.

"grab": {
  "distance": 800,
  "line_linked": {
    "opacity": 1
  }
}

anda boleh cuba menukar pelbagai parameter untuk membuat demo berfungsi lebih baik.

Mod push remove menambah sejumlah zarah setiap kali klik tetikus. Zarah akan ditambah ke kedudukan yang diklik. Begitu juga, mod

menghilangkan zarah dari kanvas. Zarah yang akan dikeluarkan dipilih secara rawak.

"bubble": {
  "distance": 600,
  "size": 60,
  "duration": 0.1,
  "opacity": 1
},
"repulse": {
  "distance": 500,
  "duration": 0.5
}

Ringkasan

Siri tutorial ini merangkumi semua ciri -ciri zarah.js. Untuk mengelakkan masalah seperti zarah yang tidak pulih dari semasa ke semasa, saya juga menyebut beberapa langkah berjaga -jaga dari semasa ke semasa.

Jika anda memerlukan lebih banyak maklumat mengenai semua parameter yang kami bincangkan, sila rujuk dokumentasi untuk perpustakaan ini. Di samping itu, jika anda mempunyai masalah menggunakan perpustakaan, atau beberapa ciri yang tidak normal, disarankan agar anda membaca kod sumber untuk memahami bagaimana ia berfungsi secara dalaman.

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

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