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

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,500
だから、あなたは音を再生しないので、必ずこのビデオのためにそれを行う必要はありませんことを確認してください。

8
00:00:19,500 --> 00:00:19,970
 

9
00:00:19,980 --> 00:00:25,950
しかし、ディレクトリに沿ってフォローしたい場合は、そのサウンドフォルダをドラッグまたはコピーするようにしてください。

10
00:00:25,950 --> 00:00:26,820
 

11
00:00:26,850 --> 00:00:33,960
あなたがする必要があるのは、私たちのファイルを作成してファイルを正しいディレクトリに保存するようにすることです。私はそれを毎回サークルと呼んでいます。

12
00:00:34,740 --> 00:00:38,650
 

13
00:00:39,810 --> 00:00:46,490
まあ、私は私たちの時間のL. スケルトンはもちろんそれと同じです。私たちは今のところそれを残します。

14
00:00:46,800 --> 00:00:51,110
だから、実際に何も見てはならないはずです。

15
00:00:51,120 --> 00:00:53,710
さあ紙の天才に行きましょう。

16
00:00:54,000 --> 00:00:55,370
もう一度私は本当にこの1つが大好きです。

17
00:00:55,560 --> 00:01:00,530
しかし、私たちはこれから離れていくつもりです。私たちはダウンロードして始めます。

18
00:01:01,350 --> 00:01:06,390
そして、私が最初にやることは、私が実際に行った最新のバージョンをダウンロードすることだけです。

19
00:01:07,260 --> 00:01:10,810
だからあなたがそれで終わったら、それはこのように見えます。

20
00:01:11,010 --> 00:01:15,050
そして、まず、examplesディレクトリを見てみましょう。

21
00:01:15,090 --> 00:01:19,600
アニメーション化されたアニメーションスターを見てみましょう。

22
00:01:19,860 --> 00:01:23,880
これで遊ぶのはかなり楽しいですので、私はめまいになりますので、私はそれを止めるつもりです。

23
00:01:23,880 --> 00:01:26,280
しかし、他のものもいくつか見てみることができます。

24
00:01:26,280 --> 00:01:28,300
キャンディークラッシュ。

25
00:01:29,310 --> 00:01:32,010
だから、あなたがすることができるいくつかのクールなアニメーションがあります。

26
00:01:32,130 --> 00:01:35,590
ここには小さな物理学が関わっています。

27
00:01:35,610 --> 00:01:38,120
それ以外に何がありますか？

28
00:01:38,130 --> 00:01:45,110
このクールなラインアニメーションと他のものの全体の束があなたです。

29
00:01:45,110 --> 00:01:49,290
私はあなたがマウスを動かすと、このような視差効果が本当に好きです。

30
00:01:49,830 --> 00:01:50,150
OK。

31
00:01:50,190 --> 00:01:52,400
だから、これをやる時間を費やすことができます。

32
00:01:52,410 --> 00:01:55,450
あなたが望むなら、それらのどれかを開くことができる素晴らしい例がたくさんあります。

33
00:01:55,470 --> 00:01:56,980
どのように動作するかを見てみましょう。

34
00:01:57,060 --> 00:02:04,500
それで、そのスペースを見てみましょう。あなたが私たちが紙を含んでいることがわかるでしょう。 S. Jay Querreyと同じように、もちろんそのライブラリのファイルが必要です。

35
00:02:04,590 --> 00:02:08,060
 

36
00:02:08,460 --> 00:02:14,670
しかし、以前は見たことのないものがあります。これは、スクリプトタイプがテキストスラッシュペーパースクリプトに等しいことです。

37
00:02:14,730 --> 00:02:16,070
 

38
00:02:16,260 --> 00:02:22,620
したがって、特定のタイプのファイルやスクリプトを書くことができます。これは、特定のドメイン固有の言語であるペーパースクリプトと呼ばれ、基本的にはペーパーチェイス用に作られた言語です。

39
00:02:22,620 --> 00:02:29,240
Paperchaseが含まれていないと動作しません。

40
00:02:29,250 --> 00:02:33,350
また、このキャンバスの属性キャンバスがキャンバスに等しいことも確認できます。

41
00:02:33,570 --> 00:02:37,960
だからキャンバスは年老いた賛美歌の要素なのです。

42
00:02:37,980 --> 00:02:42,370
だから、実際には私たちがしているすべてのものです。

43
00:02:42,540 --> 00:02:45,550
私は今これを検査することを示します。

44
00:02:45,600 --> 00:02:47,590
これは作業バージョンまたは最終バージョンです。

45
00:02:47,730 --> 00:02:50,280
私は最初にそれをどのように動作するかを見てみましょう。

46
00:02:50,380 --> 00:02:54,070
繰り返しますが、この黒い背景を調べると、それは体ではありません。

47
00:02:54,070 --> 00:02:59,450
 

48
00:02:59,700 --> 00:03:06,900
これはキャンバスと呼ばれるもので、キャンバスは基本的にアニメーションやグラフィックスを行う場所として機能するHMO要素です。

49
00:03:06,930 --> 00:03:08,040
 

50
00:03:08,280 --> 00:03:15,990
だから私がDNに行くとキャンバスの外観は、各煙大麻要素に5つの老化した匂いが追加され、Javascriptのスクリプトであるようにグラフィックスを描くのに使用できることが分かります。

51
00:03:16,020 --> 00:03:19,010
それが本当にすべてです。

52
00:03:19,290 --> 00:03:20,300
これはキャンバスの要素で、javascriptなしでは実際には何もしません。

53
00:03:20,310 --> 00:03:26,000
 

54
00:03:26,280 --> 00:03:33,030
しかし、その後、私たちは行くと、ここでそれが四角形の緑を作るために四角形にするようなことを言うためにjavascriptのを追加するこのアニメーションを行うと私たちはすべてJavascriptでそれを行う。

55
00:03:33,030 --> 00:03:37,140
だからペーパーJ. S. canvas要素を使用します。

56
00:03:37,140 --> 00:03:40,830
それはすべてのグラフィックスのすべてのアニメーションに追加される段階です。

57
00:03:40,920 --> 00:03:45,000
したがって、このスペースの例でわかるように、ページにキャンバスを配置する必要があります。

58
00:03:45,000 --> 00:03:49,140
 

59
00:03:49,560 --> 00:03:56,370
私が一番下に行くと、体の中の唯一のものはキャンバスで、キャンバスに等しいIDとキャンバスに等しい背景と黒に設定された背景があります。

60
00:03:56,370 --> 00:03:59,760
だからイドはキャンバスがこの行に相当するのと同じです。

61
00:03:59,850 --> 00:04:04,500
キャンバスはキャンバスに等しい。

62
00:04:04,500 --> 00:04:06,300
 

63
00:04:06,300 --> 00:04:14,220
だから、このペーパー・スクリプト・ファイルまたはこのペーパー・スクリプト・スクリプトに、ちょうど名前がついたがキャンバスの例で探すIDを教えているだけです。

64
00:04:14,220 --> 00:04:16,460
だから我々はこれに非常に似た何かをするつもりです。

65
00:04:16,800 --> 00:04:18,890
しかし、私たちがそこに着く前に、我々は紙にはいを入れることを確認する必要があります。

66
00:04:18,930 --> 00:04:22,820
あなたがダウンロードに行くとき。

67
00:04:23,220 --> 00:04:26,250
 

68
00:04:26,250 --> 00:04:32,190
そして、例を開くよりも索引をつけて、紙でいっぱいにしたり、紙で拾ったりして、完全なものを理解することができます。

69
00:04:32,190 --> 00:04:35,870
 

70
00:04:35,910 --> 00:04:45,450
だから私は私たちのディレクトリにそれをコピーするつもりだから紙Dasch完全だが、私たち自身のアプリで我々はそれを含めることを確認する必要があります。

71
00:04:45,450 --> 00:04:47,410
だから、ソースはそれと同じように紙のダッシュフルジャップと同じで保存します。

72
00:04:47,670 --> 00:04:55,200
Chromeでページを更新するだけです。

73
00:04:55,620 --> 00:04:59,760
エラーがないことを確認してください。

74
00:05:00,120 --> 00:05:01,630
すばらしいです。

75
00:05:01,740 --> 00:05:02,390
だから、ファイルがうまく見つかった。

76
00:05:02,430 --> 00:05:04,590
さて、紙の天才のドキュメントに行き、チュートリアルを見てみましょう。私は実際にこれを早くやっていませんでした。

77
00:05:04,590 --> 00:05:11,580
しかし、私はJSAの論文の記述を読みたいと思っています。

78
00:05:12,120 --> 00:05:15,490
オープンソースのベクターグラフィックススクリプティングフレームワークで、私の5つのキャンバスに時代を超えて走っています。

79
00:05:15,780 --> 00:05:21,290
 

80
00:05:22,080 --> 00:05:28,200
クリーンなシーングラフスラッシュのドキュメントオブジェクトモデルと、ベクタグラフィックスとベジェ曲線を作成して作業するための強力な機能が、うまく設計された一貫したクリーンなプログラミングインターフェイスですっきりとまとめられています。

81
00:05:28,230 --> 00:05:33,540
 

82
00:05:33,540 --> 00:05:35,950
一口のようなもの。

83
00:05:36,000 --> 00:05:37,540
基本的には、ライブアニメーションライブラリーグラフィックスライブラリをキックしています。

84
00:05:37,560 --> 00:05:42,120
それは本当にかなり人気があります。

85
00:05:42,120 --> 00:05:43,560
 

86
00:05:43,560 --> 00:05:50,250
そこにはいくつかのものがありますので、1つのDOM操作ライブラリのクエリのようなものではありません。

87
00:05:50,250 --> 00:05:52,270
1つのイベント処理ライブラリ。

88
00:05:52,290 --> 00:05:54,030
 

89
00:05:54,030 --> 00:05:59,400
グラフィックスにはたくさんのアニメーションがありますが、ペーパーは私がそれが最も人気があると言っていると確信しています。

90
00:05:59,400 --> 00:06:00,790
さて、チュートリアルに戻り、始めてみましょう。

91
00:06:01,110 --> 00:06:06,660
はい、紙を使って作業を始めていると思います。

92
00:06:06,660 --> 00:06:09,000
はい。

93
00:06:09,020 --> 00:06:09,900
下にスクロールして、ここでその例を見ていきます。

94
00:06:10,470 --> 00:06:14,280
だから、私たちができることは、この全体をコピーすることです。

95
00:06:14,820 --> 00:06:17,380
しかし、私はそれをどのように動作するか見るために一度に1つずつしたいと思っています。

96
00:06:17,400 --> 00:06:21,290
ですから、このキャンバスをコピーして全体の行をコピーしてから、私たちの体に入れてみましょう。

97
00:06:21,540 --> 00:06:29,270
だからキャンバスI D. 私のキャンバスに等しく、私がページをリフレッシュすると、何も見えません。

98
00:06:29,970 --> 00:06:36,180
 

99
00:06:36,270 --> 00:06:44,100
そこにキャンバスがあることを期待していたら、元に戻すと、このスクリプトのテキストまたはタイプをコピーしましょう。テキストサイズの紙のスクリプトキャンバスは私のキャンバスです。

100
00:06:44,100 --> 00:06:48,260
それをここに貼り付けて貼り付けましょう。

101
00:06:48,260 --> 00:06:52,850
 

102
00:06:53,130 --> 00:06:59,150
ここで何が起こっているのかを見ると、線を描くための紙のG-Sパスが作成されるという素晴らしいコメントがあります。

103
00:06:59,170 --> 00:07:00,000
だから私たちは道を作って、あなたは一度も見たことのない文法をたくさん見ています。

104
00:07:00,120 --> 00:07:04,400
そしてもう一度それがポイントです。

105
00:07:04,410 --> 00:07:05,730
重要なのは、私があなたにドキュメントを読むためのいくつかの新しいことを見せることです。

106
00:07:05,940 --> 00:07:09,740
 

107
00:07:09,800 --> 00:07:16,470
それは私が何をしているのか分からないこの感情にあなたを鈍感にすることができます。

108
00:07:16,480 --> 00:07:17,890
それは、図書館のポイントのようなものです。

109
00:07:17,940 --> 00:07:19,370
特にアニメーションのようなものについては、どのように動作するのかを知る必要はありません。

110
00:07:19,380 --> 00:07:23,310
他の誰かがあなたのためにそれを世話していることを嬉しく思います。

111
00:07:23,310 --> 00:07:26,120
私はそれが私の人生を何度も救ったのは間違いありません。

112
00:07:26,130 --> 00:07:28,700
ここで新しいパスを作成して変数に保存します。

113
00:07:28,920 --> 00:07:33,070
ストロークの色を黒に変更し、開始位置を100カンマ100で作​​成し、その開始位置にパスを移動した後、開始するラインを100

114
00:07:33,070 --> 00:07:40,800
Xとマイナス50 yにします。

115
00:07:40,800 --> 00:07:50,960
だから私はあなたにそれが何をしているかを正確に見せますが、それは100

116
00:07:51,210 --> 00:07:57,780
100から始まって線を引いて、その線を動かすか、または最初の点を300カンマ50に結び付けます。

117
00:07:57,780 --> 00:08:04,800
だから、もし私たちが新鮮ならば、すべてが働いていることを確認してください。

118
00:08:04,800 --> 00:08:09,260
私たちは一線で終わります。

119
00:08:10,260 --> 00:08:12,160
だから、このような新しいものを持っているときにできることは、周りを遊ぶことです。

120
00:08:13,170 --> 00:08:16,730
だからこれを変えてみてください。

121
00:08:17,040 --> 00:08:18,480
それは赤で開始は0 100です。

122
00:08:18,630 --> 00:08:25,980
私たちはラインを移動したばかりか、これを500のようなより劇的なものに変えようとしています。

123
00:08:25,980 --> 00:08:33,250
だから一日中このままで遊ぶことができます。

124
00:08:33,510 --> 00:08:36,070
 

125
00:08:36,420 --> 00:08:43,140
 

126
00:08:43,140 --> 00:08:50,340
しかし、私が本当に指摘したいのは、テキストではなく紙のスクリプトスクリプトを作成しているので、javascriptの紙のスクリプトで、このキャンバスの属性キャンバスを私たちが割り当てた名前またはIDであるキャンバスに設定しています。

127
00:08:50,340 --> 00:08:51,580
 

128
00:08:51,660 --> 00:08:58,110
ですから、これらは一致しなければならず、その全体像はこのペーパー・スクリプト・ファイルに物を描く場所を伝えることに過ぎません。

129
00:08:58,110 --> 00:08:58,530
使用するキャンバス

130
00:08:58,560 --> 00:09:00,040
だから私たちはもう少し詳しく遊ぶことができます。

131
00:09:00,300 --> 00:09:02,360
 

132
00:09:02,460 --> 00:09:09,990
そして、ビデオをやめてチュートリアルを見て、他のことを試してみることを強くお勧めします。

133
00:09:09,990 --> 00:09:10,890
だから私はあなたがパスの定義済みの形に向かって指します。これは私たちが使用するものです。

134
00:09:11,100 --> 00:09:17,720
ここではアプリケーションを使ってサークルを作っていきます。

135
00:09:17,820 --> 00:09:21,280
これが私たちがする必要があることです。

136
00:09:21,690 --> 00:09:24,270
 

137
00:09:24,690 --> 00:09:30,510
ちょうどここにこのコードをコピーして、パットの新しいパスの点の円にして、円を作るためにポイントを与えなければなりません。

138
00:09:30,630 --> 00:09:31,820
そして、それが見える半径。

139
00:09:32,160 --> 00:09:34,240
だから、説明があるので、中心点x

140
00:09:34,320 --> 00:09:43,770
100 y 70と半径50、そして塗りつぶしの色が必要です。

141
00:09:43,770 --> 00:09:44,690
ですから、これをコードの最後にコピーして何が起こるかを見てみましょう。

142
00:09:45,000 --> 00:09:51,120
J Sなどのライブラリで何をしているのかはまあまあです。

143
00:09:51,720 --> 00:09:56,160
あなたはただ実験します。

144
00:09:56,340 --> 00:09:57,340
だから半径を10に変更しましょう。

145
00:09:57,480 --> 00:10:01,520
そこに行く。

146
00:10:01,530 --> 00:10:02,880
したがって、別の行にコピーするだけで別のサークルを試すこともできます。

147
00:10:03,540 --> 00:10:09,000
それをvar circle 2が新しいパスドットに等しいとしましょう。

148
00:10:09,150 --> 00:10:15,610
これを本当に大きくて紫色にしましょう。

149
00:10:15,840 --> 00:10:18,340
新しいポイントと50にしましょう。

150
00:10:18,630 --> 00:10:22,250
50になると巨大になるだろう。

151
00:10:22,250 --> 00:10:25,740
それで、それは300の半径を与え、次に色を塗りつぶす丸は紫色に等しくなります。

152
00:10:25,740 --> 00:10:34,730
ちょうどそのリフレッシュのように。

153
00:10:34,830 --> 00:10:38,180
 

154
00:10:38,670 --> 00:10:43,650
私たちのキャンバスは画面の幅全体を占めていないので、あなたは実際にはそれがどれほど大きいのか分からないほど巨大な円で終わることがわかります。

155
00:10:43,710 --> 00:10:46,740
それでは、キャンバスが幅全体を占めるようにしたいと思っているので、次にこれをやりましょう。

156
00:10:46,950 --> 00:10:52,860
 

157
00:10:52,860 --> 00:11:00,660
だから、新しいスタイルシートを作ってリンクタグを追加します。Trefは存在しないサークルのドットSSと同じです。

158
00:11:00,660 --> 00:11:01,790
 

159
00:11:02,430 --> 00:11:10,870
サークルシュタットと呼ばれるファイルを保存して評価を見てみましょう。キャンバスを100％追加します。

160
00:11:10,900 --> 00:11:12,210
それに黒の背景も与えましょう。

161
00:11:12,840 --> 00:11:17,930
私たちが新鮮なものであれば、私たちは近づいていますが、いくつかあります。

162
00:11:17,930 --> 00:11:21,880
その最初のものは、私たちの体が実際に完全に下がらないということです。

163
00:11:21,870 --> 00:11:25,210
だから、私たちのキャンバスは幅の100％を占める。

164
00:11:25,230 --> 00:11:28,860
しかし、たとえそれを100％上げても、実際にはそれが望む方法を実際に変更するつもりはありません。

165
00:11:28,980 --> 00:11:31,830
 

166
00:11:35,490 --> 00:11:38,840
それから、私たちが取り除きたいこのマージンもあります。

167
00:11:38,850 --> 00:11:41,570
だから、あまりにも多くの時間を過ごすのではなく、私はあなたに何をする必要があるかを示すだけです。

168
00:11:42,000 --> 00:11:46,390
ちょうど高さを100％に設定し、マージンをゼロに設定します。

169
00:11:46,770 --> 00:11:54,500
そして、ページをリフレッシュすると、フルスクリーンが表示されます。

170
00:11:54,810 --> 00:11:58,490
 

171
00:11:58,860 --> 00:12:05,160
したがって、詳細をさらに詳しく理解し、なぜこのコードを追加する前にボディを検査したのかを正確に理解してから、ボディの検査を再度アンコメントすると、何が起こるかがわかります。

172
00:12:05,190 --> 00:12:10,440
基本的には、ボディが幅と高さ全体を占めていることを確認しているだけで、マージンがないため、キャンバスが拡大してそのスペース全体を占めることになります。

173
00:12:10,560 --> 00:12:15,570
 

174
00:12:15,630 --> 00:12:20,020
OK。

175
00:12:20,250 --> 00:12:20,910
だから私たちはキャンバスを作成しました。これは本当に私がこのビデオでやる最後のものです。

176
00:12:20,910 --> 00:12:24,680
私は書類作成の仕方を紹介したかっただけです。

177
00:12:24,690 --> 00:12:30,420
それをキャンバスにしてから、これまで見たことのないコードをここに入れます。

178
00:12:30,420 --> 00:12:35,140
私がこのビデオを制作するまで、または私がこのビデオのためにこのプロジェクトを作るまで、これまでに一度も見たことのないことがたくさんあります。

179
00:12:35,190 --> 00:12:40,770
私は間違いなく前にそれを見た。

180
00:12:41,100 --> 00:12:42,380
この正確なビデオ。

181
00:12:42,390 --> 00:12:43,820
しかし、ポイントはそれが新しいことです。

182
00:12:43,830 --> 00:12:46,580
それが私たちがこれをやっている理由です。

183
00:12:46,650 --> 00:12:48,130
コードレドックスを取ることができ、基本的にそれをコピーして変更することは、本当に重要なスキルです。

184
00:12:48,150 --> 00:12:54,200
すばらしいです。

185
00:12:54,330 --> 00:12:54,980
 

186
00:12:54,990 --> 00:12:59,940
次のビデオでは、私はあなたに簡単なオプションのエクササイズを提供しています。あなたがプロジェクトに立ち寄り、あなたがそれを呼びたいと思っている教育学習体験をスキップしたいならば。

187
00:12:59,940 --> 00:13:05,980
しかし、あなたが報酬の種類になるだけで次のビデオをスキップしてください。

188
00:13:06,000 --> 00:13:11,170
私はあなたがそれをすることをお勧めします。

189
00:13:11,190 --> 00:13:13,040
 

190
00:13:13,050 --> 00:13:17,070
私たちは最も印象的なことをするつもりはありませんが、私はあなたにいくつかのサークルで運動をさせるつもりです。

191
00:13:17,070 --> 00:13:17,860
とてもわくわくする。

192
00:13:17,940 --> 00:13:18,500
知っている。

193
00:13:18,510 --> 00:13:18,960
OK。

194
00:13:19,200 --> 00:13:19,480
その時お会いしましょう。

195
00:13:19,500 --> 00:13:20,360