OK.
Więc zaczynajmy tutaj.
I ten film skupi się na coraz Paperchase skonfigurować i robi kilka prostych prostych animacji.
Więc nie ma dźwięku jeszcze.
Pierwszą rzeczą, którą będę podkreślić, że jestem w nowym katalogu utworzonego.
I dodał, że brzmi katalogu tutaj.
Więc upewnij się, że nie trzeba robić to z konieczności do tego filmu, ponieważ nie będzie grał dźwięki.
Ale jeśli chcesz podążać stworzyć katalog upewnij się przeciągnąć lub kopiowaniem, która brzmi folderu do niego.
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.
Dobrze, że w naszym godz tim L. szkieletu oczywiście, że tak jak my i pozostawić go na tym na razie.
Więc po prostu otworzyć go nie powinno naprawdę cokolwiek zobaczyć.
Teraz chodźmy do papieru geniuszu.
Znowu ja naprawdę kocham ten jeden.
Ale mamy zamiar odejść od tego i mamy zamiar udać się do pobrania, aby rozpocząć.
A pierwszą rzeczą, zrobimy to po prostu pobrać najnowszą wersję, która mam właściwie już zrobione.
Więc kiedy skończysz, że będzie wyglądać następująco.
I pierwsze, co możemy zrobić, to po prostu spojrzeć w katalogu examples.
Rzućmy okiem na animowanym animowanego gwiazdy.
Dość zabawy się bawić z tym robi mi w głowie, więc mam zamiar zamknąć, że wyłączone.
Ale można spojrzeć na niektóre inne, jak również.
katastrofa słodycze.
Więc jest jakaś fajna animacja można zrobić.
Jest trochę fizyki zaangażowane tutaj.
Co jeszcze mamy.
Ta świetna animacja linii i cała masa innych z nich jesteś.
Bardzo podoba mi się ten jeden taki rodzaj efektu paralaksy podczas przesuwania myszy.
OK.
Więc można spędzić wiele godzin w ten sposób.
Jest wiele świetnych przykładów można otworzyć dowolny z nich nawet, jeśli chcesz.
Spójrz, jak to działa.
Więc przyjrzyjmy się, że przestrzeń jednego pierwszą rzeczą, która zobaczysz, że jesteśmy w tym papier J.S ..
Musimy oczywiście ten plik do biblioteki, tak jak potrzebujemy dla Jay Querrey.
Ale jest coś, czego nie widzieliśmy wcześniej, który jest to, że mamy script type równa skrypt ukośnik tekst papieru.
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.
Więc to nie jest coś, co będzie działać, chyba że mamy Paperchase włączone.
A potem można również zobaczyć ten atrybut płótnie canvas równa płótnie.
Więc to jest trochę dziwne, co płótno jest to niemłode hymnal elementem.
Więc to faktycznie, w którym wszystko, co robimy.
Pokażę Ci sprawdzić to teraz.
To jest wersja działa lub ostateczna wersja.
Jeśli spojrzeć najpierw pokazać, jak to działa.
Ponownie, jeśli przyjrzeć i sprawdzić ten czarnym tle to nie jest ciało.
To coś, co nazywa płótno i płótna jest elementem HMO, że w zasadzie działa jako miejsca do animacji i grafiki.
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.
Więc tak naprawdę wszystko jest.
Jest to element canvas, że na własną rękę, bez javascript to naprawdę nie robi nic.
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.
Więc papieru J.S. używa elementu canvas.
Jest to etap, to gdzie dodaje się wszystkie animacje we wszystkich grafik.
Dlatego musimy mieć płótno na naszej stronie, jak widać na tym przykładzie kosmicznej.
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.
Więc Id równa płótno odpowiada tej linii tutaj.
Płótno jest równa płótnie.
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.
Więc mamy zamiar zrobić coś bardzo podobnego do tego.
Ale zanim tam dotrzemy musimy mieć pewność, że to papier tak.
Więc kiedy idziesz do pobrania.
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.
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żą.
Więc Źródło równa papieru Dasch pełne japes ot tak i oszczędzać.
I co wtedy zrobimy to po prostu odświeżyć stronę w przeglądarce Chrome.
Upewnij się, że nie pojawia się błąd.
Wspaniały.
Tak więc okazało się, że plik po prostu w porządku.
Teraz chodźmy do docs paper geniusza i spojrzeć na tutoriale, więc właściwie nie to zrobić na początku.
Ale ja chcę do zapoznania się z opisem tego, co jest papier JSA.
Więc jest to open source grafiki wektorowej skryptowy ramy, które działa w oparciu o wiek do moich pięciu płótnie.
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.
Więc niby kęs.
Zasadniczo jest to kick ass rysunek biblioteki animacji bibliotekę graficzną biblioteczne.
To naprawdę bardzo popularne.
Istnieje kilka z nich tam więc nie jest to nie jak kwerendy, gdzie jest bardzo dużo biblioteka manipulacji jeden DOM.
Przeładunek biblioteki jedno zdarzenie.
w rzeczach graficznych Istnieje wiele animacji tam, ale papier jest to jestem całkiem przekonany, mówiąc, że jest to najbardziej popularne.
OK, więc wróćmy do ćwiczeń i przyjrzeć się zaczyna.
Myślę, że tak rozpoczynania pracy z papierem.
Tak.
I będziemy przewijać w dół i przyjrzeć się ich przykładem.
Więc co możemy zrobić, to skopiować całą tę cechę.
Ale chcę to zrobić jeden kawałek na raz, dzięki czemu można zobaczyć, jak to działa.
Więc zacznijmy kopiując to płótno po prostu skopiować cały wiersz, a my go umieścić w naszym organizmie.
Więc płótnie średnica wewnętrzna równa moje płótna i gdybym odświeżyć stronę nie zobaczymy nic.
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.
I postawmy że tu i wklej.
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ę.
Więc robimy drogę i masz zamiar zobaczyć wiele składni tutaj, że nigdy nie widziałem.
I znowu, że o to chodzi.
Chodzi o to, że jestem zmuszając do obejrzenia kilku nowych rzeczy czytać dokumenty.
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.
To rodzaj punktu bibliotece.
Nie musisz wiedzieć, jak to działa, zwłaszcza na coś takiego animacji.
Tylko się cieszyć, że ktoś inny jest dbanie o to dla ciebie.
Zdecydowanie jestem, że uratował mi życie wiele razy.
Więc tworzymy nową ścieżkę tutaj zapisać go do zmiennej.
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.
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.
Więc jeśli przyjrzymy upewnić, że wszystko działa, jeśli są świeże.
Skończymy z linii.
Tak więc najlepszą rzeczą do zrobienia, gdy masz coś nowego, jak to jest bawić.
Więc spróbuj zmienić to.
Więc to jest czerwone i start jest teraz 0 100.
Nie pójdziemy po prostu przenieśliśmy naszą linię lub zmieńmy to za coś bardziej drastycznego, jak 500.
Tak więc można bawić się z tym cały dzień.
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.
Więc to musi być zgodna i cały sens, że jest po prostu powiedzieć to skrypt papieru, gdzie zwrócić rzeczy.
Co płótno używać.
Więc możemy bawić się nieco więcej.
A ja bardzo polecam, aby zatrzymać film i przyjrzeć samouczki spróbować innych rzeczy.
Więc ja po prostu wskazać ścieżkę w kierunku predefiniowanych kształtów, które jest to, co będziemy używać.
Jedziemy do tworzenia kręgów z naszej aplikacji tutaj.
Więc to jest to, co musimy zrobić.
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.
I wtedy promień wygląda.
Więc widać, istnieje wyjaśnienie więc potrzebuje punktu środkowego x 100 y 70 i promień 50, a następnie wypełnienie kolorem.
Warto więc spojrzeć po prostu skopiować to do dna naszego kodu i zobaczyć, co się dzieje.
Który niby czego wiele z J S i podobnych bibliotek zrobić.
Po prostu poeksperymentować.
Więc zmieńmy promień być 10.
Proszę bardzo.
Więc możemy także spróbować zrobić kolejny krąg po prostu kopiując to w dół do innej linii.
Nazwijmy to var circle 2 równa się nowy punkt ścieżki.
I zróbmy to naprawdę duże i fioletowy.
Tak więc nowy punkt i postawmy go w temperaturze 50 °.
Przyjdź 50 i to będzie ogromny.
Więc dać mu promień 300, a następnie, aby wypełnić koło kolorów równa fioletowy.
Podobnie jak w tym odświeżaniu.
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.
Więc zróbmy, że w przyszłym, ponieważ chcemy, że chcemy, aby nasza płótno do objęcia całej szerokości.
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.
A potem niech zapisać plik o nazwie Koło stut zobacz oceny i co zrobimy, to dodać w płótnie o 100 procent.
I niech też nadać mu tło czarne.
A jeśli są świeże można zobaczyć, że jesteśmy blisko, ale mamy kilka rzeczy.
Pierwszym z nich jest, że nasze ciało faktycznie nie przejść całą drogę w dół.
Tak więc nasze płótno odbywa się po 100 procent szerokości.
Ale nawet jeśli damy mu 100-procentowy wzrost w tej chwili to nie będzie faktycznie zmienić sposób, w jaki my chcemy.
Wtedy też mają ten margines, że chcemy się pozbyć.
Więc zamiast spędzać zbyt dużo czasu dzieje się, że będę po prostu pokazać, co musimy zrobić.
No po prostu ustawić wysokość wynosi 100 procent, a marża wynosi zero.
A gdybym odświeżyć stronę teraz zajmuje cały ekran.
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.
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ż.
OK.
Dlatego stworzyliśmy płótno teraz to naprawdę ostatnia rzecz zrobię w tym filmie.
Chciałem tylko przedstawić wam, jak na formalności mamy skrypt skrypty papieru.
Dajemy mu płótno, a następnie kładziemy jakiś kod tutaj, że nigdy wcześniej nie widział.
Wiele z tego nigdy nie widział, aż zrobiłem ten film, aż zrobiłem ten projekt dla tego filmu wideo.
Ja na pewno widziałem go wcześniej.
Ta dokładna wideo.
Ale chodzi o to, że jest nowy.
I dlatego to robimy.
Jest to bardzo ważna umiejętność, aby móc podjąć kodu redoks i zasadniczo skopiować go i zmienić go.
Wspaniały.
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ć.
Ale jeśli masz tylko rodzaju wypłat śmiało pominąć następny film.
Polecam, aby to zrobić chociaż.
Nie jedziemy do najbardziej imponującą rzeczą, ale ja będę musiał to zrobić ćwiczenie z pewnych kręgach.
Bardzo ekscytujące.
Wiem.
OK.
Zobaczymy się wtedy.