Share
Så langt i denne serien har jeg dekket prosjekter og gjenstander, stier og geometri og brukerinteraksjon i Paper.js. Biblioteket lar deg også animere ulike elementer i prosjektene dine. Hvis du kombinerer det med evnen til å handle ut fra brukerinngang, kan du lage noen virkelig kule effekter. Denne opplæringen vil dekke hvordan å animere elementer i Paper.js.
Senere deler av opplæringen vil også dekke bildemanipulering og hvordan du kan manipulere farger på enkelte piksler. Biblioteket lar deg også lage raster fra vektorer som vil bli dekket på slutten.
Alle animasjonene i Paper.js håndteres av onFrame hendelse handler. Koden inne i håndteringen utføres opp til 60 ganger per sekund. Visningen blir automatisk oppgradert etter hver utførelse. Gradvis endring av noen egenskaper inne i funksjonen kan skape noen virkelig fine effekter.
De onFrame Handler-funksjonen mottar også en begivenhet gjenstand. Objektet har tre egenskaper som gir oss informasjon som er relevant for animasjonen.
Den første er event.count, som forteller oss hvor mange ganger håndteringen utføres. Den andre er event.delta, som gir oss den totale tiden som har gått siden den siste utførelsen av vår håndterer. Den tredje er event.time, som gir oss den tiden som har gått siden den første rammehendelsen.
Du kan animere mange eiendommer inne i handleren. I vårt eksempel vil jeg rotere tre rektangler og endre nyansen av det sentrale rektangel. Vurder koden nedenfor:
var rectA = ny Path.Rectangle (punkt: [300, 100], størrelse: [200, 150], strokeColor: 'yellow', strokeWidth: 10); var rectB = rectA.clone (); rectB.strokeColor = 'oransje'; rectB.scale (0,8); var rectC = rectA.clone (); rectC.strokeColor = 'black'; rectC.scale (1,2); funksjon onFrame (event) rectA.strokeColor.hue + = 10 * event.delta; rectA.rotate (2); rectB.rotate (2); rectC.rotate (2);
Som tydelig fra koden ovenfor, er den faktiske koden som trengs for å animere våre rektangler, ganske minimal. For rektangel A øker vi fargen med 10 ganger event.delta på hver utførelse av onFrame behandleren. Verdien av event.delta vil generelt være nær 0,01. Hvis jeg ikke hadde multiplisert sin verdi med 10, ville det ha tatt lang tid å legge merke til endringen i farge.
Jeg roterer også hvert rektangel med 2 grader hver gang koden er utført. Hvis vi skulle bruke verdien event.time for å rotere rektanglene, ville rotasjonene blitt svært raske etter en tid.
I stedet for å animere hele banen eller elementet samtidig, kan du også animere individuelle segmenter. Selve prosessen er ganske enkel. Du kan bruke path.segments å returnere en rekke av alle segmenter som utgjør en bane. Individuelle segmenter kan nås ved å levere en index verdi. Før jeg går videre, vil jeg gjerne ta en titt på koden nedenfor.
var aSquare = ny Path.RegularPolygon (nytt punkt (550, 200), 4, 100); aSquare.fillColor = 'rosa'; aSquare.fullySelected = true; funksjon onFrame (event) 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;
Her begynner vi ved å lage et torg ved hjelp av Sti.RegulærPolygon (senter, sider, radius) konstruktør. De sider parameteren bestemmer antall sider av polygonen vår. De radius parameteren bestemmer størrelsen på polygonen vår. Jeg har også satt fullySelected eiendom til ekte slik at du kan se de enkelte punktene.
Inne i onFrame handler, detter jeg over alle segmentene ved hjelp av en for-løkke og setter deres x-koordinat lik en verdi beregnet ut fra deres indeks. Ved hjelp av event.time inne i Tak i Math.sin () funksjonen oppretter ikke noen problemer relatert til ekstreme verdier fordi verdien av Tak i Math.sin () funksjonen vil alltid ligge mellom -1 og 1.
Følgende demo viser vårt animerte firkant, som forresten ikke lenger er et torg, takket være koden i vår onFrame behandleren. Jeg vil foreslå at du prøver forskjellige verdier for parametrene til vår polygonkonstruktør så vel som synd funksjon for å se hvordan de påvirker den endelige animasjonen i demoen.
Bilder i Paper.js refereres til som Rasters. Du kan forvandle og flytte dem rundt som noe annet element. For å bruke et bilde i prosjektet ditt, må du først legge det til markeringen av nettsiden din ved hjelp av det vanlige img tag og gi den en id. Dette id Senere overføres til ny Raster (id) konstruktør.
Husk at bildene du jobber med, må være allerede lastet og skal være vert på samme nettsted som prosjektet ditt. Bruke bilder som er vert på andre domener, vil resultere i sikkerhetsfeil. I denne opplæringen vil vi manipulere følgende bilde:
For å få tilgang til fargene til individuelle piksler i bildet ovenfor, kan du bruke raster.getPixel (x, y) funksjon, hvor x og y er koordinatene til vår piksel. Koden nedenfor genererer 7 * 7 pikselfirkanter fylt med fargen på piksler plassert i øverste venstre hjørne:
Accentsconagua
var raster = ny Raster ('landskap'); var gridSize = 8; var rectSize = 7; raster.on ('load', funksjon () raster.size = new Størrelse (80, 40); for (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; );Etter at rasteren har lastet, endrer vi størrelsen på 80 * 40. piksler. Inne i det nestede til sløyfer, vi går over individuelle piksler av denne rasteren og lager 7 * 7 firkanter. Å øke størrelsen på vår raster vil gi oss bedre resultater, men gjennomføringen vil bli tregere. Her er sluttresultatet med den størrelsen som er større, synlig øverst i venstre hjørne:
Hvis du vil gjemme størrelsen på raster, kan du angi raster.visible eiendom til falsk. Du kan også manipulere fargen på genererte firkanter. For eksempel, for å øke den røde komponenten i alle rutene, kan du bruke følgende linje:
path.fillColor = farge + ny farge (0.4,0,0);
Det endelige resultatet, i dette tilfellet, ville være:
Mens Paper.js er et vektorgrafikbibliotek, kan du også lage raster fra eksisterende elementer. For å gjøre det må du bruke item.rasterize () metode. Det opprinnelige elementet er ikke fjernet fra prosjektet etter rasterisering. Du kan også spesifisere oppløsningen til rasteren din i piksler per tomme. Koden nedenfor lager to raster fra et polygon ved forskjellige oppløsninger:
var aDodecagon = ny Path.RegularPolygon (nytt 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øydest polygon med høyere oppløsning er fortsatt skarp i forhold til den midterste. Her er sluttresultatet:
Hvis du har fulgt alle veiledningene i denne serien, bør du ha nok kunnskap til å komme i gang med Paper.js. Mens det er lett å lære det grunnleggende i biblioteket, vil mastering av alle konseptene kreve litt innsats fra din side. Når du trenger mer informasjon om et emne, kan du gå gjennom referansen på den offisielle nettsiden.
JavaScript har blitt et av de de facto språkene som fungerer på nettet. Det er ikke uten sine lærekurver, og det er nok av rammer og biblioteker for å holde deg opptatt også. Hvis du leter etter flere ressurser for å studere eller bruke i arbeidet ditt, sjekk ut hva vi har tilgjengelig på Envato-markedet.
Hvis du lager noe interessant ved hjelp av dette biblioteket, vennligst del arbeidet ditt i kommentarene.
