
App Inventor 2 使用計時器做出卡通動畫特效
今天要來介紹,如何利用 Inventor 的計時器元件,快速變換圖片元件的圖片,以此達到卡通動畫的視覺特效。
首先,準備一張 gif 圖檔,也可直接使用下面這張。

開啟下面網站,將圖檔轉成 jpg。
GIF to JPG – online-convert.com

點選 Choose Files 選擇 gif 圖檔,等上傳完後直接按 Start conversion。
轉檔好後按 Download selected files as ZIP 下載壓縮檔,下載完後解壓縮。

解壓縮後會有 65 張圖檔,請一張一張上傳到 Inventor。(如果嫌麻煩,可以直接下載我最後提供的 aia 檔案)

上傳完後,拖拉需要的元件 –> 按鈕、圖片和計時器。

計時器的啟用計時先關閉,計時間隔設定為 86 毫秒。(預設 1000 是 1 秒)

接著切換到程式設計,拖拉三個方塊如下:

最後拖拉當計時器計時的方塊如下:

因為計時間隔設為 86,所以每 86 毫秒就會執行一次這塊程式。
每執行一次,圖片的內容就要變更,因為圖檔的編號從 0 開始,所以一開始的變數設為 0,而且每執行一次,變數就要加 1,這樣圖片內容才會變換。
當然,最後還要判斷,如果變數值大於圖檔的編號 64,我們就要把它設回 0,重新開始。
至此,App 已撰寫完畢,這只是計時器很基本的應用,下次有機會再來介紹其它有趣的功能。
App 完整程式拼圖:

aia 檔案下載
App 執行範例:
如果覺得文章內容還不錯的話,麻煩請幫我點個讚!感謝
可以多點幾次喔~~
第一次點讚需使用 Google 或 Facebook 帳號註冊

