要畫出類似動畫的方法有很多種
但是基本原理都是一樣
如果你拿一堆圖畫或圖片
每張與下一張間只有一點不同
然後快速地翻過
圖片看起來就像在動的樣子
古時候
這些圖畫都是用手畫的
畫很久也只能做出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 那麼...
回來了...
把它變回正值
又能跑了!
所以要重點是:
這裏的這些東西叫做「圖形迴圈 」。
你要把畫圖程式碼放進這裡。
這樣它就會重複地畫。
然後把變數放在圖形迴圈外面。
把變數寫在迴圈外這件事超級重要。
這樣才能重複使用同一個變數。
在這個迴圈裡面,
我們得改這個變數一點點,
通常就是把它設成上一個數值,
再加上一個特定的數字-
加或是減一個數字。
最後,在你的程式碼裏的某處使用這個變數,
這樣你的圖形每次看起來都會不一樣。
這樣
就完成了!!