1
00:00:00,240 --> 00:00:00,610
好。

2
00:00:00,690 --> 00:00:01,960
所以，讓我們在這裡開始。

3
00:00:02,040 --> 00:00:07,390
而這個視頻將專注於獲得Paperchase建立和做一些簡單的簡單的動畫。

4
00:00:07,440 --> 00:00:09,110
所以，剛才還沒有音訊。

5
00:00:09,120 --> 00:00:12,400
第一件事，我會指出我在我創建了一個新的目錄。

6
00:00:12,720 --> 00:00:14,930
我說這裡聽起來目錄。

7
00:00:14,940 --> 00:00:19,970
因此，請確保您不必為這部影片做一定是因為你不會被打的聲音。

8
00:00:19,980 --> 00:00:26,820
但是，如果你想跟著做一個目錄確保您拖動或複製聽起來文件夾進去。

9
00:00:26,850 --> 00:00:38,650
你需要做的下一件事就是讓我們的文件，所以我會做一個文件保存到正確的目錄，我只是把它每次圓。

10
00:00:39,810 --> 00:00:46,490
嗯，我在我院添L.當然只是這樣的骨架，我們會留在現在它。

11
00:00:46,800 --> 00:00:51,110
所以，就讓我們打開它真的不應該看不到任何東西。

12
00:00:51,120 --> 00:00:53,710
現在，讓我們去紙天才。

13
00:00:54,000 --> 00:00:55,370
再次，我真的很喜歡這一個。

14
00:00:55,560 --> 00:01:00,530
但是，我們要離開這行動，我們打算去下載啟動。

15
00:01:01,350 --> 00:01:07,140
我們會做的第一件事就是剛剛下載的我其實已經做了最新的版本。

16
00:01:07,260 --> 00:01:10,810
因此，當你做完這些就這個樣子。

17
00:01:11,010 --> 00:01:15,050
我們可以做的第一件事是剛剛參加例子目錄看看。

18
00:01:15,090 --> 00:01:19,600
讓我們來看看動畫的動畫明星。

19
00:01:19,860 --> 00:01:23,880
很有趣玩弄這讓我暈了，所以我打算關上了。

20
00:01:23,880 --> 00:01:26,280
但是你可以看看一些其他的人也是如此。

21
00:01:26,280 --> 00:01:28,300
糖果傳奇。

22
00:01:29,310 --> 00:01:32,010
因此，有一些很酷的動畫，你可以做。

23
00:01:32,130 --> 00:01:35,590
這裡還涉及到一個小物理學。

24
00:01:35,610 --> 00:01:38,120
還有什麼做的，我們有。

25
00:01:38,130 --> 00:01:45,110
這很酷線動畫和一大堆其他的都是你。

26
00:01:45,110 --> 00:01:49,290
我真的很喜歡這一個這種視差效果您移動鼠標。

27
00:01:49,830 --> 00:01:50,150
好。

28
00:01:50,190 --> 00:01:52,400
所以，你可以花時間做這個。

29
00:01:52,410 --> 00:01:55,450
有很多的，如果你願意，你可以打開任何人了很好的例子。

30
00:01:55,470 --> 00:01:56,980
看看它是如何工作的。

31
00:01:57,060 --> 00:02:04,500
所以，讓我們來看看，你會看到我們包括紙張J.S是一個空間的第一件事..

32
00:02:04,590 --> 00:02:08,060
我們當然需要這個文件，就像我們需要傑伊·奎裡的圖書館。

33
00:02:08,460 --> 00:02:16,070
但是，有什麼東西，你有沒有見過這是我們有一個腳本類型等於文本斜線紙腳本。

34
00:02:16,260 --> 00:02:29,240
所以這是文件的特定類型或說我們可以寫稱為紙的腳本這是一個領域特定語言基本上是它是專門為paperchase取得了語言腳本。

35
00:02:29,250 --> 00:02:33,350
因此，它不是東西，將工作，除非我們已經Paperchase包括在內。

36
00:02:33,570 --> 00:02:37,960
然後你也看到這個畫布屬性帆布等於畫布。

37
00:02:37,980 --> 00:02:42,370
因此，這是一種奇怪的畫布就是它的老化讚美詩元素。

38
00:02:42,540 --> 00:02:45,550
因此，它實際上是在這裡，我們所做的一切。

39
00:02:45,600 --> 00:02:47,590
我會告訴你現在檢查這個權利。

40
00:02:47,730 --> 00:02:50,280
這是工作版本或最終版本。

41
00:02:50,380 --> 00:02:54,070
如果我來看看第一個向你展示它是如何工作的。

42
00:02:54,070 --> 00:02:59,450
再次，如果我看看，我檢查一下黑色的背景是不是身體。

43
00:02:59,700 --> 00:03:08,040
這是一種叫做畫布，畫布，基本上作為一個地方做動畫和圖形的HMO元素。

44
00:03:08,280 --> 00:03:19,010
所以，如果我去DN看看畫布可以看到，添加了香味歲的五到每一個煙霧大麻元素可用於繪製圖形是在Javascript腳本。

45
00:03:19,290 --> 00:03:20,300
所以這就是全部是。

46
00:03:20,310 --> 00:03:26,000
它在畫布自身沒有JavaScript的它確實沒有做任何事情的元素。

47
00:03:26,280 --> 00:03:37,140
但後來我們去添加JavaScript對說這樣的話使矩形這裡讓綠色製造三維形狀在這裡做這個動畫，我們這樣做，所有的JavaScript。

48
00:03:37,140 --> 00:03:40,830
所以紙J.S.使用canvas元素。

49
00:03:40,920 --> 00:03:45,000
它的階段，就是它在所有的圖形所有的動畫補充道。

50
00:03:45,000 --> 00:03:49,140
所以我們需要有我們的網頁上的畫布，你可以看到這個空間的例子。

51
00:03:49,560 --> 00:03:59,760
如果我去最底部的肌體的唯一事情是這樣的在這裡畫布，它有ID等於畫布，也設置為黑色背景。

52
00:03:59,850 --> 00:04:04,500
所以標識等於畫布符合這條直線就在這裡。

53
00:04:04,500 --> 00:04:06,300
帆布等於畫布。

54
00:04:06,300 --> 00:04:16,460
所以，我們只是告訴本文腳本文件或本文腳本腳本什麼ID尋找這在剛剛命名，但畫布上的例子。

55
00:04:16,800 --> 00:04:18,890
所以，我們要做的非常類似的措施。

56
00:04:18,930 --> 00:04:22,820
但在我們那裡，我們需要確保我們包括紙張是的。

57
00:04:23,220 --> 00:04:26,250
所以，當你去下載。

58
00:04:26,250 --> 00:04:35,870
和而不是打開的例子，我們要看看索引，然後我們可以選擇任一紙全部或紙充滿了男人和了解這裡的滿之一。

59
00:04:35,910 --> 00:04:47,410
所以，我要在複製到我們的目錄中，以便紙Dasch充分，但我們那麼在我們自己的應用程序，我們需要確保包括。

60
00:04:47,670 --> 00:04:55,200
所以源等於紙Dasch全japes就這樣和保存。

61
00:04:55,620 --> 00:04:59,760
然後，我們要做的只是刷新頁面在Chrome中。

62
00:05:00,120 --> 00:05:01,630
確保我們不會得到一個錯誤。

63
00:05:01,740 --> 00:05:02,390
大。

64
00:05:02,430 --> 00:05:04,590
因此，找到該文件就好了。

65
00:05:04,590 --> 00:05:11,580
現在，讓我們去紙天才的文檔，看教程，所以我其實沒有做這個早期。

66
00:05:12,120 --> 00:05:15,490
但我想讀什麼紙JSA是描述。

67
00:05:15,780 --> 00:05:21,960
因此，它是上了年紀的頂部運行，以我的五個帆布一個開放源碼的矢量圖形腳本框架。

68
00:05:22,080 --> 00:05:35,950
它提供了一個乾淨的場景圖的斜線文檔對象模型和很多強大的功能來創建和處理矢量圖形和貝塞爾曲線都在一個精心設計的一致性和清潔的編程接口整齊地包裹起來工作。

69
00:05:36,000 --> 00:05:37,540
所以，那種拗口。

70
00:05:37,560 --> 00:05:42,120
基本上這是一個踢屁股畫庫動畫庫圖形庫。

71
00:05:42,120 --> 00:05:43,560
這真的很受歡迎。

72
00:05:43,560 --> 00:05:52,270
有幾個人在那裡，所以它不是它不像一個查詢它幾乎是一個DOM操作庫。

73
00:05:52,290 --> 00:05:54,030
在一個事件處理庫。

74
00:05:54,030 --> 00:06:00,790
在圖形事情有很多動畫在那裡，但紙是我很有信心說這是最流行的。

75
00:06:01,110 --> 00:06:06,660
好讓我們回去教程和看一看起步。

76
00:06:06,660 --> 00:06:09,000
我想是的入門紙工作。

77
00:06:09,020 --> 00:06:09,900
是。

78
00:06:10,470 --> 00:06:14,280
我們會向下滾動這裡看看他們的榜樣。

79
00:06:14,820 --> 00:06:17,380
所以，我們可以做的是複製這整個事情。

80
00:06:17,400 --> 00:06:21,290
但我想這樣做一塊在一個時間，讓你看看它是如何工作的。

81
00:06:21,540 --> 00:06:29,270
因此，讓我們通過複製此畫布上開始只是複製整條生產線，我們就會把它放在我們的身體。

82
00:06:29,970 --> 00:06:36,180
所以帆布內徑等於我的畫布，如果我刷新頁面，我們將不會看到在所有的東西。

83
00:06:36,270 --> 00:06:48,260
如果我們的預期，我們將看到有一個畫布存在，但如果我們回去讓因為文字大小的紙張腳本畫布是我的畫布的複製這個腳本文本或類型。

84
00:06:48,260 --> 00:06:52,850
讓我們把在這裡並粘貼。

85
00:06:53,130 --> 00:07:00,000
所以，如果我們看看這裡發生了什麼有一些不錯的評論說，它創建了一個紙摹-S道路畫線。

86
00:07:00,120 --> 00:07:04,400
所以，我們做一個路徑和你將在這裡看到了很多語法，你從來沒有見過。

87
00:07:04,410 --> 00:07:05,730
並再次這一點。

88
00:07:05,940 --> 00:07:09,740
關鍵是，我逼著你看到一些新的東西來閱讀文檔。

89
00:07:09,800 --> 00:07:17,890
它可以脫敏你的我這種感覺不知道我在做什麼，我從來沒有見過此代碼之前，我不知道它是如何工作的。

90
00:07:17,940 --> 00:07:19,370
這是一種庫的點。

91
00:07:19,380 --> 00:07:23,310
你不必知道它是如何工作尤其是對於像動畫。

92
00:07:23,310 --> 00:07:26,120
只是很高興有其他人照顧它。

93
00:07:26,130 --> 00:07:28,700
我肯定是它救了我的命了很多次。

94
00:07:28,920 --> 00:07:33,070
所以，我們在這裡保存它創建一個變量的新路徑。

95
00:07:33,070 --> 00:07:50,960
我們改變筆觸顏色為黑色，然後我們在100逗號100創造的開始點，然後我們繼續我們的道路到開始，然後我們畫一條線，開始加100 X和負50歲。

96
00:07:51,210 --> 00:08:04,800
所以，我會告訴你，做什麼，但它吸引了來自100 100起一行，然後將其移至該行或將其第一點連接到300逗號50。

97
00:08:04,800 --> 00:08:09,260
因此，如果我們看一看使我們如果新鮮確保一切工作正常。

98
00:08:10,260 --> 00:08:12,160
我們結束了一個線。

99
00:08:13,170 --> 00:08:16,730
所以，當你有新的東西這樣做的最好的事情就是玩耍。

100
00:08:17,040 --> 00:08:18,480
因此，嘗試改變這一點。

101
00:08:18,630 --> 00:08:25,980
因此，它是紅色，現在開始為0 100。

102
00:08:25,980 --> 00:08:33,250
在那裡，我們走我們剛搬到我們這行的，或讓我們改變這是一些更激烈的像500。

103
00:08:33,510 --> 00:08:36,070
所以，你可以用這終日玩耍。

104
00:08:36,420 --> 00:08:51,580
但我想真正指出的是，我們正在創建一個腳本文件腳本不是文本所以它的JavaScript腳本文件，我們正在設置該屬性帆布帆布等於我的畫布是名稱，或者我們分配的ID。

105
00:08:51,660 --> 00:08:58,530
因此，這些必須匹配和整個點只是告訴本文腳本文件在哪裡畫的東西。

106
00:08:58,560 --> 00:09:00,040
使用什麼樣的畫布。

107
00:09:00,300 --> 00:09:02,360
因此，我們可以玩多了不少。

108
00:09:02,460 --> 00:09:10,890
我會強烈建議你停止播放視頻並看看教程嘗試一些其他的東西。

109
00:09:11,100 --> 00:09:17,720
所以我就為您指出的路徑的預定義的形狀，這就是我們將要使用。

110
00:09:17,820 --> 00:09:21,280
我們將與我們的應用程序在這裡決策圈。

111
00:09:21,690 --> 00:09:24,270
因此，這是我們需要做的。

112
00:09:24,690 --> 00:09:31,820
讓我們只是在這裡複製此代碼，以便帕特新的路徑點圈，那麼你必須給它一個點作一圓。

113
00:09:32,160 --> 00:09:34,240
然後半徑樣子。

114
00:09:34,320 --> 00:09:44,690
所以你可以看到有一個解釋，所以它需要一個中心點x 100是70和50半徑，然後填充顏色。

115
00:09:45,000 --> 00:09:51,120
因此，讓我們一起來看看眼前這個複製到我們的代碼底部，看看會發生什麼。

116
00:09:51,720 --> 00:09:56,160
這是什麼樣的，你做了很多為J S和類似的庫。

117
00:09:56,340 --> 00:09:57,340
你只是實驗。

118
00:09:57,480 --> 00:10:01,520
因此，讓我們改變半徑為10。

119
00:10:01,530 --> 00:10:02,880
你去那裡。

120
00:10:03,540 --> 00:10:09,000
所以，我們也可以嘗試通過只複製下來到另一條線路做另一個圓。

121
00:10:09,150 --> 00:10:15,610
讓我們把它叫做變種圈2等於新的路徑點。

122
00:10:15,840 --> 00:10:18,340
讓我們使這一個真正的大和紫色。

123
00:10:18,630 --> 00:10:22,250
因此，新的起點，讓我們把它放在50。

124
00:10:22,250 --> 00:10:25,740
走過了50，這將是巨大的。

125
00:10:25,740 --> 00:10:34,730
因此，它給它的300半徑，然後圈填充顏色等於紫色。

126
00:10:34,830 --> 00:10:38,180
就這樣刷新。

127
00:10:38,670 --> 00:10:46,740
你可以看到我們最終與巨大的圓圈，你居然分不清它有多大，因為我們的畫布沒有採取我們的屏幕的整個寬度。

128
00:10:46,950 --> 00:10:52,860
因此，讓我們做，明年，因為我們希望我們希望我們的畫布佔用的整個寬度。

129
00:10:52,860 --> 00:11:01,790
所以，我會去，並作出新的樣式表，所以我說的鏈接標籤這裡Tref的等於圓的點SS不存在。

130
00:11:02,430 --> 00:11:12,210
然後讓我們保存了一個名為圈Stut看到評估什麼，我們要做的是在畫布上增加100％的文件。

131
00:11:12,840 --> 00:11:17,930
而且，我們也給它的黑色背景。

132
00:11:17,930 --> 00:11:21,880
如果我們是新鮮的，你可以看到我們正在接近，但我們有幾件事情。

133
00:11:21,870 --> 00:11:25,210
其中第一個就是我們的身體實際上並不走一路下跌。

134
00:11:25,230 --> 00:11:28,860
因此，我們的畫布佔用的寬度時，100％。

135
00:11:28,980 --> 00:11:38,840
但是，即使我們給它100％的高度，現在它不會真正改變我們希望它的方式。

136
00:11:38,850 --> 00:11:41,570
然後，我們也有這樣的利潤率，我們想擺脫的。

137
00:11:42,000 --> 00:11:46,390
因此，而不是花太多的時間去在那我就告訴你什麼是我們需要做的。

138
00:11:46,770 --> 00:11:54,500
那麼剛才設置高度為100％，而利潤率為零。

139
00:11:54,810 --> 00:11:58,490
如果我現在刷新頁面，它佔用整個屏幕。

140
00:11:58,860 --> 00:12:10,440
所以如果你想之前，我們在添加此代碼，然後再取消註釋檢查身體，你看看會發生什麼去到更多的細節和準確理解，為什麼我們這樣做檢查身體。

141
00:12:10,560 --> 00:12:20,020
基本上我們只是確保身體佔據整個寬度和高度，有沒有保證金，這意味著我們的畫布會再展開佔用了整個空間為好。

142
00:12:20,250 --> 00:12:20,910
好。

143
00:12:20,910 --> 00:12:24,680
所以我們創建了一個帆布現在真的，我會在這個視頻做的最後一件事。

144
00:12:24,690 --> 00:12:30,420
我只是想向你介紹我們是如何文書的有紙劇本的腳本。

145
00:12:30,420 --> 00:12:35,140
我們給它一個畫布，然後我們在這裡放一些代碼，你從來沒有見過的。

146
00:12:35,190 --> 00:12:41,030
很多這樣我已經，直到我做了這個視頻，或者直到我做了這個項目為這部影片從未有過的。

147
00:12:41,100 --> 00:12:42,380
我肯定見過。

148
00:12:42,390 --> 00:12:43,820
這種精確的視頻。

149
00:12:43,830 --> 00:12:46,580
但問題是，它是新的。

150
00:12:46,650 --> 00:12:48,130
這就是為什麼我們正在這樣做。

151
00:12:48,150 --> 00:12:54,200
這是一個非常重要的技能，能夠利用氧化還原代碼，基本上它複製並更改它。

152
00:12:54,330 --> 00:12:54,980
大。

153
00:12:54,990 --> 00:13:05,980
因此，在接下來的視頻中，我將會給你一個快速的自選動作，所以如果你只是想獲得該項目，並跳過不管你想叫它教育學習經驗。

154
00:13:06,000 --> 00:13:11,170
但是，如果你只得到一種回報繼續跳到下一個視頻。

155
00:13:11,190 --> 00:13:13,040
我建議你這樣做雖然。

156
00:13:13,050 --> 00:13:17,860
我們不會做出最令人印象深刻的事情，但我要你做一些圈子裡的練習。

157
00:13:17,940 --> 00:13:18,500
非常令人興奮的。

158
00:13:18,510 --> 00:13:18,960
我知道。

159
00:13:19,200 --> 00:13:19,480
好。

160
00:13:19,500 --> 00:13:20,360
我見。