《AppInventor动画课件》由会员分享，可在线阅读，更多相关《AppInventor动画课件（60页珍藏版）》请在金锄头文库上搜索。
1、AppInventor动画-wuhuth1AppInventor动画目标主要介绍画布（Canvas）和精灵（ImageSprite）的使用方法，以及一些高级的动画功能，如边缘检测、碰撞处理和精灵操纵等。掌握画布的使用方法理解画布的坐标系统掌握精灵的使用方法掌握球（Ball）的使用方法了解边缘检测和碰撞处理的原理2AppInventor动画画布 画布是一种可在其上绘制图像的控件，初始的画布像一张空白幻灯片，没有任何内容，用户可以在画布上绘制各种图形，也可以在画布上加载图片作为画布的背景，或是在画布上显示文字。画布是常用的控件，除了作为绘制图形的承载体以外，还经常作为游戏的背景画面。 画布是一个具
2、有触控感应的二维平面图板，采用经典的二维坐标系，原点在画布的左上角。使用坐标点(X,Y)说明画布的坐标系，X表示坐标点距离左侧边缘的距离，Y表示坐标点距离上边缘的距离，且X和Y都取正值。3AppInventor动画画布4AppInventor动画在基本控件库中可以找到画布（Canvas），将画布拖拽到界面设计区后，画布仅仅显示为一个小图标，如下图所示。画布5AppInventor动画画布属性6AppInventor动画画布事件7AppInventor动画画布事件手指从A点按下，缓慢划线，从B点滑动到C点，然后抬起手指的过程。手指接触到A点时产生TouchDown事件；手指从A到B再到C的移动过
3、程中，将多次产生Dragged事件；在手指离开C点时，产生TouchUp事件。TouchDown和TouchUp事件只在手指触碰到屏幕和离开屏幕时产生。如果手指的触碰点和抬起点是同一点，将引发Touched事件；如果手指在屏幕上移动了，则不会引发Touched事件。8AppInventor动画画布的Dragged事件Dragged事件在手指移事件在手指移动过程中程中持持续产生，主要用来跟踪手指的生，主要用来跟踪手指的移移动轨迹。迹。该事件提供三个坐事件提供三个坐标，分分别是移是移动开始坐开始坐标点（点（StartX和和StartY）、事件）、事件产生生时的当前坐的当前坐标点（点（Current
4、X和和CurrentY）、前）、前一个事件一个事件产生生时的坐的坐标点（点（PrevX和和PrevY）以右以右图场景景为例，如果从例，如果从A点到点到C的的过程中，只在程中，只在B点和点和C点点产生了生了Dragged事件，事件，则在在C点点产生的事生的事件中，移件中，移动开始开始节点是点是A，当前，当前节点是点是C，前一个事件，前一个事件产生是在生是在B点。点。9AppInventor动画画布的Flung事件画布的Flung事件只有手指在屏幕上快速划动的时候才会产生。以右图场景为例，在从A经过B到C的过程中，如果手指在屏幕上移动的足够快，则当手指在C点抬起时，会产生Flung事件。Flung
5、事件中会提供划动开始节点的坐标、划动方向、速度、速度在X轴和Y轴的分量。10AppInventor动画画布的Flung事件11AppInventor动画画布的事件12AppInventor动画示例CanvasEvent13AppInventor动画示例CanvasEvent14AppInventor动画示例CanvasEventCanvasEvent示例说明画布的事件响应的时机和提供的数据。上图分别是在界面编辑器中的界面和手机运行时的界面。CanvasEvent示例中上方是画布控件，下方是各种事件数据的显示区域。在上方的画布上进行触碰操作或滑动操作，事件的响应结果便会显示在界面下部。15App
6、Inventor动画示例CanvasEvent逻辑控制模16AppInventor动画TouchDown事件处理函数逻辑模块17AppInventor动画TouchUp事件处理函数逻辑模块18AppInventor动画Touched事件处理函数逻辑模块19AppInventor动画画布方法20AppInventor动画画布方法画布所支持的方法，除了Clear和Save方法之外都需要用户提供坐标作为基本参数，如DrawPoint和GetPixelColor。下图给出了画布所有方法中需要用户提供的参数。21AppInventor动画画布方法22AppInventor动画相机相机控件是一个非可视化控
7、件，可利用手机的镜头进行拍照。相机控件在媒体控件区（Media）可以找到。23AppInventor动画相机控件只支持一种方法TakePicture，此方法被调用时，手机将进行拍照。该方法结束后会引发AfterPictures事件。相机24AppInventor动画AfterPicture事件在拍照完成后被产生，其中image是手机中用来存放拍摄照片的路径信息。相机25AppInventor动画加速传感器控件加速传感器控件用来检测手机加速度大小，可在三个方向测量手机晃动时的加速度，测量单位为米/秒2(m/s2)。加速传感器控件在传感器控件区（Sensors）可以找到。26AppInventor
8、动画加速传感器控件加速传感器控件支持X加速度、Y加速度、Z加速度，每个加速度数值都有正值和负值。其中，设备左侧抬高时,X加速度数值为正，右侧抬高时，X加速度数值为负。手机处于水平位置，下部抬起时Y加速度为正，上部抬起时Y加速度为负。手机处于水平位置，屏幕朝上时Z加速度为正，朝下时Z加速度为负。此外，手机屏幕朝上且水平放置时，Z加速度约为9.8m/s2。27AppInventor动画加速传感器控件28AppInventor动画加速传感器控件加速传感器控件支持的事件有AccelerationChanged和Shaking。AccelerationChanged事件在加速传感器的加速度改变时调用，并
9、根据加速传感器的变化返回X、Y、Z加速度值，可以在三个方向上确定手机晃动时的加速度大小。Shaking事件在手机摇晃时会被多次调用。29AppInventor动画加速传感器控件30AppInventor动画方向传感器方向传感器控件(OrientationSensor)是一个非可视化控件，可用来测定手机的三轴角度的变化。界面编辑器中的方向传感器控件如下图所示。31AppInventor动画方向传感器将手机正面向上的放置在水平桌面上，沿手机屏幕水平方向（左右）定义为x轴，水平方向（后前）定义为y轴，垂直于手机屏幕的方向（上下）定义为z轴。方向传感器可以反馈三个数据Roll、Pitch和Azimut
10、h。方向传感器的数据单位是度，且有正负之分。32AppInventor动画方向传感器Roll表示手机x轴与水平面的夹角，范围从-90到90。手机处于水平放置时数值为0，向左侧倾斜时数值由0递增到90，向右倾斜时数值由0递减至-90。Pitch表示手机y轴与水平面的夹角，范围从-90到90。手机水平放置时为0，y轴正方向朝下倾斜时数值由0增加到90，y轴正方向朝上倾斜时数值由0递减至-90。Azimuth表示方位，手机水平放置时磁北极和y轴的夹角，范围从0到360。y轴正方向指向正北时为0，指向正东为90，指向正南为180，指向西东为270。33AppInventor动画方向传感器34AppIn
11、ventor动画方向传感器补充说明:图中的坐标轴x,y,z和传感器中的X,Y,Z没有任何联系!如上图所示，绿色部分表示一个手机，带有小圈那一头是手机头部传感器中的X:如上图所示，规定X正半轴为北，手机头部指向OF方向，此时X的值为0,如果手机头部指向OG方向，此时X值为90,指向OH方向，X值为180,指向OE，X值为27035AppInventor动画方向传感器传感器中的Y：现在我们将手机沿着BC轴慢慢向上抬起，即手机头部不动，尾部慢慢向上翘起来，直到AD跑到BC右边并落在XOY平面上，Y的值将从0180之间变动，如果手机沿着AD轴慢慢向上抬起，即手机尾部不懂，直到BC跑到AD左边并且落在X
12、OY平面上，Y的值将从0-180之间变动，这就是方向传感器中Y的含义。传感器中的Z:现在我们将手机沿着AB轴慢慢向上抬起，即手机左边框不动，右边框慢慢向上翘起来，直到CD跑到AB右边并落在XOY平面上，Z的值将从0180之间变动，如果手机沿着CD轴慢慢向上抬起，即手机右边框不动，直到AB跑到CD左边并且落在XOY平面上，Z的值将从0-180之间变动，这就是方向传感器中发Z的含义36AppInventor动画方向传感器37AppInventor动画方向传感器Magnitude，表示手机倾斜程度，是一个介于0和1之间的数。Angle，表示倾斜角大小。38AppInventor动画方向传感器方向传感
13、器只有一个事件OrientationChanged，在手机方向发生变化时产生，返回Roll、Pitch和Azimuth数据。即使静止的放置在水平面上，手机方向传感器仍然能够检测到微小的方向变化，所以可以认为OrientationChanged事件是持续发生的事件，事件中的处理过程务必要简单、高效。39AppInventor动画方向传感器应用示例40AppInventor动画方向传感器应用示例41AppInventor动画方向传感器应用示例42AppInventor动画图像精灵将精灵放置在画布上，精灵就接受触摸或拖动操作，如果设置精灵自身关于运动的一些属性，精灵则可以按照预定的方式移动。为实现一
14、个图片精灵每隔1000毫秒向左侧移动10个像素，则需设置其速度(Speed)属性值为10像素，时间间隔(Interval)属性为1000毫秒，方向（Heading）属性设置为180度，激活（Enabled）属性设置为True。精灵的旋转属性（Rotates）设置为True时，图片会根据精灵的朝向变化进行转动，设置好的参数如图。43AppInventor动画图像精灵44AppInventor动画图像精灵45AppInventor动画图像精灵X和Y是图像精灵在画布上的坐标，X为0时，表示图像精灵已经到达画布的左侧边界；Y为0时，则表示图片精灵已经到达画布的上边界。Enabled属性表示图像精灵是否
15、会被激活，如果精灵与移动相关的属性被设置，同时Enabled为true，则图像精灵会在画布上移动。Visible属性决定了图像精灵在画布上是否可见。属性Heading是图像精灵的移动方向，取值范围是0到360，其中，0表示水平向右，90代表垂直向上，180代表水平向左，270表示垂直向下。46AppInventor动画图像精灵47AppInventor动画图像精灵48AppInventor动画图像精灵精灵控件的方法实现了精灵的移动、反弹和碰撞检测动作。49AppInventor动画ColldingWith方法用来检测图像精灵是否发生碰撞，返回值为true时，说明与指定精灵或画布边缘发生碰撞；返
16、回值为false时，则未发生碰撞。MoveIntoBounds方法是将超出边缘的控件，重新移动至画布边缘范围内。图像精灵50AppInventor动画碰撞检测碰撞检测是在精灵的运动过程中，检测到精灵自身边缘与其他精灵或画布边缘接触的技术，在开发游戏过程中经常会被使用到。一般情况下，只有游戏中的物体发生移动后才有必要进行碰撞检测，所以碰撞检测的流程分为三步：更新物体位置进行碰撞检测碰撞处理。51AppInventor动画碰撞检测实现碰撞检测通常包括三个方面的内容。首先，确定检测对象。游戏在运行中会有很多实体对象，在进行碰撞检测时并不需要对所有的实体对象都检测一遍，如静止的宝箱没有必要去检测和另外
17、的宝箱是否发生了碰撞。所以在开始碰撞检测之前，首先要确定碰撞检测的对象是什么。其次，检测是否碰撞，这是检测的核心环节。在这个环节需要综合考虑游戏本身的需求，以及运行平台的性能等问题，合理的选择碰撞检测的算法。最后是处理碰撞。当检测到碰撞发生的时候，就需要根据碰撞的类型进行相应的处理，例如炮弹会在碰到目标后爆炸并给目标带来伤害。52AppInventor动画球体球体(Ball)是特殊的图像精灵，具有与图像精灵相似的属性，完全相同的事件和方法。不同之处在于球体不能够有自定义的外观，但可以改变球的大小和颜色。53AppInventor动画球体54AppInventor动画球体球体与图像精灵具有相同的
18、事件和方法，下面的内容主要介绍与碰撞检测相关的事件和方法。球体中与碰撞检测相关的事件有碰撞事件、不再碰撞事件和触壁事件。碰撞事件（CollidedWith）是当前图像精灵与其它精灵或画布边缘发生碰撞时产生的事件，该事件的参数other是被碰撞精灵的名称。55AppInventor动画球体不再碰撞事件（NoLongerCollidingWith）是当前精灵与已经产生碰撞的精灵分开时产生的事件，是碰撞事件的对立事件。当两个精灵产生碰撞时，先发生的是碰撞事件，如果两个精灵被弹开，随即便会产生不再碰撞事件。该事件的参数other1是被碰撞精灵的名称。56AppInventor动画球体触壁事件（Edge
19、Reached）在图像精灵移动到画布边缘时发生。当一个精灵运动到画布边缘时，则会产生触壁事件，如果不对此事件做任何处理，精灵则会移动出画布边界；相反，如果在触壁事件中将精灵的运动方向逆转，则精灵又会重新回到画布中。57AppInventor动画球体触壁事件的参数edge表示所到达的画布边缘，用数字表示画布不同的边缘。1表示上方（north）2表示右上（northeast）3表示右侧（east）4表示右下（southeast）-1表示下方（south）-2表示左下方（southwest）-3表示左侧（west）-4表示左上方（northwest）58AppInventor动画球体在球体的方法中，最常用的就是Bounce方法，与EdgeReached事件配合使用可将球体从画布边缘反弹回画布中。当EdgeReached事件检测到碰撞后，调用Bounce方法，并将EdgeReached事件检测到的碰撞边缘Edge参数传递给Bounce方法，精灵可以根据此参数进行边缘反弹。59AppInventor动画课程设计游戏中的小球会向画面下方以一定角度掉落，通过控制画面下方的球板，阻止小球落到地面上。小球碰到球板后会弹起，每次接触球板都会得1分。游戏中可以使用触碰的方法控制球板，也可以使用方向传感器控制球板。60AppInventor动画
