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

2
00:00:00,690 --> 00:00:01,960
Więc zaczynajmy tutaj.

3
00:00:02,040 --> 00:00:07,390
I ten film skupi się na coraz Paperchase skonfigurować i robi kilka prostych prostych animacji.

4
00:00:07,440 --> 00:00:09,110
Więc nie ma dźwięku jeszcze.

5
00:00:09,120 --> 00:00:12,400
Pierwszą rzeczą, którą będę podkreślić, że jestem w nowym katalogu utworzonego.

6
00:00:12,720 --> 00:00:14,930
I dodał, że brzmi katalogu tutaj.

7
00:00:14,940 --> 00:00:19,970
Więc upewnij się, że nie trzeba robić to z konieczności do tego filmu, ponieważ nie będzie grał dźwięki.

8
00:00:19,980 --> 00:00:26,820
Ale jeśli chcesz podążać stworzyć katalog upewnij się przeciągnąć lub kopiowaniem, która brzmi folderu do niego.

9
00:00:26,850 --> 00:00:38,650
Następną rzeczą, którą musisz zrobić, to nasz plik, tak zrobię plik zapisać go do odpowiedniego katalogu, a ja po prostu nazwać koła za każdym razem.

10
00:00:39,810 --> 00:00:46,490
Dobrze, że w naszym godz tim L. szkieletu oczywiście, że tak jak my i pozostawić go na tym na razie.

11
00:00:46,800 --> 00:00:51,110
Więc po prostu otworzyć go nie powinno naprawdę cokolwiek zobaczyć.

12
00:00:51,120 --> 00:00:53,710
Teraz chodźmy do papieru geniuszu.

13
00:00:54,000 --> 00:00:55,370
Znowu ja naprawdę kocham ten jeden.

14
00:00:55,560 --> 00:01:00,530
Ale mamy zamiar odejść od tego i mamy zamiar udać się do pobrania, aby rozpocząć.

15
00:01:01,350 --> 00:01:07,140
A pierwszą rzeczą, zrobimy to po prostu pobrać najnowszą wersję, która mam właściwie już zrobione.

16
00:01:07,260 --> 00:01:10,810
Więc kiedy skończysz, że będzie wyglądać następująco.

17
00:01:11,010 --> 00:01:15,050
I pierwsze, co możemy zrobić, to po prostu spojrzeć w katalogu examples.

18
00:01:15,090 --> 00:01:19,600
Rzućmy okiem na animowanym animowanego gwiazdy.

19
00:01:19,860 --> 00:01:23,880
Dość zabawy się bawić z tym robi mi w głowie, więc mam zamiar zamknąć, że wyłączone.

20
00:01:23,880 --> 00:01:26,280
Ale można spojrzeć na niektóre inne, jak również.

21
00:01:26,280 --> 00:01:28,300
katastrofa słodycze.

22
00:01:29,310 --> 00:01:32,010
Więc jest jakaś fajna animacja można zrobić.

23
00:01:32,130 --> 00:01:35,590
Jest trochę fizyki zaangażowane tutaj.

24
00:01:35,610 --> 00:01:38,120
Co jeszcze mamy.

25
00:01:38,130 --> 00:01:45,110
Ta świetna animacja linii i cała masa innych z nich jesteś.

26
00:01:45,110 --> 00:01:49,290
Bardzo podoba mi się ten jeden taki rodzaj efektu paralaksy podczas przesuwania myszy.

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

28
00:01:50,190 --> 00:01:52,400
Więc można spędzić wiele godzin w ten sposób.

29
00:01:52,410 --> 00:01:55,450
Jest wiele świetnych przykładów można otworzyć dowolny z nich nawet, jeśli chcesz.

30
00:01:55,470 --> 00:01:56,980
Spójrz, jak to działa.

31
00:01:57,060 --> 00:02:04,500
Więc przyjrzyjmy się, że przestrzeń jednego pierwszą rzeczą, która zobaczysz, że jesteśmy w tym papier J.S ..

32
00:02:04,590 --> 00:02:08,060
Musimy oczywiście ten plik do biblioteki, tak jak potrzebujemy dla Jay Querrey.

33
00:02:08,460 --> 00:02:16,070
Ale jest coś, czego nie widzieliśmy wcześniej, który jest to, że mamy script type równa skrypt ukośnik tekst papieru.

34
00:02:16,260 --> 00:02:29,240
Więc nie jest to szczególny rodzaj pliku, lub skrypt, który możemy napisać skrypt zwany papier jest językiem określona domena, która jest w zasadzie jest to język, który jest wykonany specjalnie dla Paperchase.

35
00:02:29,250 --> 00:02:33,350
Więc to nie jest coś, co będzie działać, chyba że mamy Paperchase włączone.

36
00:02:33,570 --> 00:02:37,960
A potem można również zobaczyć ten atrybut płótnie canvas równa płótnie.

37
00:02:37,980 --> 00:02:42,370
Więc to jest trochę dziwne, co płótno jest to niemłode hymnal elementem.

38
00:02:42,540 --> 00:02:45,550
Więc to faktycznie, w którym wszystko, co robimy.

39
00:02:45,600 --> 00:02:47,590
Pokażę Ci sprawdzić to teraz.

40
00:02:47,730 --> 00:02:50,280
To jest wersja działa lub ostateczna wersja.

41
00:02:50,380 --> 00:02:54,070
Jeśli spojrzeć najpierw pokazać, jak to działa.

42
00:02:54,070 --> 00:02:59,450
Ponownie, jeśli przyjrzeć i sprawdzić ten czarnym tle to nie jest ciało.

43
00:02:59,700 --> 00:03:08,040
To coś, co nazywa płótno i płótna jest elementem HMO, że w zasadzie działa jako miejsca do animacji i grafiki.

44
00:03:08,280 --> 00:03:19,010
Więc jeśli pójdę do DN spojrzeć na płótnie można zobaczyć, że dodaje się zapach wieku od pięciu do każdego elementu dymu marihuany może być użyty do rysowania grafik być skryptów JavaScript.

45
00:03:19,290 --> 00:03:20,300
Więc tak naprawdę wszystko jest.

46
00:03:20,310 --> 00:03:26,000
Jest to element canvas, że na własną rękę, bez javascript to naprawdę nie robi nic.

47
00:03:26,280 --> 00:03:37,140
Ale potem pójdziemy i dodać javascript, aby mówić takich rzeczy sprawiają, że prostokąt o sprawiają, że zielona dokonać kształt 3-D tutaj zrobić animację i zrobimy wszystko Javascript.

48
00:03:37,140 --> 00:03:40,830
Więc papieru J.S. używa elementu canvas.

49
00:03:40,920 --> 00:03:45,000
Jest to etap, to gdzie dodaje się wszystkie animacje we wszystkich grafik.

50
00:03:45,000 --> 00:03:49,140
Dlatego musimy mieć płótno na naszej stronie, jak widać na tym przykładzie kosmicznej.

51
00:03:49,560 --> 00:03:59,760
Jeśli pójdę do samego dna jedyną rzeczą w organizmie jest to właśnie tutaj płótno i ma identyfikator równy płótnie, a także ustawiony na czarnym tle.

52
00:03:59,850 --> 00:04:04,500
Więc Id równa płótno odpowiada tej linii tutaj.

53
00:04:04,500 --> 00:04:06,300
Płótno jest równa płótnie.

54
00:04:06,300 --> 00:04:16,460
Więc po prostu mówienie tego papieru skrypt lub skrypt skrypt papieru, co ID szukać który w tym przykładzie, że właśnie nazwie, ale płótnie.

55
00:04:16,800 --> 00:04:18,890
Więc mamy zamiar zrobić coś bardzo podobnego do tego.

56
00:04:18,930 --> 00:04:22,820
Ale zanim tam dotrzemy musimy mieć pewność, że to papier tak.

57
00:04:23,220 --> 00:04:26,250
Więc kiedy idziesz do pobrania.

58
00:04:26,250 --> 00:04:35,870
I zamiast otwierania przykłady będziemy patrzeć indeksowane, a następnie możemy wybrać albo papier całości lub papieru pełen mężczyzn i zrozumieć w pełni je tutaj.

59
00:04:35,910 --> 00:04:47,410
Więc mam zamiar skopiować, że w ciągu do naszego katalogu, tak papier Dasch pełny, ale nam wtedy we własnej aplikacji musimy upewnić się, że należą.

60
00:04:47,670 --> 00:04:55,200
Więc Źródło równa papieru Dasch pełne japes ot tak i oszczędzać.

61
00:04:55,620 --> 00:04:59,760
I co wtedy zrobimy to po prostu odświeżyć stronę w przeglądarce Chrome.

62
00:05:00,120 --> 00:05:01,630
Upewnij się, że nie pojawia się błąd.

63
00:05:01,740 --> 00:05:02,390
Wspaniały.

64
00:05:02,430 --> 00:05:04,590
Tak więc okazało się, że plik po prostu w porządku.

65
00:05:04,590 --> 00:05:11,580
Teraz chodźmy do docs paper geniusza i spojrzeć na tutoriale, więc właściwie nie to zrobić na początku.

66
00:05:12,120 --> 00:05:15,490
Ale ja chcę do zapoznania się z opisem tego, co jest papier JSA.

67
00:05:15,780 --> 00:05:21,960
Więc jest to open source grafiki wektorowej skryptowy ramy, które działa w oparciu o wiek do moich pięciu płótnie.

68
00:05:22,080 --> 00:05:35,950
Oferuje on czysty wykres sceny dokumentu ukośnik modelu obiektowego i wiele zaawansowanych funkcji do tworzenia i pracy z grafiką wektorową i krzywych Beziera ładnie opakowane w dobrze zaprojektowanym spójny i przejrzysty interfejs programowania.

69
00:05:36,000 --> 00:05:37,540
Więc niby kęs.

70
00:05:37,560 --> 00:05:42,120
Zasadniczo jest to kick ass rysunek biblioteki animacji bibliotekę graficzną biblioteczne.

71
00:05:42,120 --> 00:05:43,560
To naprawdę bardzo popularne.

72
00:05:43,560 --> 00:05:52,270
Istnieje kilka z nich tam więc nie jest to nie jak kwerendy, gdzie jest bardzo dużo biblioteka manipulacji jeden DOM.

73
00:05:52,290 --> 00:05:54,030
Przeładunek biblioteki jedno zdarzenie.

74
00:05:54,030 --> 00:06:00,790
w rzeczach graficznych Istnieje wiele animacji tam, ale papier jest to jestem całkiem przekonany, mówiąc, że jest to najbardziej popularne.

75
00:06:01,110 --> 00:06:06,660
OK, więc wróćmy do ćwiczeń i przyjrzeć się zaczyna.

76
00:06:06,660 --> 00:06:09,000
Myślę, że tak rozpoczynania pracy z papierem.

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

78
00:06:10,470 --> 00:06:14,280
I będziemy przewijać w dół i przyjrzeć się ich przykładem.

79
00:06:14,820 --> 00:06:17,380
Więc co możemy zrobić, to skopiować całą tę cechę.

80
00:06:17,400 --> 00:06:21,290
Ale chcę to zrobić jeden kawałek na raz, dzięki czemu można zobaczyć, jak to działa.

81
00:06:21,540 --> 00:06:29,270
Więc zacznijmy kopiując to płótno po prostu skopiować cały wiersz, a my go umieścić w naszym organizmie.

82
00:06:29,970 --> 00:06:36,180
Więc płótnie średnica wewnętrzna równa moje płótna i gdybym odświeżyć stronę nie zobaczymy nic.

83
00:06:36,270 --> 00:06:48,260
Jeśli spodziewaliśmy widzielibyśmy nie ma tam płótno, ale jeśli wrócimy niech skopiować ten tekst skryptu lub typ papieru, ponieważ skrypt rozmiar tekstu płótno jest moim płótnie.

84
00:06:48,260 --> 00:06:52,850
I postawmy że tu i wklej.

85
00:06:53,130 --> 00:07:00,000
Więc jeśli spojrzymy na to, co dzieje się tutaj, jest tam kilka ciekawych komentarzy mówi, że tworzy ścieżkę papieru G-S, aby narysować linię.

86
00:07:00,120 --> 00:07:04,400
Więc robimy drogę i masz zamiar zobaczyć wiele składni tutaj, że nigdy nie widziałem.

87
00:07:04,410 --> 00:07:05,730
I znowu, że o to chodzi.

88
00:07:05,940 --> 00:07:09,740
Chodzi o to, że jestem zmuszając do obejrzenia kilku nowych rzeczy czytać dokumenty.

89
00:07:09,800 --> 00:07:17,890
To może zmniejszać czułość do tego uczucia nie wiem, co robię, nigdy nie widziałem tego kodu przed nie wiem, jak to działa.

90
00:07:17,940 --> 00:07:19,370
To rodzaj punktu bibliotece.

91
00:07:19,380 --> 00:07:23,310
Nie musisz wiedzieć, jak to działa, zwłaszcza na coś takiego animacji.

92
00:07:23,310 --> 00:07:26,120
Tylko się cieszyć, że ktoś inny jest dbanie o to dla ciebie.

93
00:07:26,130 --> 00:07:28,700
Zdecydowanie jestem, że uratował mi życie wiele razy.

94
00:07:28,920 --> 00:07:33,070
Więc tworzymy nową ścieżkę tutaj zapisać go do zmiennej.

95
00:07:33,070 --> 00:07:50,960
Możemy zmienić kolor obrysu być czarny a potem utworzyć punkt na początek przy 100 przecinkiem 100, a następnie przenosimy naszą drogę do tego startu, a następnie rysujemy linię do rozpoczęcia plusa 100 x 50 y i negatywny.

96
00:07:51,210 --> 00:08:04,800
Więc pokażę ci dokładnie, co to robi, ale to rysuje linię zaczynając od 100 100, a następnie przemieszcza się, że linia lub łączy się pierwszy punkt 50 do 300 przecinkami.

97
00:08:04,800 --> 00:08:09,260
Więc jeśli przyjrzymy upewnić, że wszystko działa, jeśli są świeże.

98
00:08:10,260 --> 00:08:12,160
Skończymy z linii.

99
00:08:13,170 --> 00:08:16,730
Tak więc najlepszą rzeczą do zrobienia, gdy masz coś nowego, jak to jest bawić.

100
00:08:17,040 --> 00:08:18,480
Więc spróbuj zmienić to.

101
00:08:18,630 --> 00:08:25,980
Więc to jest czerwone i start jest teraz 0 100.

102
00:08:25,980 --> 00:08:33,250
Nie pójdziemy po prostu przenieśliśmy naszą linię lub zmieńmy to za coś bardziej drastycznego, jak 500.

103
00:08:33,510 --> 00:08:36,070
Tak więc można bawić się z tym cały dzień.

104
00:08:36,420 --> 00:08:51,580
Ale to, co naprawdę chcę podkreślić, jest to, że mamy do tworzenia skryptu skryptu papier nie tekst, więc jest to skrypt JavaScript papieru i jesteśmy Ustawienie tego atrybutu płótno płótno równa moje płótna, które jest nazwa lub identyfikator, który przypisaliśmy go.

105
00:08:51,660 --> 00:08:58,530
Więc to musi być zgodna i cały sens, że jest po prostu powiedzieć to skrypt papieru, gdzie zwrócić rzeczy.

106
00:08:58,560 --> 00:09:00,040
Co płótno używać.

107
00:09:00,300 --> 00:09:02,360
Więc możemy bawić się nieco więcej.

108
00:09:02,460 --> 00:09:10,890
A ja bardzo polecam, aby zatrzymać film i przyjrzeć samouczki spróbować innych rzeczy.

109
00:09:11,100 --> 00:09:17,720
Więc ja po prostu wskazać ścieżkę w kierunku predefiniowanych kształtów, które jest to, co będziemy używać.

110
00:09:17,820 --> 00:09:21,280
Jedziemy do tworzenia kręgów z naszej aplikacji tutaj.

111
00:09:21,690 --> 00:09:24,270
Więc to jest to, co musimy zrobić.

112
00:09:24,690 --> 00:09:31,820
Załóżmy, wystarczy skopiować ten kod tutaj tak Pat nową ścieżkę dot okrąg, a następnie trzeba dać mu punkt, aby krąg.

113
00:09:32,160 --> 00:09:34,240
I wtedy promień wygląda.

114
00:09:34,320 --> 00:09:44,690
Więc widać, istnieje wyjaśnienie więc potrzebuje punktu środkowego x 100 y 70 i promień 50, a następnie wypełnienie kolorem.

115
00:09:45,000 --> 00:09:51,120
Warto więc spojrzeć po prostu skopiować to do dna naszego kodu i zobaczyć, co się dzieje.

116
00:09:51,720 --> 00:09:56,160
Który niby czego wiele z J S i podobnych bibliotek zrobić.

117
00:09:56,340 --> 00:09:57,340
Po prostu poeksperymentować.

118
00:09:57,480 --> 00:10:01,520
Więc zmieńmy promień być 10.

119
00:10:01,530 --> 00:10:02,880
Proszę bardzo.

120
00:10:03,540 --> 00:10:09,000
Więc możemy także spróbować zrobić kolejny krąg po prostu kopiując to w dół do innej linii.

121
00:10:09,150 --> 00:10:15,610
Nazwijmy to var circle 2 równa się nowy punkt ścieżki.

122
00:10:15,840 --> 00:10:18,340
I zróbmy to naprawdę duże i fioletowy.

123
00:10:18,630 --> 00:10:22,250
Tak więc nowy punkt i postawmy go w temperaturze 50 °.

124
00:10:22,250 --> 00:10:25,740
Przyjdź 50 i to będzie ogromny.

125
00:10:25,740 --> 00:10:34,730
Więc dać mu promień 300, a następnie, aby wypełnić koło kolorów równa fioletowy.

126
00:10:34,830 --> 00:10:38,180
Podobnie jak w tym odświeżaniu.

127
00:10:38,670 --> 00:10:46,740
I widać to w końcu z tego gigantycznego koła, które faktycznie nie może powiedzieć, jak duża jest to dlatego, że nasz płótno nie podjął całą szerokość naszego ekranu.

128
00:10:46,950 --> 00:10:52,860
Więc zróbmy, że w przyszłym, ponieważ chcemy, że chcemy, aby nasza płótno do objęcia całej szerokości.

129
00:10:52,860 --> 00:11:01,790
Więc pójdę i zrobić nowy arkusz stylów, więc dodałem tag linku tutaj Tref równa Circle Dot SS, który nie istnieje.

130
00:11:02,430 --> 00:11:12,210
A potem niech zapisać plik o nazwie Koło stut zobacz oceny i co zrobimy, to dodać w płótnie o 100 procent.

131
00:11:12,840 --> 00:11:17,930
I niech też nadać mu tło czarne.

132
00:11:17,930 --> 00:11:21,880
A jeśli są świeże można zobaczyć, że jesteśmy blisko, ale mamy kilka rzeczy.

133
00:11:21,870 --> 00:11:25,210
Pierwszym z nich jest, że nasze ciało faktycznie nie przejść całą drogę w dół.

134
00:11:25,230 --> 00:11:28,860
Tak więc nasze płótno odbywa się po 100 procent szerokości.

135
00:11:28,980 --> 00:11:38,840
Ale nawet jeśli damy mu 100-procentowy wzrost w tej chwili to nie będzie faktycznie zmienić sposób, w jaki my chcemy.

136
00:11:38,850 --> 00:11:41,570
Wtedy też mają ten margines, że chcemy się pozbyć.

137
00:11:42,000 --> 00:11:46,390
Więc zamiast spędzać zbyt dużo czasu dzieje się, że będę po prostu pokazać, co musimy zrobić.

138
00:11:46,770 --> 00:11:54,500
No po prostu ustawić wysokość wynosi 100 procent, a marża wynosi zero.

139
00:11:54,810 --> 00:11:58,490
A gdybym odświeżyć stronę teraz zajmuje cały ekran.

140
00:11:58,860 --> 00:12:10,440
Więc jeśli chcesz, aby przejść do bardziej szczegółowo i dokładnie zrozumieć, dlaczego to się zbadać ciało, zanim dodamy ten kod, a następnie odkomentowane zbadać ciało ponownie, a zobaczysz co się stanie.

141
00:12:10,560 --> 00:12:20,020
Zasadniczo jesteśmy po prostu upewniając się, że ciało zajmuje całą szerokość i wysokość, i nie ma żadnego marginesu co oznacza, że ​​nasze płótno zostanie następnie rozwiń podjąć tę całą przestrzeń, jak również.

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

143
00:12:20,910 --> 00:12:24,680
Dlatego stworzyliśmy płótno teraz to naprawdę ostatnia rzecz zrobię w tym filmie.

144
00:12:24,690 --> 00:12:30,420
Chciałem tylko przedstawić wam, jak na formalności mamy skrypt skrypty papieru.

145
00:12:30,420 --> 00:12:35,140
Dajemy mu płótno, a następnie kładziemy jakiś kod tutaj, że nigdy wcześniej nie widział.

146
00:12:35,190 --> 00:12:41,030
Wiele z tego nigdy nie widział, aż zrobiłem ten film, aż zrobiłem ten projekt dla tego filmu wideo.

147
00:12:41,100 --> 00:12:42,380
Ja na pewno widziałem go wcześniej.

148
00:12:42,390 --> 00:12:43,820
Ta dokładna wideo.

149
00:12:43,830 --> 00:12:46,580
Ale chodzi o to, że jest nowy.

150
00:12:46,650 --> 00:12:48,130
I dlatego to robimy.

151
00:12:48,150 --> 00:12:54,200
Jest to bardzo ważna umiejętność, aby móc podjąć kodu redoks i zasadniczo skopiować go i zmienić go.

152
00:12:54,330 --> 00:12:54,980
Wspaniały.

153
00:12:54,990 --> 00:13:05,980
Tak więc w następnym filmie będę daje szybki opcjonalnej ćwiczenia więc jeśli chcesz po prostu dostać się do projektu i pominąć edukacyjnego doświadczenie uczenia się, co chcesz nazwać.

154
00:13:06,000 --> 00:13:11,170
Ale jeśli masz tylko rodzaju wypłat śmiało pominąć następny film.

155
00:13:11,190 --> 00:13:13,040
Polecam, aby to zrobić chociaż.

156
00:13:13,050 --> 00:13:17,860
Nie jedziemy do najbardziej imponującą rzeczą, ale ja będę musiał to zrobić ćwiczenie z pewnych kręgach.

157
00:13:17,940 --> 00:13:18,500
Bardzo ekscytujące.

158
00:13:18,510 --> 00:13:18,960
Wiem.

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

160
00:13:19,500 --> 00:13:20,360
Zobaczymy się wtedy.