1
00:00:00,769 --> 00:00:03,293
要畫出類似動畫的方法有很多種

2
00:00:03,293 --> 00:00:05,071
但是基本原理都是一樣

3
00:00:05,071 --> 00:00:07,072
如果你拿一堆圖畫或圖片

4
00:00:07,072 --> 00:00:09,456
每張與下一張間只有一點不同

5
00:00:09,456 --> 00:00:11,392
然後快速地翻過

6
00:00:11,392 --> 00:00:13,237
圖片看起來就像在動的樣子

7
00:00:13,237 --> 00:00:14,370
古時候

8
00:00:14,370 --> 00:00:16,223
這些圖畫都是用手畫的

9
00:00:16,223 --> 00:00:19,466
畫很久也只能做出3秒鐘的動畫

10
00:00:19,466 --> 00:00:21,907
幸運的我們，活在未來！

11
00:00:22,137 --> 00:00:26,070
用些程式代碼就能畫出簡單的動畫

12
00:00:26,070 --> 00:00:27,568
現在我就教你怎麼做

13
00:00:27,678 --> 00:00:31,592
螢幕的右手邊，你會看到在可愛的黃色背景上
有一台可愛的小車車

14
00:00:31,592 --> 00:00:34,255
是的！這台小車是我自己設計的。
謝謝讚美！

15
00:00:34,687 --> 00:00:38,329
總之，在這你可以看到
我們設定了美麗的背景顏色，

16
00:00:38,329 --> 00:00:42,121
這台車並沒有任何的邊框，
這種函數叫做<i>noStroke()</i>

17
00:00:42,121 --> 00:00:46,039
這裏，我們寫了一個新的變數「x」，
這是小車的位置

18
00:00:46,039 --> 00:00:47,307
給它個數值: 10

19
00:00:47,307 --> 00:00:51,755
如果我們改變這個變數的數值，
你就會看到小車來回地移動。

20
00:00:51,755 --> 00:00:53,131
把它寫回10. . .

21
00:00:53,131 --> 00:00:55,708
這個是用來設定車子的顏色，

22
00:00:55,708 --> 00:00:57,665
然後畫兩個矩形當作車身，

23
00:00:57,665 --> 00:00:59,963
看起來，這第一個矩形是下面的，

24
00:00:59,963 --> 00:01:02,013
這個是上面的那個。

25
00:01:02,013 --> 00:01:05,027
接著，車輪也是這樣做。

26
00:01:05,027 --> 00:01:06,979
先設顏色，然後畫兩個橢圓形:

27
00:01:06,979 --> 00:01:08,648
一個在 「 x＋25」的位置，

28
00:01:08,648 --> 00:01:10,191
另一個在 「 x＋75」的位置。

29
00:01:10,191 --> 00:01:12,678
然後！我們終於要來學點新東西了。

30
00:01:12,678 --> 00:01:15,099
這個新東西叫做「函數定義」

31
00:01:15,099 --> 00:01:16,561
後面你會學到。

32
00:01:16,561 --> 00:01:19,576
目前，只要看著學，
然後記住它的樣子就可以了。

33
00:01:19,576 --> 00:01:24,132
要注意的重點是 「畫」這個字，
還有這些大括號 「 { } 」。

34
00:01:24,132 --> 00:01:26,740
這個是左括號（開始），這個是右括號（結束）。

35
00:01:26,750 --> 00:01:30,210
這一整段我們叫它做 「 繪圖迴圈，或是 「動畫迴圈」。

36
00:01:30,210 --> 00:01:32,407
而我們放進的這些大括號中的指令，


37
00:01:32,407 --> 00:01:34,984
會被一遍又一遍地
快速地重複被執行。

38
00:01:34,984 --> 00:01:36,552
這就是為什麼它被叫做 「迴圈」。

39
00:01:36,552 --> 00:01:38,494
而這些大括號以外的所有的東西，

40
00:01:38,494 --> 00:01:41,476
只有在程式開始時
被執行一次。

41
00:01:41,476 --> 00:01:45,479
所以！製作動畫的第一步就是
把所有的圖形編碼放進這些大括號裡。

42
00:01:45,479 --> 00:01:47,735
這樣你的圖案就會被一遍遍地畫出。

43
00:01:47,735 --> 00:01:50,857
來做吧！我現在把所有的圖形編碼拉出來，

44
00:01:50,857 --> 00:01:54,261
然後把它放到這個迴圈裡。

45
00:01:54,261 --> 00:01:57,919
為了提醒我自己這組編碼
是在這組大括號裡，

46
00:01:57,919 --> 00:02:02,247
我把它全部反白選起來後按 「tab」鍵，
把它們往內縮，

47
00:02:02,247 --> 00:02:05,176
這樣我才記得這些程式碼在這些大括號裡。

48
00:02:05,176 --> 00:02:08,730
你會發現所有的東西看起來都很像；

49
00:02:08,730 --> 00:02:10,034
它們一點都沒變。

50
00:02:10,034 --> 00:02:12,160
因為我們第一次跑這些圖形迴圈時，

51
00:02:12,160 --> 00:02:13,346
電腦會告訴它自己說：

52
00:02:13,346 --> 00:02:16,513
「喔！好！畫個新變數『x』，
把它設成10，畫兩個矩形，

53
00:02:16,513 --> 00:02:17,560
畫兩個橢圓形...」

54
00:02:17,560 --> 00:02:19,517
接著它會回到最開始，
然後再告訴自己說：

55
00:02:19,517 --> 00:02:24,034
「畫個新變數『x』，把它設成10，畫兩個矩形，畫兩個橢圓形。」

56
00:02:24,034 --> 00:02:26,676
然後「畫個新變數『x』，把它設成10，畫兩個矩...」

57
00:02:26,676 --> 00:02:29,138
一模一樣！什麼都沒變。

58
00:02:29,138 --> 00:02:31,061
啊...看起來沒有動畫啊！

59
00:02:31,061 --> 00:02:34,660
它就只是在舊的矩形跟橢圓形上
畫同樣的圖形。

60
00:02:34,660 --> 00:02:37,520
記得我們說過，如果你要它看起來像動畫，

61
00:02:37,520 --> 00:02:40,150
你必須在你上一次的圖上改一點點。

62
00:02:40,150 --> 00:02:42,551
所以，如果我要我的小車往前走，

63
00:02:42,551 --> 00:02:45,041
我得改變變數「x」的變數值，對吧?!

64
00:02:45,041 --> 00:02:47,712
來把它改成...11 吧！

65
00:02:47,712 --> 00:02:51,117
啊！等等！這樣就只是每次都是在11跑了啊

66
00:02:51,117 --> 00:02:53,800
那要怎樣才能讓電腦
在跑同一段程式碼時，

67
00:02:53,800 --> 00:02:57,023
讓這個「x」不斷的變呢?!

68
00:02:57,023 --> 00:02:59,487
好！來看這個奇技！

69
00:02:59,487 --> 00:03:02,479
記得這個「var x 」能變出一個新變數吧!

70
00:03:02,479 --> 00:03:04,748
當我們把它像這樣放在圖形迴圈裏，

71
00:03:04,748 --> 00:03:07,737
它會一次又一次地
生成一個叫做「x」的新變數。

72
00:03:07,737 --> 00:03:10,764
我們要做的是把它放到圖形迴圈的外面。

73
00:03:10,764 --> 00:03:13,261
這樣它就只會做一次。

74
00:03:13,261 --> 00:03:17,492
接著，每次電腦跑程式碼時，
看到變數「x」，

75
00:03:17,492 --> 00:03:22,483
它就會再使用上一次輸入的那個變數值

76
00:03:22,483 --> 00:03:25,079
現在就來做吧！
我現在把這個變數

77
00:03:25,079 --> 00:03:27,333
放到這個圖形迴圈的外面。

78
00:03:27,333 --> 00:03:30,267
現在開始，它就只會執行變數一次。

79
00:03:31,077 --> 00:03:33,483
每次它跑到變數「x」時，

80
00:03:33,483 --> 00:03:35,399
它就會再使用同個變數。

81
00:03:35,399 --> 00:03:38,117
我們指定的上一個變數值是11，

82
00:03:38,117 --> 00:03:39,492
那麼那就永遠是11。

83
00:03:39,492 --> 00:03:41,487
好了！要變魔術了！

84
00:03:41,487 --> 00:03:44,385
在圖形迴圈的某處，
我們會改變「x」值，

85
00:03:44,385 --> 00:03:46,717
比上一個多一點點。像這樣：

86
00:03:46,717 --> 00:03:51,989
x 等於舊的x 數值加上，比如說，「1」。

87
00:03:52,589 --> 00:03:54,111
耶！成功了！

88
00:03:54,761 --> 00:03:56,893
是說... 看起來...滑溜溜的...

89
00:03:56,893 --> 00:03:59,157
如果你想知道為什麼看起來會這樣，

90
00:03:59,157 --> 00:04:02,381
那是因為我們忘了
在圖形迴圈裏畫上背景

91
00:04:02,381 --> 00:04:04,447
所以它不斷地在畫這台車，

92
00:04:04,447 --> 00:04:07,073
但是還是看的到新車底下疊著的舊車，

93
00:04:07,073 --> 00:04:11,740
如果我把這行拉到圖形迴圈的最前面，像這樣，

94
00:04:12,040 --> 00:04:15,704
然後按「重新啟動」，
才能再看到我的車...

95
00:04:15,984 --> 00:04:17,739
耶！太讚了！

96
00:04:18,029 --> 00:04:19,850
如果我要讓車子跑地快一點，

97
00:04:19,850 --> 00:04:22,521
只要改變每次增加 x 的數值就可以了。

98
00:04:22,521 --> 00:04:24,834
如果讓它是10... 呼！
跑出螢幕外了！

99
00:04:24,834 --> 00:04:28,497
我也可以讓它是負數。
如果 x －10 那麼...

100
00:04:28,497 --> 00:04:29,778
回來了...

101
00:04:30,018 --> 00:04:32,195
把它變回正值

102
00:04:33,425 --> 00:04:34,542
又能跑了！

103
00:04:34,542 --> 00:04:36,550
所以要重點是：

104
00:04:36,550 --> 00:04:39,217
這裏的這些東西叫做「圖形迴圈 」。

105
00:04:39,217 --> 00:04:41,331
你要把畫圖程式碼放進這裡。

106
00:04:41,331 --> 00:04:43,487
這樣它就會重複地畫。

107
00:04:43,487 --> 00:04:46,292
然後把變數放在圖形迴圈外面。

108
00:04:46,292 --> 00:04:49,329
把變數寫在迴圈外這件事超級重要。

109
00:04:49,329 --> 00:04:51,496
這樣才能重複使用同一個變數。

110
00:04:51,496 --> 00:04:53,469
在這個迴圈裡面，

111
00:04:53,469 --> 00:04:55,892
我們得改這個變數一點點，

112
00:04:55,892 --> 00:04:58,242
通常就是把它設成上一個數值，

113
00:04:58,242 --> 00:05:01,492
再加上一個特定的數字－
加或是減一個數字。

114
00:05:01,952 --> 00:05:05,504
最後，在你的程式碼裏的某處使用這個變數，

115
00:05:05,504 --> 00:05:07,740
這樣你的圖形每次看起來都會不一樣。

116
00:05:07,740 --> 00:05:10,051
這樣
就完成了！！