使用App Inventor 2的Canvas（畫布）、ImageSprite（動畫精靈）與Clock（計時器）建立基本動畫

本文將運用App Inventor 2的按鈕事件與動畫程式，完成像下圖的Android App：

一開始，畫面空無一物，若用戶按著螢幕不放，小豬將從螢幕左邊之外移動到中間，然後變成怒氣沖天的表情，螢幕上方顯示「不要碰我！！」的字樣。

當使用者將手指從螢幕上移開時，「不要碰我！！」將會消失，而小豬也將恢復成一般表情，並朝左邊移動，消失在畫面之外。

然而，App Inventor 2不允許程式將影像移出畫面之外，最多只能靠在螢幕邊緣。因此實際的程式改成：小豬站在畫面左邊，當使用者按著螢幕不放時，小豬往右移動並切換表情…

本文將示範透過Canvas（畫布）、ImageSprite（影像精靈）和Clock（計時器）組件，建立一個基本的程式動畫效果。 請按此下載本文範例所需的圖像資源和完成檔。

編輯簡易動畫App的版面

下圖是本單元完成的版面，動態影像必須放置在畫布（Canvas）裡面，動態影像指的是ImageSprite組件。小豬的水平（X軸）座標原本是0，下文的程式將讓它逐漸移動到水平軸80像素的位置。

編輯此動畫App版面的步驟如下，請先登入App Inventor，並建立新的專案，再依照下列步驟操作：

1. 請上傳piggy.png圖檔。

2. 把Canvas（畫布）拖入Screen畫面。

3. 調整Canvas的寬高設定，寬（Width）設成“Fill parent（充滿）”、高（Height）設成410像素。

4. 把ImageSprite（影像精靈，動態影像）拖入Canvas（畫布）。

5. 將ImageSprite1重新命名成“piggy”，圖像來源設成“piggy.png”、X和Y軸座標設成 (0, 150)：

設置Clock（計時器）組件

動畫構成的基本原理，是讓「畫布」裡的動態影像物件隨著時間的推移（如：每隔1/10秒），改變影像自身的座標或者外觀，也就是更新畫面，達成動態的效果。

App Inventor提供的Clock（計時器），可以設定一個時間間隔，並定時發出「時間到」的訊息，以便觸發需要定時執行的程式（如：更新畫面）。

請將Clock組件拖入手機畫面，它會被自動放在“Non-visible components”（非可視組件）區：

將Clock1組件重新命名成“timer”，並將“TimerInterval”（定時器間隔時間）改成100（毫秒），令它每0.1秒觸發一次 。

設定動畫程式

切換到程式編輯模式，按一下timer組件，從中選擇Timer事件觸發程式區塊：

從Control（控制）分類中，拖出if…then控制區塊，您也可以先按一下程式設置區的空白處，再敲入”if”關鍵字（註：如果App Inventor開發環境是「繁體中文」語系，請輸入「如果」），畫面將出現指令選單：

再透過滑鼠或者方向鍵，選擇表列中的“if”，雙按滑鼠左鍵或者按下Enter鍵，也能置入if…then條件區塊：

將if…then區塊併入Timer事件區塊，然後按一下空白處，鍵入“<”：

選擇表列中的“<”，即可置入「小於」條件區塊：

再按一下空白處，鍵入“80”：

選擇表列中的“80”（註：如果沒有出現指令清單，請在80後面，按「下」方向鍵），即可置入數字80，請將它拖入「小於」區塊：

最後，從“piggy”組件選擇讀取與設定X座標值的指令區塊，即可拼湊出底下的程式區塊：

下回待續…

延伸閱讀

• App Inventor 2的Android模擬器安裝與操作說明
• 使用App Inventor 2製作的機器昆蟲藍牙控制器之小小改版