要畫出類似動畫的方法有很多種 但是基本原理都是一樣 如果你拿一堆圖畫或圖片 每張與下一張間只有一點不同 然後快速地翻過 圖片看起來就像在動的樣子 古時候 這些圖畫都是用手畫的 畫很久也只能做出3秒鐘的動畫 幸運的我們，活在未來！ 用些程式代碼就能畫出簡單的動畫 現在我就教你怎麼做 螢幕的右手邊，你會看到在可愛的黃色背景上 有一台可愛的小車車 是的！這台小車是我自己設計的。 謝謝讚美！ 總之，在這你可以看到 我們設定了美麗的背景顏色， 這台車並沒有任何的邊框， 這種函數叫做noStroke() 這裏，我們寫了一個新的變數「x」， 這是小車的位置 給它個數值: 10 如果我們改變這個變數的數值， 你就會看到小車來回地移動。 把它寫回10. . . 這個是用來設定車子的顏色， 然後畫兩個矩形當作車身， 看起來，這第一個矩形是下面的， 這個是上面的那個。 接著，車輪也是這樣做。 先設顏色，然後畫兩個橢圓形: 一個在 「 x＋25」的位置， 另一個在 「 x＋75」的位置。 然後！我們終於要來學點新東西了。 這個新東西叫做「函數定義」 後面你會學到。 目前，只要看著學， 然後記住它的樣子就可以了。 要注意的重點是 「畫」這個字， 還有這些大括號 「 { } 」。 這個是左括號（開始），這個是右括號（結束）。 這一整段我們叫它做 「 繪圖迴圈，或是 「動畫迴圈」。 而我們放進的這些大括號中的指令， 會被一遍又一遍地 快速地重複被執行。 這就是為什麼它被叫做 「迴圈」。 而這些大括號以外的所有的東西， 只有在程式開始時 被執行一次。 所以！製作動畫的第一步就是 把所有的圖形編碼放進這些大括號裡。 這樣你的圖案就會被一遍遍地畫出。 來做吧！我現在把所有的圖形編碼拉出來， 然後把它放到這個迴圈裡。 為了提醒我自己這組編碼 是在這組大括號裡， 我把它全部反白選起來後按 「tab」鍵， 把它們往內縮， 這樣我才記得這些程式碼在這些大括號裡。 你會發現所有的東西看起來都很像； 它們一點都沒變。 因為我們第一次跑這些圖形迴圈時， 電腦會告訴它自己說： 「喔！好！畫個新變數『x』， 把它設成10，畫兩個矩形， 畫兩個橢圓形...」 接著它會回到最開始， 然後再告訴自己說： 「畫個新變數『x』，把它設成10，畫兩個矩形，畫兩個橢圓形。」 然後「畫個新變數『x』，把它設成10，畫兩個矩...」 一模一樣！什麼都沒變。 啊...看起來沒有動畫啊！ 它就只是在舊的矩形跟橢圓形上 畫同樣的圖形。 記得我們說過，如果你要它看起來像動畫， 你必須在你上一次的圖上改一點點。 所以，如果我要我的小車往前走， 我得改變變數「x」的變數值，對吧?! 來把它改成...11 吧！ 啊！等等！這樣就只是每次都是在11跑了啊 那要怎樣才能讓電腦 在跑同一段程式碼時， 讓這個「x」不斷的變呢?! 好！來看這個奇技！ 記得這個「var x 」能變出一個新變數吧! 當我們把它像這樣放在圖形迴圈裏， 它會一次又一次地 生成一個叫做「x」的新變數。 我們要做的是把它放到圖形迴圈的外面。 這樣它就只會做一次。 接著，每次電腦跑程式碼時， 看到變數「x」， 它就會再使用上一次輸入的那個變數值 現在就來做吧！ 我現在把這個變數 放到這個圖形迴圈的外面。 現在開始，它就只會執行變數一次。 每次它跑到變數「x」時， 它就會再使用同個變數。 我們指定的上一個變數值是11， 那麼那就永遠是11。 好了！要變魔術了！ 在圖形迴圈的某處， 我們會改變「x」值， 比上一個多一點點。像這樣： x 等於舊的x 數值加上，比如說，「1」。 耶！成功了！ 是說... 看起來...滑溜溜的... 如果你想知道為什麼看起來會這樣， 那是因為我們忘了 在圖形迴圈裏畫上背景 所以它不斷地在畫這台車， 但是還是看的到新車底下疊著的舊車， 如果我把這行拉到圖形迴圈的最前面，像這樣， 然後按「重新啟動」， 才能再看到我的車... 耶！太讚了！ 如果我要讓車子跑地快一點， 只要改變每次增加 x 的數值就可以了。 如果讓它是10... 呼！ 跑出螢幕外了！ 我也可以讓它是負數。 如果 x －10 那麼... 回來了... 把它變回正值 又能跑了！ 所以要重點是： 這裏的這些東西叫做「圖形迴圈 」。 你要把畫圖程式碼放進這裡。 這樣它就會重複地畫。 然後把變數放在圖形迴圈外面。 把變數寫在迴圈外這件事超級重要。 這樣才能重複使用同一個變數。 在這個迴圈裡面， 我們得改這個變數一點點， 通常就是把它設成上一個數值， 再加上一個特定的數字－ 加或是減一個數字。 最後，在你的程式碼裏的某處使用這個變數， 這樣你的圖形每次看起來都會不一樣。 這樣 就完成了！！