1
00:00:00,370 --> 00:00:01,460
OK，我們將歡迎回來。

2
00:00:01,620 --> 00:00:06,430
因此，在這個視頻我們將採取什麼我們已經做了，我們要稍微製作動畫。

3
00:00:06,720 --> 00:00:17,360
所以最終我們希望發生的是，對每一個按鍵，我們得到一個隨機位置的圓圈，顏色和顏色略有動畫。

4
00:00:18,300 --> 00:00:21,120
而且我們也得到了大小動畫。

5
00:00:21,460 --> 00:00:26,980
所以，我不知道，如果你能在顏色變化回暖，但它這是非常sleights只是添加一點點的色調。

6
00:00:27,330 --> 00:00:30,220
但是，那些每個人都會為我們啟動。

7
00:00:30,210 --> 00:00:37,950
我們要真正開始只是改變這些圈子的顏色和我們實際打算通過只是改變一個圓圈的顏色開始簡單。

8
00:00:38,040 --> 00:00:40,660
所以，他們不是全部這將留待以後。

9
00:00:40,680 --> 00:00:48,150
所以，如果我們去Paperchase回去的教程，你看動畫底部。

10
00:00:48,150 --> 00:00:51,400
你可以做的第一件事就是看看一些例子。

11
00:00:51,540 --> 00:00:53,180
下面是一個例子。

12
00:00:53,730 --> 00:00:57,440
你可以看到它真的很簡單其實做動畫。

13
00:00:57,440 --> 00:01:01,260
我們做的是，我們在這種情況下，就定義了一個矩形。

14
00:01:01,260 --> 00:01:11,610
在我們的情況下，這將是一個圓，然後有這個框架上和任何代碼，我們擺在這裡將動畫的每一幀上運行。

15
00:01:11,610 --> 00:01:28,200
因此，在這種情況下，這個動畫的每一幀我們正在旋轉的矩形三度或在這種情況下，這是我們要利用我們增加一到這個圈子，我們這裡定義了的色調每一幀的內容。

16
00:01:28,980 --> 00:01:31,580
因此，讓我們嘗試了這一點。

17
00:01:31,770 --> 00:01:35,290
讓我們繼續前進，使一個新的循環的關鍵不是在內部進行。

18
00:01:35,310 --> 00:01:38,290
因此，這將只是總是存在的頁面加載時。

19
00:01:38,430 --> 00:01:55,870
所以我們把它叫做VAR動畫圈相當於新的路徑點圈，將其成為新的點，讓我們這個圈子在300逗號300和半徑。

20
00:01:56,010 --> 00:01:58,200
讓我們把它大100。

21
00:01:58,560 --> 00:01:59,870
就這樣。

22
00:02:00,150 --> 00:02:12,380
然後，我們會做動畫的，什麼是所謂的動畫圓，而不是動畫點填充顏色，並將其設置為紅色，開始就這樣。

23
00:02:12,540 --> 00:02:13,790
大。

24
00:02:13,890 --> 00:02:22,260
所以它不會被動畫還沒有，但如果你刷新，我們得到一個大圈，每次我打了一個關鍵時期，我們得到小圓圈是隨機的。

25
00:02:22,260 --> 00:02:33,640
現在，我們需要在我們的動畫添加和我們的框鋸功能，它真的很簡單，我們可以向內或向外傳遞，除了這個事件的說法。

26
00:02:33,660 --> 00:02:39,560
如果我們想做些事情，每個幀如果我們想了解它的部分數據，我們實際上並不需要的。

27
00:02:39,840 --> 00:02:48,050
然後將所有的在這裡做的是動畫界點填充顏色，你加等於1。

28
00:02:48,120 --> 00:02:50,750
這是直接從該例子。

29
00:02:50,820 --> 00:02:59,730
所以每次動畫請求一個新的幀裡面是達不到我們，讓我們沒有決定的幀速率這段代碼被執行的頻繁。

30
00:02:59,790 --> 00:03:08,160
每當有一個新的框架，其論文只是需要我們增加一到她的動畫圓的色調照顧。

31
00:03:08,160 --> 00:03:10,650
讓我們來刷新我們走吧。

32
00:03:10,650 --> 00:03:13,720
所以，真的很簡單，做這種動畫的。

33
00:03:13,830 --> 00:03:21,250
我們也可以做動畫，雖然只要改變一些立場，這是更複雜一點。

34
00:03:21,270 --> 00:03:31,360
這一次是因為他們不只是動畫的東西從一個點到另一個點，它也沒有加速均勻，更加複雜的這個例子。

35
00:03:31,410 --> 00:03:35,630
所以這是一個稍微複雜一些，但仍然只有幾行。

36
00:03:36,600 --> 00:03:39,830
這裡搬東西的另一個例子。

37
00:03:40,500 --> 00:03:42,610
其他一些動畫。

38
00:03:42,610 --> 00:03:56,280
我們打算做雖然是使用的東西，他們不顯示，而我花一點點時間挖成我們想要做的只是規模每一個下來的每一幀的文檔這裡的例子。

39
00:03:56,340 --> 00:04:00,360
所以我們要做的基本上是當我按下我們做了一圈的關鍵。

40
00:04:00,390 --> 00:04:15,680
比方說，它開始作為300 300或300的半徑原諒我，當我打的字每幀或基本上是由點擴展它一九點九八縮小一點點。

41
00:04:15,720 --> 00:04:24,760
我忘了確切的數字，但我們被一個較小的尺寸每一幀乘以它，它只是收縮和收縮，因此消失。

42
00:04:25,110 --> 00:04:26,940
所以，我會告訴你如何工作的。

43
00:04:27,090 --> 00:04:36,910
讓我們再回到我們的代碼，我們有一圈還是動畫和框架，而不是僅僅增加一個色調裡面。

44
00:04:37,110 --> 00:04:55,760
我們要做的就是做動畫圓點標尺是，我找到了一個方法，我們可以用我們想如果我們只是停留在這的話，會保持相同的大小，所以我們不會真正看到它的任何部分繁殖。

45
00:04:55,970 --> 00:05:08,600
但是，如果我們做一些像點九，我們有刷新我們去每幀由1變為hewe。

46
00:05:08,960 --> 00:05:14,560
它通過擴展點九，百分之九十的東西它是在一幀。

47
00:05:14,570 --> 00:05:30,540
因此，如果我們改變，要像9點9是一個比較長的過渡下來，如果我們將其更改為類似點五次它會非常非常迅速萎縮。

48
00:05:30,680 --> 00:05:34,090
所以每一幀它得到的一半大，因為它是在前面跑。

49
00:05:34,280 --> 00:05:37,180
所以，我想我是用9點開始了。

50
00:05:37,370 --> 00:05:39,040
因此，我們會留在這。

51
00:05:39,140 --> 00:05:46,530
現在我們有一個圓形變色，萎縮，我們想下一步要做什麼時，我打這些其他鍵。

52
00:05:46,730 --> 00:05:52,300
你想那些圈子做同樣的事情，這是一個有點複雜。

53
00:05:52,490 --> 00:06:01,410
但說實話這裡的代碼將保持所有不同了相同的是，我們需要為每個圓圈這是在頁面上做到這一點。

54
00:06:01,790 --> 00:06:17,380
這可能是最劇烈的變化，這將使實際上會做的就是每次都圈的數組，我們按一個鍵，我們將添加圈新的數組，因為現在我們實際上並不跟踪所有的圓圈，我們需要保存所有的人都莫名其妙。

55
00:06:17,420 --> 00:06:26,240
這樣的框架在這裡，在這個功能我們就可以重提已經存在和動畫每圈。

56
00:06:26,840 --> 00:06:28,210
因此，我們將保持這個代碼。

57
00:06:28,610 --> 00:06:33,770
但是，我們想要做的是遍歷數組不存在，所以我們只是把它圈。

58
00:06:33,770 --> 00:06:42,230
因此，對於變種i等於比星聯圈少零阿亞斯。

59
00:06:42,690 --> 00:06:47,420
另外再加上我們想要做的是做圓。

60
00:06:47,580 --> 00:06:50,260
我填充顏色在這裡所做的。

61
00:06:50,260 --> 00:06:54,130
所以我們剛開始只在一開始的填充顏色。

62
00:06:54,140 --> 00:06:56,500
所以我就複製這條線。

63
00:06:58,550 --> 00:07:01,050
因此，它不會因為圓的不存在尚未工作。

64
00:07:01,070 --> 00:07:11,590
但這個想法是通過這個數組各界每一幀我們循環，我們添加一個到每一個色調每一幀。

65
00:07:12,470 --> 00:07:18,760
你可能會認為這是相當激烈的，這是它的很多東西發生，但紙只是需要照顧它。

66
00:07:18,890 --> 00:07:25,910
但我們會也在接近尾聲一個小的優化被加入，所以我會告訴你我是什麼意思在未來的視頻。

67
00:07:25,910 --> 00:07:27,780
但現在這是我們要做的。

68
00:07:28,340 --> 00:07:53,140
而我們現在要做的實際上是添加這個圈子，我們正在做成圈排列，所以我們可以定義數組，我們圈是一個空數組，當你按下鍵上的一鍵啟動再下來我們就做圓圈往上推新社交圈中圈站推這條新道路出圈在這個隨機點。

69
00:07:53,240 --> 00:07:58,180
現在，我們有10個半徑和復位殺填充顏色為橙色。

70
00:07:58,220 --> 00:08:03,660
因此，我們只需按下那個圈子，我們已經有了進入這個圈子的數組。

71
00:08:04,040 --> 00:08:06,830
然後，我們每天更新圈子。

72
00:08:06,830 --> 00:08:09,950
所以，有可能是一個圓圈有可能是20圈。

73
00:08:10,070 --> 00:08:12,270
有可能是在任何給定時間100的社交圈。

74
00:08:12,320 --> 00:08:21,670
我們遍歷所有這些，添加一個到每個隊列，如果我們看看現在和刷新它不相當，但工作。

75
00:08:21,770 --> 00:08:25,550
這帶來了約推是如何工作的一個非常有趣的觀點。

76
00:08:25,550 --> 00:08:34,570
所以，如果我打開控制台它告訴我，我不能讀不確定心態24社和色調也就是在這裡。

77
00:08:35,150 --> 00:08:41,490
所以它不是以某種方式它不讀菲爾顏色休財產說菲爾代碼不存在。

78
00:08:41,540 --> 00:08:43,870
因此，讓我們做一個恆定的日誌圈。

79
00:08:44,330 --> 00:08:48,390
你會看到的問題是什麼。

80
00:08:49,100 --> 00:08:53,610
如果我打開這件事它停止，因為我們有一個錯誤。

81
00:08:53,780 --> 00:09:00,390
但是實際上我們加入橙串入數組而不是實際的新的循環。

82
00:09:00,530 --> 00:09:06,710
那是因為我們正在推動的不僅是我們正在做新的圈子新的圈子。

83
00:09:06,740 --> 00:09:09,470
然後，我們設置填充顏色為橙色。

84
00:09:09,500 --> 00:09:13,010
因此，在返回的最後一件事是字符串橙色。

85
00:09:13,010 --> 00:09:16,780
所以，最終的結果是，我們只是在橙色每次推。

86
00:09:16,850 --> 00:09:18,530
這不是我們想要的。

87
00:09:19,190 --> 00:09:35,920
因此，我們要創造一個新的變量，我們就叫它我們新的圈子，然後我們會做新的圓圈點綴填充顏色分別等於橙色，然後我們將在新一輪推。

88
00:09:35,990 --> 00:09:40,480
因此，而不是編輯了這一點，我不認為這是看到一個重要的錯誤。

89
00:09:40,760 --> 00:09:56,450
完全抓住了我措手不及一會兒有，但要了解如何工作的，我們有，我們已經通過了一圈，然後點填充顏色等於橙色，我們只是補充說整個事情到彼此頂部的那些鏈接的方法很重要數組與推動。

90
00:09:56,560 --> 00:09:57,800
我們只是在加入橙色。

91
00:09:57,830 --> 00:09:59,980
因此，我們需要解決它。

92
00:10:00,110 --> 00:10:01,290
所以希望這樣做吧。

93
00:10:01,310 --> 00:10:15,290
而實際上我知道它，但如果我們是新鮮的，看看現在新添加到圈子隨意放置，他們都敵人Heugh動畫所以才完美。

94
00:10:15,290 --> 00:10:17,450
現在讓我們來更新此與大小的工作。

95
00:10:17,570 --> 00:10:21,550
因此，它實際上只是我們這裡有這個確切的同一行。

96
00:10:22,280 --> 00:10:23,860
我會擺脫我們不變的無法登錄的。

97
00:10:23,930 --> 00:10:26,140
除了我們要圓。

98
00:10:26,160 --> 00:10:28,420
一世。

99
00:10:30,680 --> 00:10:31,370
好。

100
00:10:31,730 --> 00:10:36,420
所以之前我告訴你，如果它的作品讓我們只是回顧一下我們所做的。

101
00:10:36,440 --> 00:10:55,770
所以，當你打我們了一圈一個隨機點2添加任何按鍵我們做一個隨機點，使與隨機點10像素的半徑一個新的圓，讓真正改變以匹配我們在這五百解決方案然後我們賣的補卡，開始為橙色，這將最終改變。

102
00:10:55,880 --> 00:10:58,840
然後我們的推到一個數組稱為圈。

103
00:10:59,060 --> 00:11:07,200
然後，每一次一個新的框架被稱為我們通過各界循環每個動畫幀。

104
00:11:07,520 --> 00:11:13,310
而對於每一個我們增加一到hewe，我們正在由點9乘以規模的大小。

105
00:11:13,430 --> 00:11:17,260
因此，我們僅僅通過每幀點點縮小它。

106
00:11:17,360 --> 00:11:26,540
但有這麼多幀，它實際上縮小很快，我們可以擺脫我們的動畫圈，現在開始頁面加載。

107
00:11:26,540 --> 00:11:28,240
我們並不想開始一個黑色的屏幕。

108
00:11:28,250 --> 00:11:30,700
然後當你投中關鍵我們添加了一圈。

109
00:11:30,710 --> 00:11:33,320
因此，讓我們試試吧。

110
00:11:33,320 --> 00:11:37,110
在那裡，我們走了。

111
00:11:37,130 --> 00:11:40,920
因此，這幾乎是完全一樣的方式。

112
00:11:40,980 --> 00:11:43,130
這裡是聲音。

113
00:11:43,130 --> 00:11:54,000
其中一個最大的區別是顏色表示，這些每個鍵都有一個指定的顏色這裡這麼問是否這藍色深藍色的一半。

114
00:11:54,110 --> 00:11:55,810
它是灰色的。

115
00:11:55,980 --> 00:12:03,070
所以我們這是紫色的，現在我們在這裡設置每個人開始為橙色，然後改變色調。

116
00:12:03,500 --> 00:12:08,500
因此，我們需要解決這個問題，但我的意思是迫不及待地做到這一點，直到我們的聲音補充。

117
00:12:08,510 --> 00:12:10,990
因此，我們現在做的。

118
00:12:11,210 --> 00:12:19,000
有一個小的優化，這將使它最終因為現在我們永遠從圓陣消除這些圓圈。

119
00:12:19,040 --> 00:12:25,490
所以，即使你知道10秒後那個圈子已經三連秒後，我們沒有看到它。

120
00:12:25,490 --> 00:12:27,330
從技術上講，它仍然是數組中為止。

121
00:12:27,620 --> 00:12:29,540
所以這是不理想的。

122
00:12:29,540 --> 00:12:36,170
如果我們有，我們已經創造了10000圈，我們沒有看到任何人，我們不希望被遍歷所有的人。

123
00:12:36,170 --> 00:12:43,090
所以在最後一個視頻我會告訴你怎麼才能刪除圈子，當我們知道它的消失或者當我們知道它不再是可行的。