![App Inventor 2 使用計時器做出卡通動畫特效 App Inventor 2 使用計時器做出卡通動畫特效](https://i0.wp.com/i.imgur.com/X7QGVpw.png?resize=1024%2C538&ssl=1)
App Inventor 2 使用計時器做出卡通動畫特效
今天要來介紹,如何利用 Inventor 的計時器元件,快速變換圖片元件的圖片,以此達到卡通動畫的視覺特效。
首先,準備一張 gif 圖檔,也可直接使用下面這張。
![](https://i0.wp.com/jbprogramnotes.com/wp-content/uploads/2021/09/灌籃高手.gif?resize=396%2C298&ssl=1)
開啟下面網站,將圖檔轉成 jpg。
GIF to JPG – online-convert.com
![](https://i0.wp.com/i.imgur.com/zlT4ihm.png?w=960&ssl=1)
點選 Choose Files 選擇 gif 圖檔,等上傳完後直接按 Start conversion。
轉檔好後按 Download selected files as ZIP 下載壓縮檔,下載完後解壓縮。
![](https://i0.wp.com/i.imgur.com/Nvcme2Z.png?w=960&ssl=1)
解壓縮後會有 65 張圖檔,請一張一張上傳到 Inventor。(如果嫌麻煩,可以直接下載我最後提供的 aia 檔案)
![](https://i0.wp.com/i.imgur.com/P3D6Y1e.png?w=960&ssl=1)
上傳完後,拖拉需要的元件 –> 按鈕、圖片和計時器。
![](https://i0.wp.com/i.imgur.com/ngKffew.png?w=960&ssl=1)
計時器的啟用計時先關閉,計時間隔設定為 86 毫秒。(預設 1000 是 1 秒)
![](https://i0.wp.com/i.imgur.com/dsS63ML.png?w=960&ssl=1)
接著切換到程式設計,拖拉三個方塊如下:
![](https://i0.wp.com/i.imgur.com/swG75i1.png?w=960&ssl=1)
最後拖拉當計時器計時的方塊如下:
![](https://i0.wp.com/i.imgur.com/n6GrbS8.png?w=960&ssl=1)
因為計時間隔設為 86,所以每 86 毫秒就會執行一次這塊程式。
每執行一次,圖片的內容就要變更,因為圖檔的編號從 0 開始,所以一開始的變數設為 0,而且每執行一次,變數就要加 1,這樣圖片內容才會變換。
當然,最後還要判斷,如果變數值大於圖檔的編號 64,我們就要把它設回 0,重新開始。
至此,App 已撰寫完畢,這只是計時器很基本的應用,下次有機會再來介紹其它有趣的功能。
App 完整程式拼圖:
![](https://i0.wp.com/i.imgur.com/eQEtJX9.png?w=960&ssl=1)
aia 檔案下載
App 執行範例:
如果覺得文章內容還不錯的話,麻煩請幫我點個讚!感謝
可以多點幾次喔~~
第一次點讚需使用 Google 或 Facebook 帳號註冊
![突破 App Inventor 30 MB 限制 突破 App Inventor 30 MB 限制](https://i0.wp.com/i.imgur.com/VAOZz1U.png?resize=75%2C75&ssl=1)
![網頁出現亂碼的解決方法 網頁出現亂碼的解決方法](https://i0.wp.com/i.imgur.com/0i63G4B.png?resize=75%2C75&ssl=1)