OK.
Dus laten we hier beginnen.
En deze video zal zich richten op het verkrijgen van het opzetten Paperchase en het doen van een aantal eenvoudige eenvoudige animaties.
Dus geen audio gewoon nog niet.
Het eerste wat ik zal erop wijzen dat ik in een nieuwe map die ik heb gemaakt.
Ik voegde eraan toe dat klinkt directory in hier.
Dus zorg ervoor dat je niet hoeft om het per se te doen voor deze video, omdat je niet zal spelen van de geluiden.
Maar als je wilt om mee te volgen maken een directory zorg ervoor dat je te slepen of te kopiëren die map klinkt erin.
Het volgende wat je hoeft te doen is om onze file dus ik maak een bestand op te slaan in de juiste directory en ik noem het cirkelt elke keer.
Nou ik in onze h tim L. skelet natuurlijk net als dat en we zullen het bij laten voor nu.
Dus laten we gewoon open het moet niet echt iets te zien.
Laten we nu eens gaan naar papier genie.
Nogmaals, ik hou echt van deze.
Maar we gaan weg uit deze te verplaatsen en we gaan om te gaan om te downloaden om te beginnen.
En het eerste wat we doen is gewoon downloaden van de meest recente versie die ik heb eigenlijk al gedaan.
Dus als je klaar bent met dat het zal er zo uitzien.
En het eerste wat we kunnen doen is gewoon een kijkje nemen in de voorbeelden directory.
Laten we eens een kijkje nemen op bezield geanimeerde ster.
Best leuk om te spelen met dit maakt me duizelig, dus ik ga om te sluiten dat af.
Maar u kunt een kijkje bij enkele van de anderen nemen ook.
Candy crash.
Dus er is een aantal leuke animatie die je kunt doen.
Er is een beetje natuurkunde hier bij betrokken.
Wat doen die we hebben.
Deze koele lijn animatie en een heleboel anderen zijn u.
Ik hou echt van dit één van dit soort parallax effect als u de muis beweegt.
OK.
Zo kun je uren om dit te doen.
Er zijn veel goede voorbeelden die u kunt een van hen te openen als je wilt.
Neem een ​​kijkje op hoe het werkt.
Dus laten we eens kijken naar die ruimte een eerste ding dat u zult zien dat we ook geen papier J.S ..
We moeten dat bestand natuurlijk de bibliotheek, net als we nodig hebben voor Jay Querrey.
Maar er is iets dat je niet eerder hebben gezien en dat is dat we hebben een script type gelijk tekst slash papier script.
Dus er is een bepaald type bestand of een script dat we kunnen schrijven genoemd document manuscript dat is een domein specifieke taal die in feite het is een taal die wordt gemaakt voor Paperchase.
Dus het is niet iets dat zal werken, tenzij we hebben Paperchase inbegrepen.
En dan zie je ook dit doek attribuut canvas gelijk canvas.
Dus dit is een soort van raar wat een doek is dat het een oude gezangboek element.
Dus het is eigenlijk waar alles wat we doen.
Laat ik je dit nu te inspecteren.
Dit is de werkende versie of de definitieve versie.
Als ik een kijkje te nemen eerste om te laten zien hoe het werkt.
Nogmaals, als ik een kijkje te nemen en ik controleer deze zwarte achtergrond is het niet het lichaam.
Het is iets genaamd canvas en canvas is een HMO element dat in feite fungeert als een plek om animaties en graphics doen.
Dus als ik naar een kijkje DN voor canvas kunt zien dat een oude geur vijf tot elke rook cannabis element toegevoegd kan worden gebruikt om afbeeldingen te vestigen op een scripting in Javascript zijn.
Dus dat is eigenlijk alles wat het is.
Het is een element in doek dat op eigen houtje zonder javascript het echt niet een ding te doen.
Maar dan gaan we en voeg javascript om dingen zoals maken rechthoek hier maken het groen te maken hier een 3-D vorm doen deze animatie te zeggen en dat doen we allemaal met Javascript.
Dus papier J.S. maakt gebruik van een doek element.
Het is het stadium dat is waar het voegt in alle animaties in alle afbeeldingen.
Dus moeten we een doek op onze pagina hebben zoals je kunt zien voor deze ruimte bijvoorbeeld.
Als ik naar de bodem het enige wat in het lichaam is dit recht hier een doek en het heeft ID gelijk zijn aan canvas en ook ingesteld op zwarte achtergrond.
Dus Id gelijk het doek correspondeert met de lijn hier.
Canvas is gelijk canvas.
Dus we vertel dit document manuscript bestand of dit document manuscript script wat ID te zoeken, die in het voorbeeld dat alleen de naam, maar canvas.
Dus gaan we iets vergelijkbaars om dit te doen.
Maar voordat we daar moeten we ervoor zorgen dat we onder andere papier ja.
Dus als je naar de download.
En in plaats van het openen van voorbeelden gaan we geïndexeerd om te kijken en dan kunnen we halen een papieren volledig of papier vol mannen en inzicht in de totale hier.
Dus ik ga over te kopiëren die in onze directory zo papier Dasch vol maar we dan in onze eigen app moeten we ervoor zorgen om dat op te nemen.
Dus Bron gelijk papier Dasch volledige japes net als dat en op te slaan.
En wat we zullen doen is gewoon de pagina te vernieuwen in Chrome.
Zorg ervoor dat we niet een foutmelding krijgt.
Grote.
Dus het vinden van het bestand prima.
Laten we nu eens gaan naar docs papier genie en kijken naar tutorials, dus ik eigenlijk niet zo vroeg op te doen.
Maar ik wil te lezen van de beschrijving van wat papier JSA is.
Dus het is een open source vector graphics scripting framework die draait op de top van de leeftijd aan mijn vijf canvas.
Het biedt een schone scene graph slash document object model en een heleboel krachtige functionaliteit voor het maken en werken met vector graphics en Béziercurves allemaal netjes verpakt in een goed ontworpen consistente en schone programming interface.
Dus een beetje een mondvol.
Eigenlijk is het een kick ass tekening bibliotheek animatie bibliotheek grafische bibliotheek.
Dat is echt behoorlijk populair.
Er zijn een paar van hen die er dus het is niet het is niet alsof een vraag waar het zo'n beetje de ene DOM manipulatie bibliotheek.
De ene event handling bibliotheek.
Er zijn heel wat animatie in grafische dingen die er zijn, maar papier is dat ik ben er vrij zeker zeggen dat het het meest populair zijn.
OK dus laten we teruggaan naar tutorials en een kijkje nemen op de slag.
Ik denk ja aan de slag te werken met papier.
Ja.
En we zullen naar beneden te scrollen en neem een ​​kijkje op hun voorbeeld hier.
Dus wat we kunnen doen is kopieer deze hele zaak in.
Maar ik wil het een stuk te doen op een moment, zodat u zien hoe het werkt.
Dus laten we beginnen met het kopiëren van dit doek kopieer gewoon de hele lijn en we zullen het in ons lichaam te zetten.
Dus canvas I.D. gelijk mijn canvas en als ik de pagina te vernieuwen zullen we niet zien helemaal niets.
Als we hadden verwacht dat we zouden zien dat er een doek daar is, maar als we terug gaan laten kopiëren dit script tekst of het type omdat tekstgrootte document manuscript canvas is mijn canvas.
En laten we deze in hier en te plakken.
Dus als we kijken naar wat er gebeurt hier is er een aantal leuke reacties zegt dat het leidt tot een papieren G-S pad naar een lijn te trekken.
Dus maken we een pad en je gaat een heleboel syntax zien hier dat je nog nooit hebt gezien.
En nogmaals, dat is het punt.
Het punt is dat ik je dwingen om een ​​aantal nieuwe dingen te zien om de documentatie te lezen.
Het kan u ongevoelig om dit gevoel van ik weet niet wat ik doe Ik heb nog nooit deze code gezien voordat ik weet niet hoe het werkt.
Dat is een soort van het punt van de bibliotheek.
Je hoeft niet te weten hoe het werkt zeker voor iets als animaties.
Wees blij dat dat iemand anders is het verzorgen van het voor u.
Ik zeker ben dat mijn leven gered van een heleboel keer.
Zo creëren we een nieuwe weg hier opslaan in een variabele.
We veranderen de slag kleur zwart te zijn en dan maken we een punt voor de start bij 100 komma 100 en dan gaan we ons pad naar die start en dan trekken we een lijn om te beginnen plus 100 X en negatieve 50 y.
Dus ik zal je precies laten zien wat dat doet, maar het trekt een lijn vanaf 100 100 en vervolgens het beweegt die lijn of het verbindt uit eerste punt tot 300 komma 50.
Dus als we een kijkje te nemen zorg ervoor dat alles werkt als we zijn vers.
We eindigen met een lijn.
Dus het beste wat je moet doen als je iets nieuws als dit is rond te spelen.
Dus probeer het veranderen van deze.
Dus het is rood en de start is nu 0 100.
Daar gaan we dat we net verhuisd onze lijn of laten we dit iets om meer drastische als 500 veranderen.
Dus je kunt spelen met de hele dag lang.
Maar wat ik wil echt benadrukken is dat we het creëren van een document manuscript script niet tekst, dus het is javascript papier script en we zijn het instellen van deze canvas doek attribuut is gelijk aan het doek dat is de naam of de ID die we toegewezen het.
Dus deze moeten passen en het hele punt van dat is alleen maar om dit document manuscript bestand waarin om dingen te tekenen vertellen.
Wat canvas te gebruiken.
Dus we kunnen spelen rond nogal een beetje meer.
En ik zou aanraden dat u de video te stoppen en neem een ​​kijkje op de tutorials proberen een aantal andere dingen.
Dus zal ik gewoon u wijzen in de richting van vooraf gedefinieerde vormen het pad van dat is wat we zullen gebruiken.
We gaan het maken van cirkels met onze applicatie hier.
Dus dit is wat we moeten doen.
Laten we gewoon deze code te kopiëren hier dus Pat nieuw pad dot cirkel en dan moet je het een punt om een ​​cirkel te maken.
En dan de straal het eruit ziet.
Dus je kunt zien dat er een verklaring dus het moet een centraal punt x 100 y 70 en een straal van 50 en daarna een vulkleur.
Dus laten we eens een kijkje nemen alleen deze te kopiëren naar de bodem van onze code en zien wat er gebeurt.
Dat is een soort van wat je doet veel met J S en soortgelijke bibliotheken.
Je experimenteren gewoon.
Dus laten we straal veranderen om 10.
Daar ga je.
Dus konden we ook proberen het doen van een andere cirkel door gewoon kopiëren van dit neer op een andere lijn.
Laten we noemen het var cirkel 2 is gelijk aan nieuw pad dot.
En laten we maken dit een erg groot en paars.
Zo nieuw punt in en laten we het op 50.
Kom op 50 en het zal enorm zijn.
Dus geef het een straal van 300 en vervolgens cirkel te vullen kleur is gelijk aan paars.
Zomaar refresh.
En je kunt zien we eindigen met die gigantische cirkel die je daadwerkelijk kunt niet zeggen hoe groot het is omdat onze canvas de gehele breedte van ons scherm niet is opgevolgd.
Dus laten we dat de volgende, omdat we willen dat we willen dat onze canvas tot het nemen van de gehele breedte.
Dus ik ga en maak een nieuwe stylesheet dus ik linktag voegde hier een Tref gelijk cirkel dot SS die niet bestaat.
En dan laten we een bestand genaamd Circle Stut zien te beoordelen en wat we zullen doen is in canvas met 100 procent te besparen.
En laten we het ook een achtergrond van zwarte.
En als we zijn fris je kunt zien dat we in de buurt, maar we hebben een paar dingen.
De eerste is dat het lichaam niet daadwerkelijk helemaal naar beneden gaan.
Dus ons zeildoek draait wanneer 100 procent van de breedte.
Maar zelfs als we het eens voor 100 procent de hoogte nu dat het niet gaat om de manier waarop we willen dat het daadwerkelijk te veranderen.
Dan hebben we ook deze marge die we willen om zich te ontdoen van te krijgen.
Dus in plaats van te besteden te veel tijd gaan over dat ik je gewoon laten zien wat we moeten doen.
Goed stel gewoon hoogte 100 procent en marge aan nul.
En als ik de pagina nu vernieuwen neemt het volledige scherm.
Dus als je wilt meer in detail treden en precies begrijpen waarom we dat inspecteren het lichaam voordat we deze code toe te voegen in en vervolgens uncommented inspecteer het lichaam weer en je zult zien wat er gebeurt.
In principe zijn we gewoon om ervoor te zorgen dat het lichaam in beslag neemt de gehele breedte en hoogte en er is geen marge, wat betekent dat onze canvas dan zal uitbreiden tot het nemen van die hele ruimte ook.
OK.
Zo creëerden we een doek dat is nu echt het laatste wat ik zal doen in deze video.
Ik wilde alleen maar om u kennismaken met hoe papierwerk's we er papier script scripts.
Wij geven het een doek en dan zetten we een stukje code in hier dat je nog nooit eerder hebt gezien.
Een groot deel van dit heb ik nog nooit eerder gezien, totdat ik deze video gemaakt of totdat ik dit project voor deze video gemaakt.
Ik heb zeker gezien het.
Deze exacte video.
Maar het punt is dat het nieuw is.
En dat is waarom we dit doen bent.
Het is echt een belangrijke vaardigheid om te kunnen code redox nemen en eigenlijk kopiëren in en veranderen.
Grote.
Dus in de volgende video die ik zal geven u een snelle optionele oefening, dus als je gewoon wilt om het project te krijgen en sla de educatieve leerervaring wat je wilt noemen.
Maar als je alleen maar naar natura van de payoff ga je gang slaat u de volgende video.
Ik zou adviseren dat je het wel doet.
We gaan niet naar de meest indrukwekkende ding maken, maar ik ga moet je een oefening met sommige kringen doen.
Erg opwindend.
Ik weet.
OK.
Ik zie je dan.