1
00:00:00,370 --> 00:00:01,460
OK、歓迎します。

2
00:00:01,620 --> 00:00:06,150
だから、このビデオではすでに行ったことを取り上げ、少しアニメーション化するつもりです。

3
00:00:06,720 --> 00:00:12,090
だから最終的には、すべてのキーを押すたびに、ランダムな位置に円を描き、その色をわずかに生かすということです。

4
00:00:14,010 --> 00:00:17,360
 

5
00:00:18,300 --> 00:00:21,120
そして、サイズアニメーションも取得します。

6
00:00:21,460 --> 00:00:25,620
だから色が変わるのを拾うことができるかどうかは分かりませんが、色合いをちょっと追加するだけの簡単な方法です。

7
00:00:25,620 --> 00:00:26,980
 

8
00:00:27,330 --> 00:00:30,220
しかし、どちらかが私たちのために始めるでしょう。

9
00:00:30,210 --> 00:00:34,770
実際にはこれらのサークルの色を変更するだけで、実際には1つのサークルの色を変更するだけで簡単に開始します。

10
00:00:34,770 --> 00:00:37,950
 

11
00:00:38,040 --> 00:00:40,660
だから、後で来ることもありません。

12
00:00:40,680 --> 00:00:48,150
Paperchaseに行くと、チュートリアルに戻り、一番下のアニメーションを見ます。

13
00:00:48,150 --> 00:00:51,400
まず、いくつかの例を見てください。

14
00:00:51,540 --> 00:00:53,180
ここに例があります。

15
00:00:53,730 --> 00:00:57,440
実際にアニメーションを実行するのは本当に簡単です。

16
00:00:57,440 --> 00:01:01,260
この場合、何かを矩形で定義します。

17
00:01:01,260 --> 00:01:08,310
私たちの場合、それは円であり、フレーム上にこれがあり、私たちがここに入れるコードはアニメーションのすべてのフレームで実行されます。

18
00:01:08,310 --> 00:01:11,610
 

19
00:01:11,610 --> 00:01:18,360
 

20
00:01:18,360 --> 00:01:26,730
したがってこの場合、このアニメーションのすべてのフレームをこの矩形を3度回転させます。この場合は、すべてのフレームを使用して、ここで定義したこのサークルの色相に1を加えます。

21
00:01:26,760 --> 00:01:28,200
 

22
00:01:28,980 --> 00:01:31,580
だからこれを試してみましょう。

23
00:01:31,770 --> 00:01:35,290
キーの内側にない新しいサークルを作ってみましょう。

24
00:01:35,310 --> 00:01:38,290
ページが読み込まれると、これは常にそこに表示されます。

25
00:01:38,430 --> 00:01:50,250
だから我々はそれをvar animate

26
00:01:50,250 --> 00:01:55,870
circleと呼んで新しいパスのドットサークルに等しく、それを新しいポイントにして、このサークルを300カンマ300と半径にしましょう。

27
00:01:56,010 --> 00:01:58,200
100を大きくしましょう。

28
00:01:58,560 --> 00:01:59,870
ちょうどそれのように。

29
00:02:00,150 --> 00:02:09,190
そして、ドット塗りの色をアニメートするのではなく、アニメーションサークルとアニメーションサークルというアニメーションを行い、そのように始めるには赤色に設定します。

30
00:02:09,260 --> 00:02:12,380
 

31
00:02:12,540 --> 00:02:13,790
すばらしいです。

32
00:02:13,890 --> 00:02:18,690
だからまだアニメ化されていませんが、リフレッシュすると大きなサークルが1つずつ表示され、キーを押すたびにランダムな小さなサークルが表示されます。

33
00:02:18,690 --> 00:02:22,260
 

34
00:02:22,260 --> 00:02:31,110
今度はアニメーションを追加する必要があります。フレーム上の関数を見ていて、このイベント引数を除いて、渡すことができます。

35
00:02:31,110 --> 00:02:33,640
 

36
00:02:33,660 --> 00:02:38,790
もし私たちがそれについて何らかのデータを必要としていたら、それぞれのフレームで何かをしたいのであれば、実際にはそれを必要としません。

37
00:02:38,790 --> 00:02:39,560
 

38
00:02:39,840 --> 00:02:48,050
そして、ここではアニメーションサークルのドット塗りつぶしカラーに、あなたはプラスの1つしかありません。

39
00:02:48,120 --> 00:02:50,750
そして、これはその例からまっすぐです。

40
00:02:50,820 --> 00:02:57,330
したがって、アニメーションが毎回新しいフレームを要求するたびに、私たちはフレームレートを決めるのではなく、このコードが呼び出される頻度を決定します。

41
00:02:57,480 --> 00:02:59,730
 

42
00:02:59,790 --> 00:03:06,570
私たちのアニメーションサークルの色合いに用紙を追加する新しいフレームがあるときはいつでも、

43
00:03:06,570 --> 00:03:08,160
 

44
00:03:08,160 --> 00:03:10,650
リフレッシュしてそこに行きましょう。

45
00:03:10,650 --> 00:03:13,720
このようなアニメーションを行うのは本当に簡単です。

46
00:03:13,830 --> 00:03:20,040
何かの位置が変わってもどこでもアニメーションを行うことができますが、それはもう少し複雑です。

47
00:03:20,040 --> 00:03:21,250
 

48
00:03:21,270 --> 00:03:26,760
これは、1つのポイントから別のポイントにアニメートするだけでなく、均等に加速することもないため、この例はさらに複雑になります。

49
00:03:26,760 --> 00:03:31,360
 

50
00:03:31,410 --> 00:03:35,630
だから少し複雑ですが、それでも数行しかありません。

51
00:03:36,600 --> 00:03:39,830
移動するものの別の例があります。

52
00:03:40,500 --> 00:03:42,610
いくつかの他のアニメーション。

53
00:03:42,610 --> 00:03:48,450
 

54
00:03:48,450 --> 00:03:54,840
私たちがやることは、彼らが表示しないものを使用することです。私たちがやりたいことを少しずつ時間を費やすここの例は、フレームごとにそれぞれをスケールすることです。

55
00:03:56,340 --> 00:04:00,360
だから私たちがするのは基本的に私がキーを押してサークルを作るときです。

56
00:04:00,390 --> 00:04:09,060
私がそのキャラクターをすべてのフレームに当てたとき、またはポイント9の9ポイント9の8で基本的にそれを縮めることによってそれをちょっと収縮させるとき、それが300×300または300の半径として私に言い訳をすると言いましょう。

57
00:04:09,060 --> 00:04:15,680
 

58
00:04:15,720 --> 00:04:22,590
私は正確な数を忘れていますが、それをフレームごとに小さなサイズで掛けています。縮小して縮小するので消えます。

59
00:04:22,590 --> 00:04:24,760
 

60
00:04:25,110 --> 00:04:26,940
だから私はそれがどのように動作するかをお見せしましょう。

61
00:04:27,090 --> 00:04:35,130
私たちのコードに戻って、サークルをアニメーション化し、フレームに入れて、色相に追加するのではなく、

62
00:04:35,250 --> 00:04:36,910
 

63
00:04:37,110 --> 00:04:40,370
 

64
00:04:42,910 --> 00:04:51,950
私たちがやることは、私が見つけた方法であるアニメーションサークルのドットスケールを行うことです。私たちが実際には見ないように同じサイズのままにしておきたい場合は、それを残すだけです。

65
00:04:51,950 --> 00:04:55,760
 

66
00:04:55,970 --> 00:05:08,600
しかし、ポイント9のようなことをして、リフレッシュすると、すべてのフレームの変化が1ずつ増えます。

67
00:05:08,960 --> 00:05:14,560
そして、それは前のフレームにあったものの9または90パーセントの点で拡大します。

68
00:05:14,570 --> 00:05:23,960
だから、ポイント9

69
00:05:23,960 --> 00:05:30,540
9のようなものに変更すれば、より遅いトランジションになり、ポイント5のようなものに変更すれば、非常に速く収縮します。

70
00:05:30,680 --> 00:05:34,090
したがって、すべてのフレームで前回と同じくらい大きくなります。

71
00:05:34,280 --> 00:05:37,180
だから私は一緒に行ったことがポイント9を開始すると思います。

72
00:05:37,370 --> 00:05:39,040
だから私たちはそれを残すでしょう。

73
00:05:39,140 --> 00:05:45,680
そして今私達は色を変える単一の円を持っていて、私たちが次にやりたいことを縮小するのは、私がこれらの他のキーを押す時です。

74
00:05:45,680 --> 00:05:46,530
 

75
00:05:46,730 --> 00:05:52,300
あなたはそれらのサークルに同じことをしてほしいと思うし、もう少し複雑です。

76
00:05:52,490 --> 00:05:58,730
しかし正直なところ、このコードは同じままになりますが、ページ上にあるすべてのサークルに対してこれを行う必要があるという点が異なります。

77
00:05:58,760 --> 00:06:01,410
 

78
00:06:01,790 --> 00:06:06,410
 

79
00:06:06,410 --> 00:06:12,950
 

80
00:06:12,950 --> 00:06:17,380
これはおそらく、実際に何をするかを決定する最も劇的な変化です。円の配列を持ち、キーを押すたびに新しい円の配列にその円を追加します。なぜなら今は実際にはすべてを追跡していないからです何とかすべてを保存する必要があるサークルです。

81
00:06:17,420 --> 00:06:24,830
この関数のフレームのすぐ上に、すでに存在しアニメーション化されているすべての円を参照することができます。

82
00:06:24,890 --> 00:06:26,240
 

83
00:06:26,840 --> 00:06:28,210
そこで、このコードを保存します。

84
00:06:28,610 --> 00:06:33,770
しかし、私たちがしたいことは、存在しない配列をループすることで、単にサークルと呼ぶだけです。

85
00:06:33,770 --> 00:06:42,230
だから、var iは、円StarLinkよりも小さいAyasに等しい。

86
00:06:42,690 --> 00:06:47,420
プラスプラス私たちがやりたいことはサークルです。

87
00:06:47,580 --> 00:06:50,260
私は色をここに記入します。

88
00:06:50,260 --> 00:06:54,130
だから、ちょうど始めに塗りつぶしの色から始めます。

89
00:06:54,140 --> 00:06:56,500
だから私はこの行をコピーします。

90
00:06:58,550 --> 00:07:01,050
サークルは存在しないので、まだ動作しません。

91
00:07:01,070 --> 00:07:08,780
しかし、フレームごとに、この配列内のすべての円をループし、フレームごとに1つずつ色相を追加するという考えがあります。

92
00:07:08,780 --> 00:07:11,590
 

93
00:07:12,470 --> 00:07:17,900
そしてそれはかなり激しいと思うかもしれません、そして、それは起こっていることの多くですが、紙がそれを処理します。

94
00:07:17,900 --> 00:07:18,760
 

95
00:07:18,890 --> 00:07:25,550
しかし、私たちは最後に少しずつ最適化を加えていく予定ですので、今後のビデオで私が何を意味するのかをご紹介します。

96
00:07:25,550 --> 00:07:25,910
 

97
00:07:25,910 --> 00:07:27,780
しかし今のところこれが私たちがすることです。

98
00:07:28,340 --> 00:07:35,660
 

99
00:07:35,660 --> 00:07:42,590
 

100
00:07:42,590 --> 00:07:51,830
 

101
00:07:51,830 --> 00:07:53,140
今私たちがしなければならないことは、実際にサークル配列に追加するサークルを追加することです。サークルの配列を空の配列として定義し、キーを押したときにキーを押すと、円を描くこの新しい円を円で押すこの新しい点をこの無作為な点の円から外してください。

102
00:07:53,240 --> 00:07:58,180
今は半径10でキルフィルカラーをオレンジ色にリセットしています。

103
00:07:58,220 --> 00:08:03,660
だから私たちは既に持っていたサークルをこのサークルの配列に押し込んでいます。

104
00:08:04,040 --> 00:08:06,830
それから、すべてのサークルを更新しています。

105
00:08:06,830 --> 00:08:09,950
だから1つの円があり、20の円があるかもしれません。

106
00:08:10,070 --> 00:08:12,270
任意の時点で100のサークルが存在する可能性があります。

107
00:08:12,320 --> 00:08:19,790
すべてをループして各キューにキューを追加します。今すぐに見て、リフレッシュしてもまだうまくいきません。

108
00:08:19,790 --> 00:08:21,670
 

109
00:08:21,770 --> 00:08:25,550
そして、これはプッシュがどのように働くかについての本当に興味深い点をもたらします。

110
00:08:25,550 --> 00:08:33,650
だから私がコンソールを開くと、ここにある未定義の心のプラクリティの色合いを読むことができないと私に伝えています。

111
00:08:33,650 --> 00:08:34,570
 

112
00:08:35,150 --> 00:08:41,150
だから、それは何となくPhilコードのHughプロパティがPhilコードが存在しないということを読んでいないのではない。

113
00:08:41,540 --> 00:08:43,870
では、一定のログサークルを作ってみましょう。

114
00:08:44,330 --> 00:08:48,390
そして、あなたは問題が何かを見るでしょう。

115
00:08:49,100 --> 00:08:53,610
私がこれを開くと、私たちはエラーがあったため停止しました。

116
00:08:53,780 --> 00:09:00,390
しかし実際には実際の新しいサークルではなく配列にオレンジ色の文字列を追加しました。

117
00:09:00,530 --> 00:09:06,710
それは、私たちが推進しているのは、新しいサークルを作る新しいサークルだけではないからです。

118
00:09:06,740 --> 00:09:09,470
次に、塗りつぶしの色をオレンジ色に設定します。

119
00:09:09,500 --> 00:09:13,010
返された最後のものはオレンジの文字列でした。

120
00:09:13,010 --> 00:09:16,780
最終的な結果は毎回オレンジを押し込んでいるだけです。

121
00:09:16,850 --> 00:09:18,530
私たちが望むものではありません。

122
00:09:19,190 --> 00:09:28,310
新しい変数を作って新しいサークルとし、新しいサークルのドット塗りカラーをオレンジ色に別々にしてから、新しいサークルを押します。

123
00:09:28,310 --> 00:09:35,920
 

124
00:09:35,990 --> 00:09:40,480
だから、これを編集するのではなく、私が見ることが重要な誤りだと思います。

125
00:09:40,760 --> 00:09:44,870
 

126
00:09:44,870 --> 00:09:51,760
 

127
00:09:51,770 --> 00:09:56,450
完全に私を守ってくれましたが、私たちがそのサークルを通過し、ドット塗りつぶしの色がオレンジ色になっているメソッドを連鎖させたメソッドがあれば、どのように動作するのかを理解することが重要です。プッシュで配列。

128
00:09:56,560 --> 00:09:57,800
私たちはただオレンジを追加していました。

129
00:09:57,830 --> 00:09:59,980
だから我々はそれを修正する必要があります。

130
00:10:00,110 --> 00:10:01,290
だからうまくいけば、これはそれを行います。

131
00:10:01,310 --> 00:10:08,300
そして、実際に私はそれが知っているが、我々は新鮮で、見てみましょう今新しいサークルを追加ランダムに配置し、彼らはすべての敵Heughアニメーションので完璧。

132
00:10:09,700 --> 00:10:15,290
 

133
00:10:15,290 --> 00:10:17,450
さて、これをサイズに合わせて更新しましょう。

134
00:10:17,570 --> 00:10:21,550
だから実際にはこれとまったく同じラインです。

135
00:10:22,280 --> 00:10:23,860
私はログではなく私たちの定数を取り除くでしょう。

136
00:10:23,930 --> 00:10:26,140
我々はサークルが必要な場合を除いて。

137
00:10:26,160 --> 00:10:28,420
私。

138
00:10:30,680 --> 00:10:31,370
OK。

139
00:10:31,730 --> 00:10:36,420
だから私があなたを見せてくれる前に、それがうまくいくかどうかは、私たちがしたことをちょうど見直しましょう

140
00:10:36,440 --> 00:10:42,860
 

141
00:10:42,860 --> 00:10:49,100
 

142
00:10:49,100 --> 00:10:54,590
 

143
00:10:54,590 --> 00:10:55,770
だからランダムな点で円に追加する任意のキーを押すと、そのランダムな点を10ピクセルの半径で新しい円にするためにランダムな点を作成し、実際にはそれを私たちがソリューション内にある500我々は最終的に変更されるオレンジ色で始まるようにフィルカードを販売しています。

144
00:10:55,880 --> 00:10:58,840
そして、それを円と呼ばれる配列にプッシュします。

145
00:10:59,060 --> 00:11:07,200
次に、新しいフレームが呼び出されるたびに、すべてのアニメーションフレームがすべての円をループします。

146
00:11:07,520 --> 00:11:13,180
そしてそれぞれのために、私たちはheweに1を追加し、スケールのサイズに9を乗じています。

147
00:11:13,430 --> 00:11:17,260
だから、フレームごとに少しずつ小さくしています。

148
00:11:17,360 --> 00:11:22,130
しかし実際には非常に多くのフレームが収縮しているので、ページの読み込みから始まるアニメーションサークルを取り除くことができます。

149
00:11:22,130 --> 00:11:26,540
 

150
00:11:26,540 --> 00:11:28,240
私たちは黒い画面から始めたくない。

151
00:11:28,250 --> 00:11:30,700
そして、キーを押すとサークルが追加されます。

152
00:11:30,710 --> 00:11:33,320
だからそれを試してみましょう。

153
00:11:33,320 --> 00:11:37,110
そこに行く。

154
00:11:37,130 --> 00:11:40,920
したがって、これはほぼ同じ方法です。

155
00:11:40,980 --> 00:11:43,130
ここに音があります。

156
00:11:43,130 --> 00:11:51,260
1つ大きな違いは、これらのすべてのキーには割り当てられた色があることを示す色です。Qこの青は暗い青色の半分ですか？

157
00:11:52,220 --> 00:11:54,000
 

158
00:11:54,110 --> 00:11:55,810
それはグレーですか？

159
00:11:55,980 --> 00:12:02,310
それで、ここでは紫色ですが、ここでは、始めるすべての人をオレンジ色にしてから色相を変えるように設定しています。

160
00:12:02,310 --> 00:12:03,070
 

161
00:12:03,500 --> 00:12:08,500
だから私たちはそれを修正する必要がありますが、私たちが音を加えるまでそれを待つことを意味します。

162
00:12:08,510 --> 00:12:10,990
だから今は終わった。

163
00:12:11,210 --> 00:12:16,820
現在、サークルアレイからそれらのサークルを削除することは決してないため、最適化するための小さな最適化があります。

164
00:12:16,820 --> 00:12:19,000
 

165
00:12:19,040 --> 00:12:25,490
だから、10秒後にサークルが3秒後にも消えてしまったことが分かっても、私たちはそれを見ません。

166
00:12:25,490 --> 00:12:27,330
技術的にはそれはまだその配列です。

167
00:12:27,620 --> 00:12:29,540
それは理想的ではありません。

168
00:12:29,540 --> 00:12:34,640
私たちが作ったサークルが1万個あり、そのうちのどれも見ることができない場合は、それらすべてをループしたくありません。

169
00:12:34,640 --> 00:12:36,170
 

170
00:12:36,170 --> 00:12:41,360
最後の動画では、サークルがなくなったことがわかったとき、またはそれがもはや実現可能ではないことがわかったときに、サークルを削除する方法を示します。

171
00:12:41,360 --> 00:12:43,090
 

172
00:12:43,490 --> 00:12:45,320
OK次は音で作業します