WEBVTT

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

00:00:03.293 --> 00:00:05.071
但是基本原理都是一樣

00:00:05.071 --> 00:00:07.072
如果你拿一堆圖畫或圖片

00:00:07.072 --> 00:00:09.456
每張與下一張間只有一點不同

00:00:09.456 --> 00:00:11.392
然後快速地翻過

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

00:00:13.237 --> 00:00:14.370
古時候

00:00:14.370 --> 00:00:16.223
這些圖畫都是用手畫的

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

00:00:19.466 --> 00:00:21.907
幸運的我們，活在未來！

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

00:00:26.070 --> 00:00:27.568
現在我就教你怎麼做

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

00:00:31.592 --> 00:00:34.255
是的！這台小車是我自己設計的。
謝謝讚美！

00:00:34.687 --> 00:00:38.329
總之，在這你可以看到
我們設定了美麗的背景顏色，

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

00:00:42.121 --> 00:00:46.039
這裏，我們寫了一個新的變數「x」，
這是小車的位置

00:00:46.039 --> 00:00:47.307
給它個數值: 10

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

00:00:51.755 --> 00:00:53.131
把它寫回10. . .

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

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

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

00:00:59.963 --> 00:01:02.013
這個是上面的那個。

00:01:02.013 --> 00:01:05.027
接著，車輪也是這樣做。

00:01:05.027 --> 00:01:06.979
先設顏色，然後畫兩個橢圓形:

00:01:06.979 --> 00:01:08.648
一個在 「 x＋25」的位置，

00:01:08.648 --> 00:01:10.191
另一個在 「 x＋75」的位置。

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

00:01:12.678 --> 00:01:15.099
這個新東西叫做「函數定義」

00:01:15.099 --> 00:01:16.561
後面你會學到。

00:01:16.561 --> 00:01:19.576
目前，只要看著學，
然後記住它的樣子就可以了。

00:01:19.576 --> 00:01:24.132
要注意的重點是 「畫」這個字，
還有這些大括號 「 { } 」。

00:01:24.132 --> 00:01:26.740
這個是左括號（開始），這個是右括號（結束）。

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

00:01:30.210 --> 00:01:32.407
而我們放進的這些大括號中的指令，


00:01:32.407 --> 00:01:34.984
會被一遍又一遍地
快速地重複被執行。

00:01:34.984 --> 00:01:36.552
這就是為什麼它被叫做 「迴圈」。

00:01:36.552 --> 00:01:38.494
而這些大括號以外的所有的東西，

00:01:38.494 --> 00:01:41.476
只有在程式開始時
被執行一次。

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

00:01:45.479 --> 00:01:47.735
這樣你的圖案就會被一遍遍地畫出。

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

00:01:50.857 --> 00:01:54.261
然後把它放到這個迴圈裡。

00:01:54.261 --> 00:01:57.919
為了提醒我自己這組編碼
是在這組大括號裡，

00:01:57.919 --> 00:02:02.247
我把它全部反白選起來後按 「tab」鍵，
把它們往內縮，

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

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

00:02:08.730 --> 00:02:10.034
它們一點都沒變。

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

00:02:12.160 --> 00:02:13.346
電腦會告訴它自己說：

00:02:13.346 --> 00:02:16.513
「喔！好！畫個新變數『x』，
把它設成10，畫兩個矩形，

00:02:16.513 --> 00:02:17.560
畫兩個橢圓形...」

00:02:17.560 --> 00:02:19.517
接著它會回到最開始，
然後再告訴自己說：

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

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

00:02:26.676 --> 00:02:29.138
一模一樣！什麼都沒變。

00:02:29.138 --> 00:02:31.061
啊...看起來沒有動畫啊！

00:02:31.061 --> 00:02:34.660
它就只是在舊的矩形跟橢圓形上
畫同樣的圖形。

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

00:02:37.520 --> 00:02:40.150
你必須在你上一次的圖上改一點點。

00:02:40.150 --> 00:02:42.551
所以，如果我要我的小車往前走，

00:02:42.551 --> 00:02:45.041
我得改變變數「x」的變數值，對吧?!

00:02:45.041 --> 00:02:47.712
來把它改成...11 吧！

00:02:47.712 --> 00:02:51.117
啊！等等！這樣就只是每次都是在11跑了啊

00:02:51.117 --> 00:02:53.800
那要怎樣才能讓電腦
在跑同一段程式碼時，

00:02:53.800 --> 00:02:57.023
讓這個「x」不斷的變呢?!

00:02:57.023 --> 00:02:59.487
好！來看這個奇技！

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

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

00:03:04.748 --> 00:03:07.737
它會一次又一次地
生成一個叫做「x」的新變數。

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

00:03:10.764 --> 00:03:13.261
這樣它就只會做一次。

00:03:13.261 --> 00:03:17.492
接著，每次電腦跑程式碼時，
看到變數「x」，

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

00:03:22.483 --> 00:03:25.079
現在就來做吧！
我現在把這個變數

00:03:25.079 --> 00:03:27.333
放到這個圖形迴圈的外面。

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

00:03:31.077 --> 00:03:33.483
每次它跑到變數「x」時，

00:03:33.483 --> 00:03:35.399
它就會再使用同個變數。

00:03:35.399 --> 00:03:38.117
我們指定的上一個變數值是11，

00:03:38.117 --> 00:03:39.492
那麼那就永遠是11。

00:03:39.492 --> 00:03:41.487
好了！要變魔術了！

00:03:41.487 --> 00:03:44.385
在圖形迴圈的某處，
我們會改變「x」值，

00:03:44.385 --> 00:03:46.717
比上一個多一點點。像這樣：

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

00:03:52.589 --> 00:03:54.111
耶！成功了！

00:03:54.761 --> 00:03:56.893
是說... 看起來...滑溜溜的...

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

00:03:59.157 --> 00:04:02.381
那是因為我們忘了
在圖形迴圈裏畫上背景

00:04:02.381 --> 00:04:04.447
所以它不斷地在畫這台車，

00:04:04.447 --> 00:04:07.073
但是還是看的到新車底下疊著的舊車，

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

00:04:12.040 --> 00:04:15.704
然後按「重新啟動」，
才能再看到我的車...

00:04:15.984 --> 00:04:17.739
耶！太讚了！

00:04:18.029 --> 00:04:19.850
如果我要讓車子跑地快一點，

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

00:04:22.521 --> 00:04:24.834
如果讓它是10... 呼！
跑出螢幕外了！

00:04:24.834 --> 00:04:28.497
我也可以讓它是負數。
如果 x －10 那麼...

00:04:28.497 --> 00:04:29.778
回來了...

00:04:30.018 --> 00:04:32.195
把它變回正值

00:04:33.425 --> 00:04:34.542
又能跑了！

00:04:34.542 --> 00:04:36.550
所以要重點是：

00:04:36.550 --> 00:04:39.217
這裏的這些東西叫做「圖形迴圈 」。

00:04:39.217 --> 00:04:41.331
你要把畫圖程式碼放進這裡。

00:04:41.331 --> 00:04:43.487
這樣它就會重複地畫。

00:04:43.487 --> 00:04:46.292
然後把變數放在圖形迴圈外面。

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

00:04:49.329 --> 00:04:51.496
這樣才能重複使用同一個變數。

00:04:51.496 --> 00:04:53.469
在這個迴圈裡面，

00:04:53.469 --> 00:04:55.892
我們得改這個變數一點點，

00:04:55.892 --> 00:04:58.242
通常就是把它設成上一個數值，

00:04:58.242 --> 00:05:01.492
再加上一個特定的數字－
加或是減一個數字。

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

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

00:05:07.740 --> 00:05:10.051
這樣
就完成了！！