Share
In de vorige handleiding van Particles.js werd kort ingegaan op verschillende functies die de bibliotheek biedt en hoe u aan de slag kunt gaan met de bibliotheek. In deze tutorial zal ik in detail alle aspecten van Particles.js bespreken die handelen over het fysieke uiterlijk van deeltjes.
Het eerste ding dat we zullen behandelen is het aantal en de dichtheid van deeltjes. Dichtheid bepaalt het aantal deeltjes dat samen in een bepaald gebied wordt gepakt. Het is standaard ingeschakeld met de value_area ingesteld op 800. Hier is de JSON waarmee u het aantal deeltjes kunt regelen:
"number": "value": 50, "density": "enable": true, "value_area": 500
Als je instelt in staat stellen onder dichtheid tot vals dan zal het aantal weergegeven deeltjes exact 50 zijn. Verdubbeling van de waarde van value_area zal het aantal deeltjes ongeveer met de helft verminderen.
Er zijn drie manieren om de kleuren van deeltjes in te stellen. U kunt kleuren instellen in HEX-indeling, RGB-indeling of HSL-indeling. Vanwege een fout in de bibliotheek werken RGB- en HSL-indeling alleen als u de standaardkleurwaarde uit de bibliotheek verwijdert.
Als u de partikelkleur willekeurig wilt instellen, kunt u dat doen met de waarde "willekeurig". Om kleuren willekeurig in een lijst met kleuren in te stellen, moet u de kleuren als een array in HEX-formaat opgeven. Hier is de JSON om kleuren in te stellen voor deeltjes:
"kleur": "waarde": "#fff" // zet wit in HEX (we gebruiken deze versie) "waarde": r: 255, g: 255, b: 255 // stel wit in RGB in " waarde ": h: 0, s: 100%, l: 100% // stel wit in HSL in" waarde ": [" # f00 "," # 0f0 "," # 00f "] // stel rood, groen in en blauw willekeurig "waarde": "willekeurig" // stel willekeurig kleuren in
De dekkingseigenschap geeft u veel controle. U kunt dit instellen op een exacte waarde of willekeurige waarden gebruiken door deze in te stellen "willekeurig" naar waar. Niet alleen dat, maar je kunt ook de opaciteit van deeltjes animeren. Hier is de JSON-code voor de eigenschap opacity:
"opacity": "value": 1, "random": true, // Zet in ons geval op false "anim": "enable": true, "speed": 8, "opacity_min": 0.4, "sync ": false
omgeving "synchroniseren" naar waar zal de opaciteit van alle deeltjes tegelijkertijd animeren. Gebruik een waarde van 0.4 voor "Opacity_min" zorgt ervoor dat de opaciteit tijdens animatie nooit onder 0,4 daalt voor elk deeltje. Hier is een demo met sterren die door de ruimte bewegen. Probeer het aantal, de kleur of de dekking van deeltjes te wijzigen om hun effect te zien.
Particles.js heeft vijf verschillende waarden om basisvormen te maken. Een eenvoudige vorm zoals cirkel genereert een circulair deeltje, driehoek genereert driehoekige deeltjes, en rand genereert vierkanten. U kunt de waarde gebruiken veelhoek om een te maken nb_sides dubbelzijdige polygoon, waar u de waarde opgeeft nb_sides. Als u werkelijke stervormen wilt maken, kunt u het vormtype instellen op ster. De beroerte parameter voegt een omtrek toe van een bepaalde kleur en breedte rond alle deeltjes. De JSON-code hieronder maakt zeshoeken.
"shape": "type": "polygon", "stroke": "width": 4, "color": "#fff", "polygon": "nb_sides": 6
Het is ook mogelijk om afbeeldingen weer te geven in plaats van basisvormen. Eerst moet u het vormtype opgeven als beeld. Hierna kunt u de afbeeldingsbron en de gewenste hoogte en breedte instellen. Het is de moeite waard om in gedachten te houden dat breedte en hoogte de grootte van de beeldpartikels niet bepalen, maar hun beeldverhouding. Hier is wat JSON om deeltjes met asteroïde-afbeeldingen te maken:
"shape": "type": "image", "image": "src": "img / football.png", // Afbeeldingspad instellen. "breedte": 1, // Breedte en hoogte bepalen niet de maat. "height": 1 // Ze bepalen alleen de beeldverhouding.
Met de bibliotheek kunt u ook meerdere vormen samen mengen. U kunt bijvoorbeeld besluiten om tegelijkertijd cirkels, vierkanten en zeshoeken te maken. In dat geval hoeft u alleen een array met al deze vormen door te geven.
"type": ["cirkel", "rand", "veelhoek"]
De eigenschap size heeft alle opties van de eigenschap opacity. U kunt de grootte willekeurig instellen en de grootte van individuele deeltjes animeren. Bekijk de volgende JSON-code van dichtbij.
"size": "value": 25, "random": true, "anim": "enable": true, "speed": 20, "size_min": 10, "sync": false
Als je instelt willekeurig naar vals, alle deeltjes zullen van maat 25 zijn. Wanneer willekeurig ingesteld op waar, grootte dient als de maximale maximale grootte voor deeltjes. omgeving synchroniseren naar waar binnen animatie zal de grootte van alle elementen tegelijkertijd veranderen. U moet de demo openen en verschillende waarden uitproberen voor het aantal polygoonzijden, animatie en andere eigenschappen om te zien hoe deze het eindresultaat beïnvloeden.
Wanneer deeltjes dichtbij genoeg zijn, kunt u verbindingslijnen ertussen trekken door de line_linked eigendom.
Deze eigenschap heeft vier extra waarden. De afstand eigenschap geeft de maximale afstand aan tot waar lijnen worden getekend. U kunt ook de kleur als een HEX-string. De dekking van lijnen varieert op basis van de afstand tussen deeltjes. De waarde die u opgeeft als ondoorzichtigheid is de transparantie van lijnen wanneer deeltjes heel dicht bij elkaar staan. Tenslotte, breedte bepaalt hoe breed je lijnen zullen zijn. Hier is het JSON-fragment voor de bijbehorende demo.
"line_linked": "enable": true, "distance": 200, "color": "#fff", "opacity": 1, "width": 4
Je kunt zien dat de lijnen verdwijnen zodra de afstand tussen deeltjes meer dan 200 px wordt.
Ik heb geprobeerd alles te bedekken wat je moet weten om de vorm, grootte, kleur en bijna elke andere fysieke eigenschap van deeltjes te veranderen. De voorbeelden in deze zelfstudie illustreren duidelijk hoe gemakkelijk het is om deze bibliotheek te gebruiken. Als je ooit een eenvoudige deeltjesbibliotheek nodig hebt, moet je Particles.js zeker eens proberen.
De volgende tutorial leert je hoe je de beweging van deeltjes en hun interactie zowel onderling als met jezelf kunt besturen. Als u vragen heeft over deze tutorial, laat dan een reactie achter.
Accentsconagua