Share
Hittills i denna serie har jag täckt projekt och objekt, vägar och geometri och användarinteraktion i Paper.js. Biblioteket låter dig också animera olika saker i dina projekt. Om du kombinerar det med förmågan att agera baserat på användarinmatning kan du skapa några riktigt coola effekter. Denna handledning kommer att omfatta hur man animerar objekt i Paper.js.
Senare delar av handledningen kommer också att omfatta bildmanipulation och hur du kan manipulera färgerna på enskilda pixlar. Biblioteket gör det också möjligt att skapa raster från vektorer som kommer att täckas i slutet.
Alla animationer i Paper.js hanteras av onFrame händelsehanterare. Koden inuti handlaren körs upp till 60 gånger per sekund. Vyn återräknas automatiskt efter varje körning. Gradvis ändra några egenskaper inne i funktionen kan skapa några riktigt fina effekter.
De onFrame handlerfunktionen mottar också en händelse objekt. Objektet har tre egenskaper som ger oss information som är relevant för animationen.
Den första är event.count, vilket berättar hur många gånger hanteraren är utförd. Den andra är event.delta, vilket ger oss den totala tiden som har gått sedan vår handlares sista körning. Den tredje är event.time, vilket ger oss den tid som har gått sedan den första ramhändelsen.
Du kan animera många egenskaper inne i handlaren. I vårt exempel kommer jag att rotera tre rektanglar och ändra nyansen av den centrala rektangeln. Tänk på koden nedan:
var rectA = ny Path.Rectangle (punkt: [300, 100], storlek: [200, 150], strokeColor: 'yellow', strokeWidth: 10); var rektB = rectA.clone (); rectB.strokeColor = 'orange'; rectB.scale (0,8); var rectC = rectA.clone (); rectC.strokeColor = 'black'; rectC.scale (1,2); funktion onFrame (event) rectA.strokeColor.hue + = 10 * event.delta; rectA.rotate (2); rectB.rotate (2); rectC.rotate (2);
Som det framgår av snippet ovan, är den faktiska koden som behövs för att animera våra rektanglar ganska minimal. För rektangel A ökar vi färgtonen med 10 gånger event.delta vid varje utförande av onFrame hanterare. Värdet av event.delta kommer i allmänhet att vara nära 0,01. Om jag inte hade multiplicerat sitt värde med 10, skulle det ha gått lång tid att märka förändringen i färg.
Jag roterar också varje rektangel med 2 grader varje gång koden exekveras. Om vi skulle använda värdet event.time för att rotera rektanglarna skulle rotationerna ha blivit mycket snabba efter en tid.
I stället för att animera hela vägen eller objektet samtidigt kan du också animera enskilda segment. Processen i sig är ganska enkel. Du kan använda path.segments att återge en grupp av alla segment som utgör en väg. Individuella segment kan nås genom att leverera en index värde. Innan jag går vidare vill jag gärna titta på koden nedan.
var aSquare = ny Path.RegularPolygon (ny punkt (550, 200), 4, 100); aSquare.fillColor = 'rosa'; aSquare.fullySelected = true; funktion onFrame (händelse) for (var i = 0; i <= 3; i++) var sinValue = Math.sin(event.time * 4 + i); aSquare.segments[i].point.x = sinValue * 100 + 350; aSquare.segments[1].point.y = sinValue * 50 + 100;
Här börjar vi med att skapa en torg med hjälp av Sti.RegulärPolygon (mitt, sidor, radie) konstruktör. De sidor parametern bestämmer antalet sidor av vår polygon. De radie parametern bestämmer storleken på vår polygon. Jag har också satt fullySelected egendom till Sann så att du kan se de enskilda poängen.
Inuti onFrame handler, itererar jag över alla segment med hjälp av en för loop och sätter deras x-koordinat lika med ett värde beräknat baserat på deras index. Använder sig av event.time inuti Math.sin () funktionen skapar inga problem relaterade till extrema värden eftersom värdet av Math.sin () funktionen ligger alltid mellan -1 och 1.
Följande demo visar vår animerade torg, som förresten inte längre är en torg, tack vare koden i vår onFrame hanterare. Jag skulle vilja föreslå att du prövar olika värden för parametrarna hos vår polygonkonstruktör såväl som synd funktion för att se hur de påverkar den sista animationen i demo.
Bilder i Paper.js kallas Rasters. Du kan omvandla och flytta dem som något annat objekt. För att använda en bild i ditt projekt måste du först lägga till det i markeringen av din webbsida med det vanliga img tagga och ge den en id. Detta id Senare vidare till ny Raster (id) konstruktör.
Tänk på att bilderna du arbetar med måste vara redan laddade och borde vara värd på samma webbplats som ditt projekt. Användning av bilder som finns på andra domäner leder till säkerhetsfel. I denna handledning kommer vi att manipulera följande bild:
För att komma åt färgerna på enskilda pixlar i bilden ovan kan du använda raster.getPixel (x, y) funktion, där x och y är koordinaterna för vår pixel. Koden nedan genererar 7 * 7 pixelfält fyllda med pixelfärgen i sitt övre vänstra hörn:
Accentsconagua
var raster = ny raster ('landskap'); var gridSize = 8; var rectSize = 7; raster.on ('load', funktion () raster.size = new Storlek (80, 40); för (var y = 0; y < raster.height; y++) for (var x = 0; x < raster.width; x++) var color = raster.getPixel(x, y); var path = new Path.Rectangle( new Point(x, y) * gridSize, new Size(rectSize, rectSize)); path.fillColor = color; project.activeLayer.position = view.center; );När raster har laddats ändras storleken till 80 * 40. pixlar. Inuti den kapslade för slingor, vi går över individuella bildpunkter i denna raster och skapar 7 * 7 rutor. Att öka storleken på vår raster ger oss bättre resultat, men utförandet skulle bli långsammare. Här är det slutliga resultatet med den förstorade rasteren som syns i övre vänstra hörnet:
Om du vill dölja den ändrade rasteren kan du ställa in raster.visible egendom till falsk. Du kan också manipulera färgen på genererade rutor. Till exempel, för att öka den röda komponenten i alla rutorna kan du använda följande rad:
path.fillColor = färg + ny färg (0.4,0,0);
Slutresultatet, i det här fallet, skulle vara:
Medan Paper.js är ett vektorgrafikbibliotek kan du också skapa raster från befintliga objekt. För att göra det måste du använda item.rasterize () metod. Det ursprungliga objektet är inte avlägsnat från projektet efter rasterisering. Du kan också valfritt ange upplösningen av din raster i pixlar per tum. Koden nedan skapar två raster från en polygon i olika upplösningar:
var aDodecagon = ny Path.RegularPolygon (ny punkt (150, 180), 12, 30); aDodecagon.fillColor = '#CCAAFC'; var dodecRasterA = aDodecagon.rasterize (); dodecRasterA.position.x + = 250; var dodecRasterB = aDodecagon.rasterize (150); dodecRasterB.position.x + = 500; aDodecagon.scale (3); dodecRasterA.scale (3); dodecRasterB.scale (3);
Den högra polygonen med högre upplösning är fortfarande skarp jämfört med mitten. Här är slutresultatet:
Om du har följt alla handledning i denna serie, borde du ha tillräcklig kunskap för att komma igång med Paper.js. Medan det är lätt att lära sig bibliotekets grunder, kommer mastering av alla begrepp att kräva lite ansträngning från din sida. När du behöver mer information om ett ämne kan du gå igenom referensen på den officiella hemsidan.
JavaScript har blivit ett av de faktiska språken för att arbeta på webben. Det är inte utan sina inlärningskurvor, och det finns gott om ramar och bibliotek för att hålla dig upptagen också. Om du letar efter ytterligare resurser att studera eller använda i ditt arbete, kolla vad vi har tillgängligt på Envato-marknaden.
Om du skapar något intressant med det här biblioteket, vänligen dela ditt arbete i kommentarerna.
