繪圖動畫元件

使用者界面+界面布局  多媒體(Media) 繪圖動畫(Drawing and Animation):(一)畫布、(二)圖片精靈、(三)球形精靈 感測器&通訊連接其他元件雲端應用
2016/01/22 謝碧景(c)編製更新 

 學習目標 MIT App Inventor

  • 學會Drawing and Animation(繪圖動畫)類別中【Canvas(畫布)】元件之設計與應用。
  • 學會ImageSprite(圖片精靈)】元件之設計與應用。
  • 學會Ball(球形精靈)】元件之設計與應用。

一、Canvas 畫布元件

  • Canvas(畫布)元件位於左側元件面板(Palette)之『繪圖動畫(Drawing and Animation)』類別中,畫布如一張白紙可在畫布上繪製點、直線、實心圓、文字等圖形,亦可將畫布的圖形存檔
  • App Inventor 2 設計含有動畫或遊戲的程式,需使用Canvas(畫布)配合ImageSprite(圖片精靈)和Ball(球形精靈)元件,且畫布上只允許布置繪圖動畫類別之圖片精靈和球形精靈元件。
  • Canvas(畫布)座標是以畫布左上角(0,0)為基準點,向右為正,向下為正的相對座標。
  • 常用方法如下:
 屬性  說明   屬性  說明   屬性  說明
 背景顏色  設定背景顏色。  線寬  設定繪筆之粗細。  字元尺寸  繪製文字的字型大小。
 背景圖片  設定背景圖片。  畫筆顏色  設定繪筆的顏色。    

*註:參閱內建指令說明:Drawing and Animation(繪圖動畫)Canvas(畫布)《摘自: AppInventor中文學習網指令中文化

二、ImageSprite 圖片精靈

  • ImageSprite(圖片精靈)及Ball(球形精靈)元件位於左側元件面板(Palette)之『Drawing and Animation(繪圖動畫)』類別中。
  • ImageSprite(圖片精靈)碰撞到Canvas(畫布)的邊界時,會觸發『到達邊界』事件,並使用『反彈』方法將ImageSprite(圖片精靈)反彈。
  • ImageSprite(圖片精靈)Ball(球形精靈)是為動畫及遊戲而設計的元件,必須配合Canvas(畫布)元件;兩者幾乎擁有相同的屬性、方法和事件,差別在ImageSprite(圖片精靈)可以外部圖片設定為『背景圖,且有『旋轉屬性;而Ball(球形精靈)只能以半徑設定其大小,以畫筆顏色設定單一顏色背景。
  • ImageSprite(圖片精靈或 Ball(球形精靈)元件常用的屬性:
 屬性  說明 
 圖片 設定圖片精靈】的背景圖。球形精靈】無此屬性。
 旋轉 設定圖片精靈】是否依移動方向旋轉。球形精靈】無此屬性。
 半徑 設定球形精靈】的半徑。圖片精靈】無此屬性。
 方向 設定圖片精靈】球形精靈】的移動方向:→0度、↑90度、←180度、↓270度。 
 速度 設定圖片精靈】球形精靈】每次移動的速度 
 間隔 設定圖片精靈】球形精靈】多久移動一次。
 X座標 設定圖片精靈】球形精靈】相對於畫布的的X座標。
 Y座標  設定圖片精靈】球形精靈】相對於畫布的的Y座標。
 Z座標 設定圖片精靈】球形精靈】的層次。 
  • ImageSprite(圖片精靈或 Ball(球形精靈)元件常用的方法:
 方法   說明
 反彈(邊緣數值) 圖片精靈】球形精靈】元件從邊緣依邊緣數值的方向反彈。 
 碰撞檢測(其他精靈) 檢查圖片精靈】球形精靈】元件是否與其他精靈(代表另一個元件)發生碰撞, 
 移動到邊界()  圖片精靈】球形精靈】元件超出邊緣時,將它移回邊界內。 
 移動到指定位置(X,Y) 圖片精靈】球形精靈】元件移動到(X座標,Y座標)位置。

 到達邊界(edge即方位):

*註:參閱內建指令說明繪圖動畫(Drawing and Animation)ImageSprite(圖片精靈)元件Ball(球形精靈)元件《摘自: AppInventor中文學習網指令中文化  

homework 練習11:在畫布中央放置一個球,被按下,球會以任意方向發出,球若碰到畫布邊緣則反彈,球若碰到畫布下邊界則會發出音效聲( Pop.wavball.png)。【重點:學會Drawing and Animation(繪圖動畫)類別中元件的設計與應用。】(檔名:Ball.aia)

(一) 外觀編排(Designer)頁面:即版面配置頁面,如下圖。

使用元件及其屬性設定:

(二) 程式設計(Blocks)頁面

  • 語系→繁體中文:

  • 語系→English: