使用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座標值的指令區塊,即可拼湊出底下的程式區塊:

下回待續…

延伸閱讀

2 thoughts on “使用App Inventor 2的Canvas(畫布)、ImageSprite(動畫精靈)與Clock(計時器)建立基本動畫

  1. 請問老師 後續該如何製作呢?
    為什麼我的圖片一開始就直接出現在螢幕中間
    又如何從螢幕右邊出去呢(不要停在畫面右邊邊界

    因為要做的是跑馬燈

    1. 如同上文提到的「App Inventor 2不允許程式將影像移出畫面之外,最多只能靠在螢幕邊緣」,如果圖像在螢幕中間,請將該圖的X座標設定成0。

      thanks,
      jeffrey

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *