1、AppInventor動(dòng)畫-wuhuth目標(biāo)主要介紹畫布（Canvas）和精靈（ImageSprite）的使用方法，以及一些高級(jí)的動(dòng)畫功能，如邊緣檢測(cè)、碰撞處理和精靈操縱等。 掌握畫布的使用方法 理解畫布的坐標(biāo)系統(tǒng) 掌握精靈的使用方法 掌握球（Ball）的使用方法 了解邊緣檢測(cè)和碰撞處理的原理畫布 畫布是一種可在其上繪制圖像的控件，初始的畫布像一張空白幻燈片，沒有任何內(nèi)容，用戶可以在畫布上繪制各種圖形，也可以在畫布上加載圖片作為畫布的背景，或是在畫布上顯示文字。畫布是常用的控件，除了作為繪制圖形的承載體以外，還經(jīng)常作為游戲的背景畫面。 畫布是一個(gè)具有觸控感應(yīng)的二維平面圖板，采用經(jīng)典的二維坐標(biāo)系

2、，原點(diǎn)在畫布的左上角。使用坐標(biāo)點(diǎn)(X,Y)說明畫布的坐標(biāo)系，X表示坐標(biāo)點(diǎn)距離左側(cè)邊緣的距離，Y表示坐標(biāo)點(diǎn)距離上邊緣的距離，且X和Y都取正值。畫布在基本控件庫中可以找到畫布（Canvas），將畫布拖拽到界面設(shè)計(jì)區(qū)后，畫布僅僅顯示為一個(gè)小圖標(biāo)，如下圖所示。畫布畫布屬性屬性說明BackgroundColor背景顏色BackgroundImage背景圖片F(xiàn)ondSize字體大小Linewidth畫筆寬度PaintColor畫筆顏色TextAlignment文字排列方式Visible畫布控件是否可見Width畫布寬度Height畫布高度畫布事件事件說明Dragged拖拽事件Flung快速劃動(dòng)事件Touc

3、hDown觸碰按下事件TouchUp觸碰抬起事件Touched觸碰事件，由觸碰按下動(dòng)作和觸碰抬起動(dòng)作組成畫布事件手指從A點(diǎn)按下，緩慢劃線，從B點(diǎn)滑動(dòng)到C點(diǎn)，然后抬起手指的過程。 手指接觸到A點(diǎn)時(shí)產(chǎn)生TouchDown事件；手指從A到B再到C的移動(dòng)過程中，將多次產(chǎn)生Dragged事件；在手指離開C點(diǎn)時(shí)，產(chǎn)生TouchUp事件。TouchDown和TouchUp事件只在手指觸碰到屏幕和離開屏幕時(shí)產(chǎn)生。如果手指的觸碰點(diǎn)和抬起點(diǎn)是同一點(diǎn)，將引發(fā)Touched事件；如果手指在屏幕上移動(dòng)了，則不會(huì)引發(fā)Touched事件。畫布的Dragged事件 Dragged事件在手指移動(dòng)過程事件在手指移動(dòng)過程中持續(xù)產(chǎn)生

4、，主要用來跟蹤手指中持續(xù)產(chǎn)生，主要用來跟蹤手指的移動(dòng)軌跡。該事件提供三個(gè)坐的移動(dòng)軌跡。該事件提供三個(gè)坐標(biāo)，分別是移動(dòng)開始坐標(biāo)點(diǎn)標(biāo)，分別是移動(dòng)開始坐標(biāo)點(diǎn)（StartX和和StartY）、事件產(chǎn)生）、事件產(chǎn)生時(shí)的當(dāng)前坐標(biāo)點(diǎn)（時(shí)的當(dāng)前坐標(biāo)點(diǎn)（CurrentX和和CurrentY）、前一個(gè)事件產(chǎn)生時(shí)）、前一個(gè)事件產(chǎn)生時(shí)的坐標(biāo)點(diǎn)（的坐標(biāo)點(diǎn)（PrevX和和PrevY） 以右圖場景為例，如果從以右圖場景為例，如果從A點(diǎn)到點(diǎn)到C的過程中，只在的過程中，只在B點(diǎn)和點(diǎn)和C點(diǎn)產(chǎn)生了點(diǎn)產(chǎn)生了Dragged事件，則在事件，則在C點(diǎn)產(chǎn)生的點(diǎn)產(chǎn)生的事件中，移動(dòng)開始節(jié)點(diǎn)是事件中，移動(dòng)開始節(jié)點(diǎn)是A，當(dāng)，當(dāng)前節(jié)點(diǎn)是前節(jié)點(diǎn)是C，前

5、一個(gè)事件產(chǎn)生是，前一個(gè)事件產(chǎn)生是在在B點(diǎn)。點(diǎn)。畫布的Flung事件畫布的Flung事件只有手指在屏幕上快速劃動(dòng)的時(shí)候才會(huì)產(chǎn)生。以右圖場景為例，在從A經(jīng)過B到C的過程中，如果手指在屏幕上移動(dòng)的足夠快，則當(dāng)手指在C點(diǎn)抬起時(shí)，會(huì)產(chǎn)生Flung事件。Flung事件中會(huì)提供劃動(dòng)開始節(jié)點(diǎn)的坐標(biāo)、劃動(dòng)方向、速度、速度在X軸和Y軸的分量。畫布的Flung事件畫布的事件示例CanvasEvent示例CanvasEvent示例CanvasEvent CanvasEvent示例說明畫布的事件響應(yīng)的時(shí)機(jī)和提供的數(shù)據(jù)。上圖分別是在界面編輯器中的界面和手機(jī)運(yùn)行時(shí)的界面。CanvasEvent示例中上方是畫布控件，下方是各

6、種事件數(shù)據(jù)的顯示區(qū)域。在上方的畫布上進(jìn)行觸碰操作或滑動(dòng)操作，事件的響應(yīng)結(jié)果便會(huì)顯示在界面下部。示例CanvasEvent邏輯控制模TouchDown事件處理函數(shù)邏輯模塊TouchUp事件處理函數(shù)邏輯模塊Touched事件處理函數(shù)邏輯模塊畫布方法方法方法說明說明Clear清除畫布清除畫布DrawCircle繪制圓形圖形繪制圓形圖形DrawLine繪制線條繪制線條DrawPoint繪制圓點(diǎn)繪制圓點(diǎn)DrawText繪制文字繪制文字DrawTextAtAngle以一定角度繪制文字以一定角度繪制文字GetBackgroundPixelColor獲取背景圖片指定像素的顏色獲取背景圖片指定像素的顏色GetP

7、ixelColor獲取圖片指定像素的顏色獲取圖片指定像素的顏色Save畫布保存畫布保存SaveAs畫布另存為畫布另存為SetBackgroundPixelColor設(shè)置背景圖片特定像素的顏色設(shè)置背景圖片特定像素的顏色畫布方法 畫布所支持的方法，除了Clear和Save方法之外都需要用戶提供坐標(biāo)作為基本參數(shù)，如DrawPoint和GetPixelColor。下圖給出了畫布所有方法中需要用戶提供的參數(shù)。畫布方法相機(jī) 相機(jī)控件是一個(gè)非可視化控件，可利用手機(jī)的鏡頭進(jìn)行拍照。相機(jī)控件在媒體控件區(qū)（Media）可以找到。相機(jī)控件只支持一種方法TakePicture，此方法被調(diào)用時(shí)，手機(jī)將進(jìn)行拍照。該方法結(jié)

8、束后會(huì)引發(fā)AfterPictures事件。相機(jī) AfterPicture事件在拍照完成后被產(chǎn)生，其中image是手機(jī)中用來存放拍攝照片的路徑信息。相機(jī)加速傳感器控件加速傳感器控件用來檢測(cè)手機(jī)加速度大小，可在三個(gè)方向測(cè)量手機(jī)晃動(dòng)時(shí)的加速度，測(cè)量單位為米/秒2(m/s2)。加速傳感器控件在傳感器控件區(qū)（Sensors）可以找到。加速傳感器控件加速傳感器控件支持X加速度、Y加速度、Z加速度，每個(gè)加速度數(shù)值都有正值和負(fù)值。其中，設(shè)備左側(cè)抬高時(shí),X加速度數(shù)值為正，右側(cè)抬高時(shí)，X加速度數(shù)值為負(fù)。手機(jī)處于水平位置，下部抬起時(shí)Y加速度為正，上部抬起時(shí)Y加速度為負(fù)。手機(jī)處于水平位置，屏幕朝上時(shí)Z加速度為正，朝下

9、時(shí)Z加速度為負(fù)。此外，手機(jī)屏幕朝上且水平放置時(shí)，Z加速度約為9.8m/s2。加速傳感器控件屬性屬性說明說明Available手機(jī)是否具有加速感應(yīng)器件手機(jī)是否具有加速感應(yīng)器件Enabled加速感應(yīng)器控件是否可用加速感應(yīng)器控件是否可用XAccel水平加速度水平加速度YAccel垂直加速度垂直加速度ZAccel豎直方向豎直方向MinimumInterval手機(jī)晃動(dòng)的最小間隔手機(jī)晃動(dòng)的最小間隔加速傳感器控件 加速傳感器控件支持的事件有AccelerationChanged和Shaking。AccelerationChanged事件在加速傳感器的加速度改變時(shí)調(diào)用，并根據(jù)加速傳感器的變化返回X、Y、Z加速

10、度值，可以在三個(gè)方向上確定手機(jī)晃動(dòng)時(shí)的加速度大小。Shaking事件在手機(jī)搖晃時(shí)會(huì)被多次調(diào)用。加速傳感器控件方向傳感器 方向傳感器控件(OrientationSensor)是一個(gè)非可視化控件，可用來測(cè)定手機(jī)的三軸角度的變化。界面編輯器中的方向傳感器控件如下圖所示。方向傳感器 將手機(jī)正面向上的放置在水平桌面上，沿手機(jī)屏幕水平方向（左右）定義為x軸，水平方向（后前）定義為y軸，垂直于手機(jī)屏幕的方向（上下）定義為z軸。 方向傳感器可以反饋三個(gè)數(shù)據(jù)Roll、Pitch和Azimuth。方向傳感器的數(shù)據(jù)單位是度，且有正負(fù)之分。 方向傳感器 Roll表示手機(jī)x軸與水平面的夾角，范圍從-90到90。手機(jī)處于

11、水平放置時(shí)數(shù)值為0，向左側(cè)傾斜時(shí)數(shù)值由0遞增到90，向右傾斜時(shí)數(shù)值由0遞減至-90。 Pitch表示手機(jī)y軸與水平面的夾角，范圍從-90到90。手機(jī)水平放置時(shí)為0，y軸正方向朝下傾斜時(shí)數(shù)值由0增加到90，y軸正方向朝上傾斜時(shí)數(shù)值由0遞減至-90。 Azimuth表示方位，手機(jī)水平放置時(shí)磁北極和y軸的夾角，范圍從0到360。y軸正方向指向正北時(shí)為0，指向正東為90，指向正南為180，指向西東為270。方向傳感器方向傳感器 補(bǔ)充說明:圖中的坐標(biāo)軸x,y,z和傳感器中的X,Y,Z沒有任何聯(lián)系! 如上圖所示，綠色部分表示一個(gè)手機(jī)，帶有小圈那一頭是手機(jī)頭部 傳感器中的X:如上圖所示，規(guī)定X正半軸為北，手

12、機(jī)頭部指向OF方向，此時(shí)X的值為0,如果手機(jī)頭部指向OG方向，此時(shí)X值為90,指向OH方向，X值為180,指向OE，X值為270方向傳感器 傳感器中的Y：現(xiàn)在我們將手機(jī)沿著BC軸慢慢向上抬起，即手機(jī)頭部不動(dòng)，尾部慢慢向上翹起來，直到AD跑到BC右邊并落在XOY平面上，Y的值將從0180之間變動(dòng)，如果手機(jī)沿著AD軸慢慢向上抬起，即手機(jī)尾部不懂，直到BC跑到AD左邊并且落在XOY平面上，Y的值將從0-180之間變動(dòng)，這就是方向傳感器中Y的含義。 傳感器中的Z:現(xiàn)在我們將手機(jī)沿著AB軸慢慢向上抬起，即手機(jī)左邊框不動(dòng)，右邊框慢慢向上翹起來，直到CD跑到AB右邊并落在XOY平面上，Z的值將從0180之間

13、變動(dòng)，如果手機(jī)沿著CD軸慢慢向上抬起，即手機(jī)右邊框不動(dòng)，直到AB跑到CD左邊并且落在XOY平面上，Z的值將從0-180之間變動(dòng)，這就是方向傳感器中發(fā)Z的含義方向傳感器屬性屬性說明說明Available方向傳感器是否可用方向傳感器是否可用Enabled啟用方向傳感器啟用方向傳感器Azimuth方位角方位角Pitch垂直翻轉(zhuǎn)角度垂直翻轉(zhuǎn)角度Roll水平轉(zhuǎn)動(dòng)角度水平轉(zhuǎn)動(dòng)角度Magnitude傾斜程度傾斜程度Angle傾斜角傾斜角方向傳感器 Magnitude，表示手機(jī)傾斜程度，是一個(gè)介于0和1之間的數(shù)。 Angle，表示傾斜角大小。方向傳感器 方向傳感器只有一個(gè)事件OrientationChange

14、d，在手機(jī)方向發(fā)生變化時(shí)產(chǎn)生，返回Roll、Pitch和Azimuth數(shù)據(jù)。即使靜止的放置在水平面上，手機(jī)方向傳感器仍然能夠檢測(cè)到微小的方向變化，所以可以認(rèn)為OrientationChanged事件是持續(xù)發(fā)生的事件，事件中的處理過程務(wù)必要簡單、高效。方向傳感器應(yīng)用示例方向傳感器應(yīng)用示例方向傳感器應(yīng)用示例圖像精靈 將精靈放置在畫布上，精靈就接受觸摸或拖動(dòng)操作，如果設(shè)置精靈自身關(guān)于運(yùn)動(dòng)的一些屬性，精靈則可以按照預(yù)定的方式移動(dòng)。 為實(shí)現(xiàn)一個(gè)圖片精靈每隔1000毫秒向左側(cè)移動(dòng)10個(gè)像素，則需設(shè)置其速度(Speed)屬性值為10像素，時(shí)間間隔(Interval)屬性為1000毫秒，方向（Heading）

15、屬性設(shè)置為180度，激活（Enabled）屬性設(shè)置為True。精靈的旋轉(zhuǎn)屬性（Rotates）設(shè)置為True時(shí)，圖片會(huì)根據(jù)精靈的朝向變化進(jìn)行轉(zhuǎn)動(dòng)，設(shè)置好的參數(shù)如圖。圖像精靈圖像精靈屬性屬性說明說明Picture精靈圖片精靈圖片Enabled是否激活是否激活I(lǐng)nterval移動(dòng)頻率移動(dòng)頻率Rotates是否允許精靈旋轉(zhuǎn)是否允許精靈旋轉(zhuǎn)Heading移動(dòng)方向移動(dòng)方向Speed移動(dòng)速度移動(dòng)速度X所在位置橫坐標(biāo)所在位置橫坐標(biāo)Y所在位置縱坐標(biāo)所在位置縱坐標(biāo)Width圖片寬度圖片寬度Height圖片高度圖片高度Visible是否可見是否可見圖像精靈X和Y是圖像精靈在畫布上的坐標(biāo)，X為0時(shí)，表示圖像精靈已經(jīng)

16、到達(dá)畫布的左側(cè)邊界；Y為0時(shí)，則表示圖片精靈已經(jīng)到達(dá)畫布的上邊界。Enabled屬性表示圖像精靈是否會(huì)被激活，如果精靈與移動(dòng)相關(guān)的屬性被設(shè)置，同時(shí)Enabled為true，則圖像精靈會(huì)在畫布上移動(dòng)。Visible屬性決定了圖像精靈在畫布上是否可見。屬性Heading是圖像精靈的移動(dòng)方向，取值范圍是0到360，其中，0表示水平向右，90代表垂直向上，180代表水平向左，270表示垂直向下。圖像精靈事件說明CollidedWith碰撞事件EdgeReached觸壁事件NoLongerCollidingWith不再碰撞事件Touched觸摸事件Dragged拖拽事件Flung快速劃動(dòng)事件TouchU

17、p觸碰抬起事件TouchDown觸碰按下事件圖像精靈圖像精靈 精靈控件的方法實(shí)現(xiàn)了精靈的移動(dòng)、反彈和碰撞檢測(cè)動(dòng)作。方法說明Bounce精靈從邊緣反彈ColldingWith檢測(cè)精靈是否碰撞MoveIntoBounds精靈超出邊界時(shí)將精靈移至邊界內(nèi)MoveTo將精靈移動(dòng)到指定坐標(biāo)點(diǎn)PointTowards將移動(dòng)方向朝向另一個(gè)精靈PointInDirection將移動(dòng)方向朝向指定坐標(biāo)點(diǎn) ColldingWith方法用來檢測(cè)圖像精靈是否發(fā)生碰撞，返回值為true時(shí)，說明與指定精靈或畫布邊緣發(fā)生碰撞；返回值為false時(shí)，則未發(fā)生碰撞。 MoveIntoBounds方法是將超出邊緣的控件，重新移動(dòng)至畫

18、布邊緣范圍內(nèi)。圖像精靈碰撞檢測(cè) 碰撞檢測(cè)是在精靈的運(yùn)動(dòng)過程中，檢測(cè)到精靈自身邊緣與其他精靈或畫布邊緣接觸的技術(shù)，在開發(fā)游戲過程中經(jīng)常會(huì)被使用到。 一般情況下，只有游戲中的物體發(fā)生移動(dòng)后才有必要進(jìn)行碰撞檢測(cè)，所以碰撞檢測(cè)的流程分為三步：更新物體位置 進(jìn)行碰撞檢測(cè) 碰撞處理。 碰撞檢測(cè) 實(shí)現(xiàn)碰撞檢測(cè)通常包括三個(gè)方面的內(nèi)容。 首先，確定檢測(cè)對(duì)象。游戲在運(yùn)行中會(huì)有很多實(shí)體對(duì)象，在進(jìn)行碰撞檢測(cè)時(shí)并不需要對(duì)所有的實(shí)體對(duì)象都檢測(cè)一遍，如靜止的寶箱沒有必要去檢測(cè)和另外的寶箱是否發(fā)生了碰撞。所以在開始碰撞檢測(cè)之前，首先要確定碰撞檢測(cè)的對(duì)象是什么。 其次，檢測(cè)是否碰撞，這是檢測(cè)的核心環(huán)節(jié)。在這個(gè)環(huán)節(jié)需要綜合考慮游

19、戲本身的需求，以及運(yùn)行平臺(tái)的性能等問題，合理的選擇碰撞檢測(cè)的算法。 最后是處理碰撞。當(dāng)檢測(cè)到碰撞發(fā)生的時(shí)候，就需要根據(jù)碰撞的類型進(jìn)行相應(yīng)的處理，例如炮彈會(huì)在碰到目標(biāo)后爆炸并給目標(biāo)帶來傷害。球體 球體(Ball)是特殊的圖像精靈，具有與圖像精靈相似的屬性，完全相同的事件和方法。不同之處在于球體不能夠有自定義的外觀，但可以改變球的大小和顏色。球體屬性屬性說明說明Radius球的半徑球的半徑PaintColor球體顏色球體顏色Enabled是否啟動(dòng)球體是否啟動(dòng)球體Interval球體移動(dòng)頻率球體移動(dòng)頻率Visible球體是否可見球體是否可見Heading球體移動(dòng)方向球體移動(dòng)方向Speed球體移動(dòng)速度球體移動(dòng)速度球體 球體與圖像精靈具有相同的事件和方法，下面的內(nèi)容主要介紹與碰撞檢測(cè)相關(guān)的事件和方法。球體中與碰撞檢測(cè)相關(guān)的事件有碰撞事件、不再碰撞事件和觸壁事件。 碰撞事件（CollidedWith）是當(dāng)前圖像精靈與其它精靈或畫布邊緣發(fā)生碰撞時(shí)產(chǎn)生的事件，該事件的參數(shù)other是被碰撞精靈的名稱。球體 不再碰撞事件（NoL