1
00:00:00,240 --> 00:00:00,610
OK.

2
00:00:00,690 --> 00:00:01,960
Dus laten we hier beginnen.

3
00:00:02,040 --> 00:00:07,390
En deze video zal zich richten op het verkrijgen van het opzetten Paperchase en het doen van een aantal eenvoudige eenvoudige animaties.

4
00:00:07,440 --> 00:00:09,110
Dus geen audio gewoon nog niet.

5
00:00:09,120 --> 00:00:12,400
Het eerste wat ik zal erop wijzen dat ik in een nieuwe map die ik heb gemaakt.

6
00:00:12,720 --> 00:00:14,930
Ik voegde eraan toe dat klinkt directory in hier.

7
00:00:14,940 --> 00:00:19,970
Dus zorg ervoor dat je niet hoeft om het per se te doen voor deze video, omdat je niet zal spelen van de geluiden.

8
00:00:19,980 --> 00:00:26,820
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.

9
00:00:26,850 --> 00:00:38,650
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.

10
00:00:39,810 --> 00:00:46,490
Nou ik in onze h tim L. skelet natuurlijk net als dat en we zullen het bij laten voor nu.

11
00:00:46,800 --> 00:00:51,110
Dus laten we gewoon open het moet niet echt iets te zien.

12
00:00:51,120 --> 00:00:53,710
Laten we nu eens gaan naar papier genie.

13
00:00:54,000 --> 00:00:55,370
Nogmaals, ik hou echt van deze.

14
00:00:55,560 --> 00:01:00,530
Maar we gaan weg uit deze te verplaatsen en we gaan om te gaan om te downloaden om te beginnen.

15
00:01:01,350 --> 00:01:07,140
En het eerste wat we doen is gewoon downloaden van de meest recente versie die ik heb eigenlijk al gedaan.

16
00:01:07,260 --> 00:01:10,810
Dus als je klaar bent met dat het zal er zo uitzien.

17
00:01:11,010 --> 00:01:15,050
En het eerste wat we kunnen doen is gewoon een kijkje nemen in de voorbeelden directory.

18
00:01:15,090 --> 00:01:19,600
Laten we eens een kijkje nemen op bezield geanimeerde ster.

19
00:01:19,860 --> 00:01:23,880
Best leuk om te spelen met dit maakt me duizelig, dus ik ga om te sluiten dat af.

20
00:01:23,880 --> 00:01:26,280
Maar u kunt een kijkje bij enkele van de anderen nemen ook.

21
00:01:26,280 --> 00:01:28,300
Candy crash.

22
00:01:29,310 --> 00:01:32,010
Dus er is een aantal leuke animatie die je kunt doen.

23
00:01:32,130 --> 00:01:35,590
Er is een beetje natuurkunde hier bij betrokken.

24
00:01:35,610 --> 00:01:38,120
Wat doen die we hebben.

25
00:01:38,130 --> 00:01:45,110
Deze koele lijn animatie en een heleboel anderen zijn u.

26
00:01:45,110 --> 00:01:49,290
Ik hou echt van dit één van dit soort parallax effect als u de muis beweegt.

27
00:01:49,830 --> 00:01:50,150
OK.

28
00:01:50,190 --> 00:01:52,400
Zo kun je uren om dit te doen.

29
00:01:52,410 --> 00:01:55,450
Er zijn veel goede voorbeelden die u kunt een van hen te openen als je wilt.

30
00:01:55,470 --> 00:01:56,980
Neem een ​​kijkje op hoe het werkt.

31
00:01:57,060 --> 00:02:04,500
Dus laten we eens kijken naar die ruimte een eerste ding dat u zult zien dat we ook geen papier J.S ..

32
00:02:04,590 --> 00:02:08,060
We moeten dat bestand natuurlijk de bibliotheek, net als we nodig hebben voor Jay Querrey.

33
00:02:08,460 --> 00:02:16,070
Maar er is iets dat je niet eerder hebben gezien en dat is dat we hebben een script type gelijk tekst slash papier script.

34
00:02:16,260 --> 00:02:29,240
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.

35
00:02:29,250 --> 00:02:33,350
Dus het is niet iets dat zal werken, tenzij we hebben Paperchase inbegrepen.

36
00:02:33,570 --> 00:02:37,960
En dan zie je ook dit doek attribuut canvas gelijk canvas.

37
00:02:37,980 --> 00:02:42,370
Dus dit is een soort van raar wat een doek is dat het een oude gezangboek element.

38
00:02:42,540 --> 00:02:45,550
Dus het is eigenlijk waar alles wat we doen.

39
00:02:45,600 --> 00:02:47,590
Laat ik je dit nu te inspecteren.

40
00:02:47,730 --> 00:02:50,280
Dit is de werkende versie of de definitieve versie.

41
00:02:50,380 --> 00:02:54,070
Als ik een kijkje te nemen eerste om te laten zien hoe het werkt.

42
00:02:54,070 --> 00:02:59,450
Nogmaals, als ik een kijkje te nemen en ik controleer deze zwarte achtergrond is het niet het lichaam.

43
00:02:59,700 --> 00:03:08,040
Het is iets genaamd canvas en canvas is een HMO element dat in feite fungeert als een plek om animaties en graphics doen.

44
00:03:08,280 --> 00:03:19,010
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.

45
00:03:19,290 --> 00:03:20,300
Dus dat is eigenlijk alles wat het is.

46
00:03:20,310 --> 00:03:26,000
Het is een element in doek dat op eigen houtje zonder javascript het echt niet een ding te doen.

47
00:03:26,280 --> 00:03:37,140
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.

48
00:03:37,140 --> 00:03:40,830
Dus papier J.S. maakt gebruik van een doek element.

49
00:03:40,920 --> 00:03:45,000
Het is het stadium dat is waar het voegt in alle animaties in alle afbeeldingen.

50
00:03:45,000 --> 00:03:49,140
Dus moeten we een doek op onze pagina hebben zoals je kunt zien voor deze ruimte bijvoorbeeld.

51
00:03:49,560 --> 00:03:59,760
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.

52
00:03:59,850 --> 00:04:04,500
Dus Id gelijk het doek correspondeert met de lijn hier.

53
00:04:04,500 --> 00:04:06,300
Canvas is gelijk canvas.

54
00:04:06,300 --> 00:04:16,460
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.

55
00:04:16,800 --> 00:04:18,890
Dus gaan we iets vergelijkbaars om dit te doen.

56
00:04:18,930 --> 00:04:22,820
Maar voordat we daar moeten we ervoor zorgen dat we onder andere papier ja.

57
00:04:23,220 --> 00:04:26,250
Dus als je naar de download.

58
00:04:26,250 --> 00:04:35,870
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.

59
00:04:35,910 --> 00:04:47,410
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.

60
00:04:47,670 --> 00:04:55,200
Dus Bron gelijk papier Dasch volledige japes net als dat en op te slaan.

61
00:04:55,620 --> 00:04:59,760
En wat we zullen doen is gewoon de pagina te vernieuwen in Chrome.

62
00:05:00,120 --> 00:05:01,630
Zorg ervoor dat we niet een foutmelding krijgt.

63
00:05:01,740 --> 00:05:02,390
Grote.

64
00:05:02,430 --> 00:05:04,590
Dus het vinden van het bestand prima.

65
00:05:04,590 --> 00:05:11,580
Laten we nu eens gaan naar docs papier genie en kijken naar tutorials, dus ik eigenlijk niet zo vroeg op te doen.

66
00:05:12,120 --> 00:05:15,490
Maar ik wil te lezen van de beschrijving van wat papier JSA is.

67
00:05:15,780 --> 00:05:21,960
Dus het is een open source vector graphics scripting framework die draait op de top van de leeftijd aan mijn vijf canvas.

68
00:05:22,080 --> 00:05:35,950
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.

69
00:05:36,000 --> 00:05:37,540
Dus een beetje een mondvol.

70
00:05:37,560 --> 00:05:42,120
Eigenlijk is het een kick ass tekening bibliotheek animatie bibliotheek grafische bibliotheek.

71
00:05:42,120 --> 00:05:43,560
Dat is echt behoorlijk populair.

72
00:05:43,560 --> 00:05:52,270
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.

73
00:05:52,290 --> 00:05:54,030
De ene event handling bibliotheek.

74
00:05:54,030 --> 00:06:00,790
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.

75
00:06:01,110 --> 00:06:06,660
OK dus laten we teruggaan naar tutorials en een kijkje nemen op de slag.

76
00:06:06,660 --> 00:06:09,000
Ik denk ja aan de slag te werken met papier.

77
00:06:09,020 --> 00:06:09,900
Ja.

78
00:06:10,470 --> 00:06:14,280
En we zullen naar beneden te scrollen en neem een ​​kijkje op hun voorbeeld hier.

79
00:06:14,820 --> 00:06:17,380
Dus wat we kunnen doen is kopieer deze hele zaak in.

80
00:06:17,400 --> 00:06:21,290
Maar ik wil het een stuk te doen op een moment, zodat u zien hoe het werkt.

81
00:06:21,540 --> 00:06:29,270
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.

82
00:06:29,970 --> 00:06:36,180
Dus canvas I.D. gelijk mijn canvas en als ik de pagina te vernieuwen zullen we niet zien helemaal niets.

83
00:06:36,270 --> 00:06:48,260
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.

84
00:06:48,260 --> 00:06:52,850
En laten we deze in hier en te plakken.

85
00:06:53,130 --> 00:07:00,000
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.

86
00:07:00,120 --> 00:07:04,400
Dus maken we een pad en je gaat een heleboel syntax zien hier dat je nog nooit hebt gezien.

87
00:07:04,410 --> 00:07:05,730
En nogmaals, dat is het punt.

88
00:07:05,940 --> 00:07:09,740
Het punt is dat ik je dwingen om een ​​aantal nieuwe dingen te zien om de documentatie te lezen.

89
00:07:09,800 --> 00:07:17,890
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.

90
00:07:17,940 --> 00:07:19,370
Dat is een soort van het punt van de bibliotheek.

91
00:07:19,380 --> 00:07:23,310
Je hoeft niet te weten hoe het werkt zeker voor iets als animaties.

92
00:07:23,310 --> 00:07:26,120
Wees blij dat dat iemand anders is het verzorgen van het voor u.

93
00:07:26,130 --> 00:07:28,700
Ik zeker ben dat mijn leven gered van een heleboel keer.

94
00:07:28,920 --> 00:07:33,070
Zo creëren we een nieuwe weg hier opslaan in een variabele.

95
00:07:33,070 --> 00:07:50,960
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.

96
00:07:51,210 --> 00:08:04,800
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.

97
00:08:04,800 --> 00:08:09,260
Dus als we een kijkje te nemen zorg ervoor dat alles werkt als we zijn vers.

98
00:08:10,260 --> 00:08:12,160
We eindigen met een lijn.

99
00:08:13,170 --> 00:08:16,730
Dus het beste wat je moet doen als je iets nieuws als dit is rond te spelen.

100
00:08:17,040 --> 00:08:18,480
Dus probeer het veranderen van deze.

101
00:08:18,630 --> 00:08:25,980
Dus het is rood en de start is nu 0 100.

102
00:08:25,980 --> 00:08:33,250
Daar gaan we dat we net verhuisd onze lijn of laten we dit iets om meer drastische als 500 veranderen.

103
00:08:33,510 --> 00:08:36,070
Dus je kunt spelen met de hele dag lang.

104
00:08:36,420 --> 00:08:51,580
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.

105
00:08:51,660 --> 00:08:58,530
Dus deze moeten passen en het hele punt van dat is alleen maar om dit document manuscript bestand waarin om dingen te tekenen vertellen.

106
00:08:58,560 --> 00:09:00,040
Wat canvas te gebruiken.

107
00:09:00,300 --> 00:09:02,360
Dus we kunnen spelen rond nogal een beetje meer.

108
00:09:02,460 --> 00:09:10,890
En ik zou aanraden dat u de video te stoppen en neem een ​​kijkje op de tutorials proberen een aantal andere dingen.

109
00:09:11,100 --> 00:09:17,720
Dus zal ik gewoon u wijzen in de richting van vooraf gedefinieerde vormen het pad van dat is wat we zullen gebruiken.

110
00:09:17,820 --> 00:09:21,280
We gaan het maken van cirkels met onze applicatie hier.

111
00:09:21,690 --> 00:09:24,270
Dus dit is wat we moeten doen.

112
00:09:24,690 --> 00:09:31,820
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.

113
00:09:32,160 --> 00:09:34,240
En dan de straal het eruit ziet.

114
00:09:34,320 --> 00:09:44,690
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.

115
00:09:45,000 --> 00:09:51,120
Dus laten we eens een kijkje nemen alleen deze te kopiëren naar de bodem van onze code en zien wat er gebeurt.

116
00:09:51,720 --> 00:09:56,160
Dat is een soort van wat je doet veel met J S en soortgelijke bibliotheken.

117
00:09:56,340 --> 00:09:57,340
Je experimenteren gewoon.

118
00:09:57,480 --> 00:10:01,520
Dus laten we straal veranderen om 10.

119
00:10:01,530 --> 00:10:02,880
Daar ga je.

120
00:10:03,540 --> 00:10:09,000
Dus konden we ook proberen het doen van een andere cirkel door gewoon kopiëren van dit neer op een andere lijn.

121
00:10:09,150 --> 00:10:15,610
Laten we noemen het var cirkel 2 is gelijk aan nieuw pad dot.

122
00:10:15,840 --> 00:10:18,340
En laten we maken dit een erg groot en paars.

123
00:10:18,630 --> 00:10:22,250
Zo nieuw punt in en laten we het op 50.

124
00:10:22,250 --> 00:10:25,740
Kom op 50 en het zal enorm zijn.

125
00:10:25,740 --> 00:10:34,730
Dus geef het een straal van 300 en vervolgens cirkel te vullen kleur is gelijk aan paars.

126
00:10:34,830 --> 00:10:38,180
Zomaar refresh.

127
00:10:38,670 --> 00:10:46,740
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.

128
00:10:46,950 --> 00:10:52,860
Dus laten we dat de volgende, omdat we willen dat we willen dat onze canvas tot het nemen van de gehele breedte.

129
00:10:52,860 --> 00:11:01,790
Dus ik ga en maak een nieuwe stylesheet dus ik linktag voegde hier een Tref gelijk cirkel dot SS die niet bestaat.

130
00:11:02,430 --> 00:11:12,210
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.

131
00:11:12,840 --> 00:11:17,930
En laten we het ook een achtergrond van zwarte.

132
00:11:17,930 --> 00:11:21,880
En als we zijn fris je kunt zien dat we in de buurt, maar we hebben een paar dingen.

133
00:11:21,870 --> 00:11:25,210
De eerste is dat het lichaam niet daadwerkelijk helemaal naar beneden gaan.

134
00:11:25,230 --> 00:11:28,860
Dus ons zeildoek draait wanneer 100 procent van de breedte.

135
00:11:28,980 --> 00:11:38,840
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.

136
00:11:38,850 --> 00:11:41,570
Dan hebben we ook deze marge die we willen om zich te ontdoen van te krijgen.

137
00:11:42,000 --> 00:11:46,390
Dus in plaats van te besteden te veel tijd gaan over dat ik je gewoon laten zien wat we moeten doen.

138
00:11:46,770 --> 00:11:54,500
Goed stel gewoon hoogte 100 procent en marge aan nul.

139
00:11:54,810 --> 00:11:58,490
En als ik de pagina nu vernieuwen neemt het volledige scherm.

140
00:11:58,860 --> 00:12:10,440
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.

141
00:12:10,560 --> 00:12:20,020
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.

142
00:12:20,250 --> 00:12:20,910
OK.

143
00:12:20,910 --> 00:12:24,680
Zo creëerden we een doek dat is nu echt het laatste wat ik zal doen in deze video.

144
00:12:24,690 --> 00:12:30,420
Ik wilde alleen maar om u kennismaken met hoe papierwerk's we er papier script scripts.

145
00:12:30,420 --> 00:12:35,140
Wij geven het een doek en dan zetten we een stukje code in hier dat je nog nooit eerder hebt gezien.

146
00:12:35,190 --> 00:12:41,030
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.

147
00:12:41,100 --> 00:12:42,380
Ik heb zeker gezien het.

148
00:12:42,390 --> 00:12:43,820
Deze exacte video.

149
00:12:43,830 --> 00:12:46,580
Maar het punt is dat het nieuw is.

150
00:12:46,650 --> 00:12:48,130
En dat is waarom we dit doen bent.

151
00:12:48,150 --> 00:12:54,200
Het is echt een belangrijke vaardigheid om te kunnen code redox nemen en eigenlijk kopiëren in en veranderen.

152
00:12:54,330 --> 00:12:54,980
Grote.

153
00:12:54,990 --> 00:13:05,980
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.

154
00:13:06,000 --> 00:13:11,170
Maar als je alleen maar naar natura van de payoff ga je gang slaat u de volgende video.

155
00:13:11,190 --> 00:13:13,040
Ik zou adviseren dat je het wel doet.

156
00:13:13,050 --> 00:13:17,860
We gaan niet naar de meest indrukwekkende ding maken, maar ik ga moet je een oefening met sommige kringen doen.

157
00:13:17,940 --> 00:13:18,500
Erg opwindend.

158
00:13:18,510 --> 00:13:18,960
Ik weet.

159
00:13:19,200 --> 00:13:19,480
OK.

160
00:13:19,500 --> 00:13:20,360
Ik zie je dan.