0:00:00.769,0:00:03.293
要畫出類似動畫的方法有很多種

0:00:03.293,0:00:05.071
但是基本原理都是一樣

0:00:05.071,0:00:07.072
如果你拿一堆圖畫或圖片

0:00:07.072,0:00:09.456
每張與下一張間只有一點不同

0:00:09.456,0:00:11.392
然後快速地翻過

0:00:11.392,0:00:13.237
圖片看起來就像在動的樣子

0:00:13.237,0:00:14.370
古時候

0:00:14.370,0:00:16.223
這些圖畫都是用手畫的

0:00:16.223,0:00:19.466
畫很久也只能做出3秒鐘的動畫

0:00:19.466,0:00:21.907
幸運的我們，活在未來！

0:00:22.137,0:00:26.070
用些程式代碼就能畫出簡單的動畫

0:00:26.070,0:00:27.568
現在我就教你怎麼做

0:00:27.678,0:00:31.592
螢幕的右手邊，你會看到在可愛的黃色背景上[br]有一台可愛的小車車

0:00:31.592,0:00:34.255
是的！這台小車是我自己設計的。[br]謝謝讚美！

0:00:34.687,0:00:38.329
總之，在這你可以看到[br]我們設定了美麗的背景顏色，

0:00:38.329,0:00:42.121
這台車並沒有任何的邊框，[br]這種函數叫做<i>noStroke()</i>

0:00:42.121,0:00:46.039
這裏，我們寫了一個新的變數「x」，[br]這是小車的位置

0:00:46.039,0:00:47.307
給它個數值: 10

0:00:47.307,0:00:51.755
如果我們改變這個變數的數值，[br]你就會看到小車來回地移動。

0:00:51.755,0:00:53.131
把它寫回10. . .

0:00:53.131,0:00:55.708
這個是用來設定車子的顏色，

0:00:55.708,0:00:57.665
然後畫兩個矩形當作車身，

0:00:57.665,0:00:59.963
看起來，這第一個矩形是下面的，

0:00:59.963,0:01:02.013
這個是上面的那個。

0:01:02.013,0:01:05.027
接著，車輪也是這樣做。

0:01:05.027,0:01:06.979
先設顏色，然後畫兩個橢圓形:

0:01:06.979,0:01:08.648
一個在 「 x＋25」的位置，

0:01:08.648,0:01:10.191
另一個在 「 x＋75」的位置。

0:01:10.191,0:01:12.678
然後！我們終於要來學點新東西了。

0:01:12.678,0:01:15.099
這個新東西叫做「函數定義」

0:01:15.099,0:01:16.561
後面你會學到。

0:01:16.561,0:01:19.576
目前，只要看著學，[br]然後記住它的樣子就可以了。

0:01:19.576,0:01:24.132
要注意的重點是 「畫」這個字，[br]還有這些大括號 「 { } 」。

0:01:24.132,0:01:26.740
這個是左括號（開始），這個是右括號（結束）。

0:01:26.750,0:01:30.210
這一整段我們叫它做 「 繪圖迴圈，或是 「動畫迴圈」。

0:01:30.210,0:01:32.407
而我們放進的這些大括號中的指令，[br]

0:01:32.407,0:01:34.984
會被一遍又一遍地[br]快速地重複被執行。

0:01:34.984,0:01:36.552
這就是為什麼它被叫做 「迴圈」。

0:01:36.552,0:01:38.494
而這些大括號以外的所有的東西，

0:01:38.494,0:01:41.476
只有在程式開始時[br]被執行一次。

0:01:41.476,0:01:45.479
所以！製作動畫的第一步就是[br]把所有的圖形編碼放進這些大括號裡。

0:01:45.479,0:01:47.735
這樣你的圖案就會被一遍遍地畫出。

0:01:47.735,0:01:50.857
來做吧！我現在把所有的圖形編碼拉出來，

0:01:50.857,0:01:54.261
然後把它放到這個迴圈裡。

0:01:54.261,0:01:57.919
為了提醒我自己這組編碼[br]是在這組大括號裡，

0:01:57.919,0:02:02.247
我把它全部反白選起來後按 「tab」鍵，[br]把它們往內縮，

0:02:02.247,0:02:05.176
這樣我才記得這些程式碼在這些大括號裡。

0:02:05.176,0:02:08.730
你會發現所有的東西看起來都很像；

0:02:08.730,0:02:10.034
它們一點都沒變。

0:02:10.034,0:02:12.160
因為我們第一次跑這些圖形迴圈時，

0:02:12.160,0:02:13.346
電腦會告訴它自己說：

0:02:13.346,0:02:16.513
「喔！好！畫個新變數『x』，[br]把它設成10，畫兩個矩形，

0:02:16.513,0:02:17.560
畫兩個橢圓形...」

0:02:17.560,0:02:19.517
接著它會回到最開始，[br]然後再告訴自己說：

0:02:19.517,0:02:24.034
「畫個新變數『x』，把它設成10，畫兩個矩形，畫兩個橢圓形。」

0:02:24.034,0:02:26.676
然後「畫個新變數『x』，把它設成10，畫兩個矩...」

0:02:26.676,0:02:29.138
一模一樣！什麼都沒變。

0:02:29.138,0:02:31.061
啊...看起來沒有動畫啊！

0:02:31.061,0:02:34.660
它就只是在舊的矩形跟橢圓形上[br]畫同樣的圖形。

0:02:34.660,0:02:37.520
記得我們說過，如果你要它看起來像動畫，

0:02:37.520,0:02:40.150
你必須在你上一次的圖上改一點點。

0:02:40.150,0:02:42.551
所以，如果我要我的小車往前走，

0:02:42.551,0:02:45.041
我得改變變數「x」的變數值，對吧?!

0:02:45.041,0:02:47.712
來把它改成...11 吧！

0:02:47.712,0:02:51.117
啊！等等！這樣就只是每次都是在11跑了啊

0:02:51.117,0:02:53.800
那要怎樣才能讓電腦[br]在跑同一段程式碼時，

0:02:53.800,0:02:57.023
讓這個「x」不斷的變呢?!

0:02:57.023,0:02:59.487
好！來看這個奇技！

0:02:59.487,0:03:02.479
記得這個「var x 」能變出一個新變數吧!

0:03:02.479,0:03:04.748
當我們把它像這樣放在圖形迴圈裏，

0:03:04.748,0:03:07.737
它會一次又一次地[br]生成一個叫做「x」的新變數。

0:03:07.737,0:03:10.764
我們要做的是把它放到圖形迴圈的外面。

0:03:10.764,0:03:13.261
這樣它就只會做一次。

0:03:13.261,0:03:17.492
接著，每次電腦跑程式碼時，[br]看到變數「x」，

0:03:17.492,0:03:22.483
它就會再使用上一次輸入的那個變數值

0:03:22.483,0:03:25.079
現在就來做吧！[br]我現在把這個變數

0:03:25.079,0:03:27.333
放到這個圖形迴圈的外面。

0:03:27.333,0:03:30.267
現在開始，它就只會執行變數一次。

0:03:31.077,0:03:33.483
每次它跑到變數「x」時，

0:03:33.483,0:03:35.399
它就會再使用同個變數。

0:03:35.399,0:03:38.117
我們指定的上一個變數值是11，

0:03:38.117,0:03:39.492
那麼那就永遠是11。

0:03:39.492,0:03:41.487
好了！要變魔術了！

0:03:41.487,0:03:44.385
在圖形迴圈的某處，[br]我們會改變「x」值，

0:03:44.385,0:03:46.717
比上一個多一點點。像這樣：

0:03:46.717,0:03:51.989
x 等於舊的x 數值加上，比如說，「1」。

0:03:52.589,0:03:54.111
耶！成功了！

0:03:54.761,0:03:56.893
是說... 看起來...滑溜溜的...

0:03:56.893,0:03:59.157
如果你想知道為什麼看起來會這樣，

0:03:59.157,0:04:02.381
那是因為我們忘了[br]在圖形迴圈裏畫上背景

0:04:02.381,0:04:04.447
所以它不斷地在畫這台車，

0:04:04.447,0:04:07.073
但是還是看的到新車底下疊著的舊車，

0:04:07.073,0:04:11.740
如果我把這行拉到圖形迴圈的最前面，像這樣，

0:04:12.040,0:04:15.704
然後按「重新啟動」，[br]才能再看到我的車...

0:04:15.984,0:04:17.739
耶！太讚了！

0:04:18.029,0:04:19.850
如果我要讓車子跑地快一點，

0:04:19.850,0:04:22.521
只要改變每次增加 x 的數值就可以了。

0:04:22.521,0:04:24.834
如果讓它是10... 呼！[br]跑出螢幕外了！

0:04:24.834,0:04:28.497
我也可以讓它是負數。[br]如果 x －10 那麼...

0:04:28.497,0:04:29.778
回來了...

0:04:30.018,0:04:32.195
把它變回正值

0:04:33.425,0:04:34.542
又能跑了！

0:04:34.542,0:04:36.550
所以要重點是：

0:04:36.550,0:04:39.217
這裏的這些東西叫做「圖形迴圈 」。

0:04:39.217,0:04:41.331
你要把畫圖程式碼放進這裡。

0:04:41.331,0:04:43.487
這樣它就會重複地畫。

0:04:43.487,0:04:46.292
然後把變數放在圖形迴圈外面。

0:04:46.292,0:04:49.329
把變數寫在迴圈外這件事超級重要。

0:04:49.329,0:04:51.496
這樣才能重複使用同一個變數。

0:04:51.496,0:04:53.469
在這個迴圈裡面，

0:04:53.469,0:04:55.892
我們得改這個變數一點點，

0:04:55.892,0:04:58.242
通常就是把它設成上一個數值，

0:04:58.242,0:05:01.492
再加上一個特定的數字－[br]加或是減一個數字。

0:05:01.952,0:05:05.504
最後，在你的程式碼裏的某處使用這個變數，

0:05:05.504,0:05:07.740
這樣你的圖形每次看起來都會不一樣。

0:05:07.740,0:05:10.051
這樣[br]就完成了！！