Share
Den tidigare Particles.js handledningen diskuterade kortfattat olika funktioner som biblioteket erbjuder och hur man kommer igång med biblioteket. I denna handledning kommer jag att i detalj beskriva alla aspekter av Particles.js som behandlar partikelns fysiska utseende.
Det första vi ska ta itu med är partikelantalet och densiteten. Densitet bestämmer antalet partiklar som kommer att packas ihop i ett givet område. Den är som standard aktiverad med value_area inställd på 800. Här är JSON som låter dig styra antalet partiklar:
"nummer": "värde": 50, "täthet": "aktivera": true, "value_area": 500
Om du ställer in Gör det möjligt under densitet till falsk då kommer antalet partiklar som visas visas exakt 50. Dubbla värdet på value_area kommer att minska antalet partiklar ungefär hälften.
Det finns tre sätt att ställa in partiklarnas färger. Du kan ställa in färger i HEX-format, RGB-format eller HSL-format. På grund av ett fel i biblioteket fungerar RGB och HSL-format endast när du tar bort standardfärgvärdet från biblioteket.
Om du vill slumpmässigt ställa in partikelfärgen kan du göra det med värdet "slumpmässigt". Slutligen, för att ställa in färg slumpmässigt från en lista med färger måste du ge färgerna i HEX-format som en matris. Här är JSON för att ställa in färger för partiklar:
"värde": "värde": "#fff" // Ange vit i HEX (Vi använder den här versionen) "värde": r: 255, g: 255, b: 255 // inställt vit i RGB " värde ": h: 0, s: 100%, l: 100% // Ange vit i HSL" värde ": [" # f00 "," # 0f0 "," # 00f "] // Ange röd, grön och blått slumpmässigt "värde": "slumpmässigt" // inställda färger slumpmässigt
Egenskapen om opacitet ger dig mycket kontroll. Du kan ställa in det till ett exakt värde eller använda slumpmässiga värden genom att ställa in "slumpmässig" till Sann. Inte bara det men du kan också animera partiklarnas opacitet. Här är JSON-koden för egenskapen opacitet:
"opacitet": "värde": 1, "slumpmässigt": sant, // Ange till false i vårt fall "anim": "enable": true, "speed": 8, "opacity_min": 0.4, "synkronisering ": false
Miljö "synkronisera" till Sann kommer att animera opaciteten hos alla partiklar samtidigt. Med ett värde på 0,4 för "Opacity_min" ser till att opaciteten aldrig går under 0,4 för någon partikel under animering. Här är en demo med stjärnor som rör sig över rymden. Försök ändra partikelns antal, färg eller opacitet för att se deras effekt.
Particles.js har fem olika värden för att skapa grundläggande former. En enkel form som cirkel genererar en cirkulär partikel, triangel genererar triangulära partiklar, och kant genererar fyrkanter. Du kan använda värdet polygon att skapa en nb_sides sidig polygon, där du anger värdet nb_sides. För att skapa verkliga stjärnformer kan du ställa in formen på stjärna. De stroke parametern lägger till en skiss över en given färg och bredd runt alla partiklar. JSON-koden nedan skapar hexagoner.
"form": "typ": "polygon", "stroke": "bredd": 4, "färg": "#fff", "polygon": "nb_sides": 6
Det är också möjligt att visa bilder istället för grundläggande former. Först måste du ange formtypen som bild. Därefter kan du ställa in bildkällan och önskad höjd och bredd. Det är värt att tänka på att bredd och höjd inte bestämmer storleken på bildpartiklarna utan deras bildförhållande. Här är några JSON för att skapa partiklar med asteroidbilder:
"form": "typ": "bild", "bild": "src": "img / football.png", // Ange bildväg. "bredd": 1, // Bredd och höjd bestämmer inte storlek. "höjd": 1 // De bestämmer bara bildförhållandet.
Biblioteket låter dig också blanda flera former tillsammans. Du kan till exempel bestämma att skapa cirklar, kvadrater och hexagoner samtidigt. I så fall är allt du behöver göra att passera en matris med alla dessa former.
"typ": ["cirkel", "kant", "polygon"]
Storleksegenskapen har alla alternativ för opacitetsegenskapen. Du kan ställa in storleken slumpmässigt och animera storleken på enskilda partiklar. Ta en titt på följande JSON-kod.
"storlek": "värde": 25, "slumpmässigt": sant, "anim": "aktivera": sant, "hastighet": 20, "size_min": 10, "synkronisering": falskt
Om du ställer in slumpmässig till falsk, alla partiklar kommer att vara av storlek 25. När slumpmässig är satt till Sann, storleken tjänar som maxgräns för partiklar. Miljö synkronisera till Sann inuti animering ändrar storleken på alla element samtidigt. Du bör öppna demo och prova olika värden för antalet polygonsidor, animeringar och andra egenskaper för att se hur de påverkar slutresultatet.
När partiklarna är tillräckligt nära kan du rita anslutningslinjer mellan dem genom att aktivera line_linked fast egendom.
Den här egenskapen har fyra ytterligare värden. De distans egendom anger det maximala avståndet upp till vilka linjer som ska dras. Du kan också ställa in Färg som en HEX-sträng. Linjans opacitet varierar beroende på avståndet mellan partiklar. Värdet som du anger som opacitet är opaciteten av linjer när partiklar är riktigt nära varandra. Till sist, bredd avgör hur bred dina linjer kommer att vara. Här är JSON-snippet för den medföljande demo.
"line_linked": "enable": true, "distance": 200, "color": "#fff", "opacitet": 1, "bredd": 4
Du kan se att raderna försvinner så fort avståndet mellan partiklar blir mer än 200 px.
Jag har försökt att täcka allt som du behöver veta för att ändra formen, storleken, färgen och nästan alla andra fysikaliska egenskaper hos partiklar. Exemplen i denna handledning visar tydligt hur lätt det är att använda det här biblioteket. Om du någonsin behöver ett grundläggande partikelbibliotek, bör du definitivt ge Particles.js ett försök.
Nästa handledning kommer att lära dig hur man kontrollerar partikelns rörelse och deras interaktion mellan dem själva och med dig. Om du har några frågor relaterade till denna handledning, vänligen lämna en kommentar.
Accentsconagua