《第 17 章 创建动画应用》由会员分享，可在线阅读，更多相关《第 17 章 创建动画应用（9页珍藏版）》请在金锄头文库上搜索。
1、第 17 章创建动画应本章将讨论创建另类应的法，应中使了简单的可移动的动画对象。你将学习使App Inventor创建维游戏的基本知识，并熟练使图精灵（image sprite）及处理两个物体碰撞类的事件。当你在电脑屏幕上看到个平滑移动的物体时，你实际上看到的是连串快速移动的图，每次只移动个极的距离，它利了的视觉暂留，从这点上，它异于“翻书” 种通过快速翻页来看到动画效果的书（这也是那些精美绝伦的动画电影的制作法）。在App Inventor中，通过在Canvas组件上放置物体，并让这些物体随时间在Canvas内移动，从产出动画效果。本章将学习使Canvas的坐标系统，学习利Clock.Tim
2、er事件来触发运动，以及如何控制运动速度、如何响应两个物体的碰撞事件等等。在应中添加Canvas组件从组件板的Drawing and Animation组中拖出Canvas组件，然后定义它的Width及Height属性。通常我们希望Canvas与屏幕等宽，为此将宽度设为“Fill parent”，如图17-1所。图 17-1设置Canvas组件的Width属性可以同样的式设定Height属性，但般会将其设为个数字（如300像素），以便为Canvas上或下的其他组件留出空间。Canvas的坐标系统Canvas上的图画实际上是个许多像素构成的表格，像素是机（或其他设备）屏幕上能够显的最的块，每个像
3、素都在Canvas上有它的位置（或者说单元格），位置由X-Y坐标系定义，如图17-2所，X定义了平向上的位置（向是从左到右），Y定义了垂直向的位置（从上到下）。图 17-2Canvas的坐标系统坐标轴的向定义可能与你的经验不致，不过位于Canvas左上的单元格的x、y坐标都为零，因此这个位置表为（x=0，y=0）。（这与App Inventor列表中使的索引值有所不同，索引值从1开始，看起来更容易理解。）向右移动时，x坐标增；向下移动时，y值变。位于左上单元格右侧的单元格坐标为（x=1，y=0）。右上单元格的x坐标等于canvas的宽度减1，多数机屏幕的宽度都在300左右，但这例中显的宽度是2
4、0，因此右上的单元格坐标为（x=19，y=0）。要改变canvas的外观有两种法：在上绘画，或者在上放置移动的物体，本章所涉及的是后者，但我们先要讨论如何绘画，以及如何通过绘画来创建动画（这也是本书第章油漆桶中的主要内容）。Canvas中的每个单元格都对应显为个有颜的像素。Canvas组件提供的Canvas.DrawLine及Canvas.Circle块可以来在canvas上以绘制像素组成的图画。先需要将Canvas.PaintColor属性设置为你需要的颜，然后调某个具体的绘画块来画出颜。其中的DrawCircle块可以绘制直径为任意的圆，但如果你将半径设为1，如图17-3所，那么只能画出个
5、单独的像素。图 17-31个像素画圆，每次只能画1个单独的像素在块编辑器Built-in组的Colors抽屉中，App Inventor提供了13种常的颜，可以来绘制像素图（或设置组件背景）。也可以使颜编码案来获得更为丰富的颜，颜编码案的解释请参见相关App Inventor档：http:/ Inventor中，为应添加动画的法之就是让物体对计时器事件做出响应，最常的法就是让sprite按照设定的时间间隔，在canvas上进位置的移动。设定的时间间隔的法是使计时器事件最通的法。稍后我们还将讨论另种法，即，利ImageSprite及Ball组件的Speed（速度）及Heading(向)属性，通过
6、编程来实现动画效果。点击按钮以及其他户触发的事件理解起来常简单：户做动作，应通过执某些操作来进响应；但计时器事件则不然：这类事件不是由最终户发起，是由时间的流动来触发。你需要将应中的这类机时钟触发的事件与户的为区分开来。定义计时器事件的第步是在组件设计器中为应拖个Clock组件。Clock组件有个关联的TimerInterval（计时间隔）属性，来以毫秒为单位定义计时器的计时间隔（1秒=1000毫秒）。如果将TimerInterval设为500，就意味着每隔半秒钟触发次计时器事件。计时间隔越，物体的移动也就越快。在设计器中完成Clock的添加以及TimerInterval的设定后，就可以在块编
7、辑器中拖出“when Clock.Timer”事件块，并在其中加任何你需要的块，这些块将每个个计时间隔执次。产运动要让sprite随时间移动，就需要MoveTo函数。在块编辑器的ImageSprite及Ball组件抽屉中可以找到这个函数。例如，要使个球在平向上穿越屏幕，需要使图17-4中的块。图 17-4让球在平向穿越屏幕MoveTo的作是在canvas上将物体移动到个绝对位置，不是相对位置。因此，为了移动到这个绝对位置，需要将MoveTo函数的参数设定为当前位置与增量之和。这我们要实现球的平移动，只需要将参数x设定为当前的x值与增量20之和，y值保持不变（Ball1.Y）。如果想让球沿着对线
8、的向移动，就需要同时设定x、y坐标的增量，如图17-5所。图 17-5设置x、y坐标的增量，实现球在对线向的移动控制速度在前的例中，球的移动有多快呢？速度取决于两个因素：Clock组件的TimerInterval属性值，以及MoveTo函数中的参数值。如果计时间隔设为1000毫秒，就意味着每秒钟触发次计时事件，这样会让运动变得不流畅。为了得到更为平滑的运动，就需要缩短计时间隔。如果将TimerInterval设为100毫秒，则球每隔1/10秒移动20像素，或者每秒移动200像素，对于应的使者来说，这个速度看起来会平滑得多。除了改变计时间隔之外，还有种法也可以改变速度，你能想到是什么法吗？（提：
9、速度与球移动的频次以及每次的移动量相关。）在保持计时间隔100毫秒不变的情况下，改变MoveTo中的算式也可以改变移动的速度：让球每次只移动2个像素，即2像素/100毫秒，这相当于20像素/秒。级动画功能这种让物体在屏幕上移动的能，适合于那些飘来飘去的动画类告，但要制作游戏或其他的动画应，就需要更为复杂的功能。幸运的是，App Inventor提供了个的级块，于处理动画类事件，如物体到达屏幕边缘及两个物体的碰撞。在这种情况下，级块来侦测两个sprite之间的碰撞这类事件，表明App Inventor已经深到了程序的底层细节。其实你也可以利Clock.Timer事件，通过检查每个sprite的x
10、y坐标及Width、Height属性来检测到这类事件的发，但这样的程序涉及到常复杂的逻辑。由于这类事件在许多游戏及其他应中很常见，因此App Inventor为你提供了这些功能。抵达边界图 17-6当球到达边缘时让它重回左上重新考虑前的动画，物体在canvas上沿着对线向从左上向右下移动。依照前的程序，物体沿对线向移动并将停在canvas的右下（因为系统不允许sprite对象超出canvas的边界）。如果想让物体在到达右下后再重新出现在左上，可以定义个事件处理程序Ball.EdgeReached来响应到达边缘事件。当Ball碰到canvas的任何个边时，将触发EdgeReached事件(到达边
11、缘事件，该事件只适于Sprite及Ball组件)。这个事件，再加上前提到的让球沿斜线移动的定时器事件，两个事件共同作的结果就是，球从左上向右下移动，在到达彼岸猿猴再跳回到左上，然后继续移动，并再次跳回，循环往复，永不停（或者直到接到其他指令）。注意到在EdgeReached事件中有个参数，edge1，它代表球碰到的那个边，这数字来代表不同的向：North = 1Northeast = 2East = 3Southeast = 4South = -1Southwest = -2West = -3Northwest = -4CollidingWith事件与NoLongerCollidingWith
12、事件射击类、运动类游戏以及其他类型的动画应通常都会涉及到两个或多个物体之间的碰撞（如，弹击中靶）。例如，考虑这样个游戏，当其中的物体与其他物体发碰撞时，会改变颜，并发出爆炸声，图17-7中显了这样个事件处理程序。图 17-7当球与其他物体发碰撞时，变并发出爆炸声NoLongerCollidingWith事件是与CollidedWith相反的事件，当两个碰到起的物体分开时，触发该事件。在游戏中，可能到图17-8中的块。图 17-8当碰撞的物体离开时，球变并停爆炸声注意到CollidedWith及NoLongerCollidingWith事件都有个参数other，它代表了被撞到的那个物体。这可以来
13、处理个物体（如Ball1）与另个指定物体之间的相互作。如图17-9所。图 17-9只有当Ball1碰撞到ImageSprite1时才做相应之前我们没有提到过这个“ImageSprite组件”块。如果需要对两个组件进较（得知究竟是哪个与之碰撞），如本例中的情形，就必须指定被较的具体对象。为此，每个组件都有个指向它的块，这个块就在ImageSprite1的抽屉，排在最后个的就是。交互动画到前为，我们所讨论的动画为都没有最终户的参与。毫疑问，游戏都是交互的，最终户扮演着核的，通常他们使按钮或其他界对象来控制物体的速度及向。作为例，我们来改变对线移动的动画，户可以让移动停然后再启动。可以通过对Butt
14、on.Click事件编程来实现这点，具体法是控制clock组件的启与禁属性。在默认情况下，Clock组件的timerEnabled属性是被选中的，可以在事件处理程序中动态地设置它，如设为false。例如，在图17-10的事件处理程序中，在户第次点击按钮时，可以让Clock的计时作停运。图 17-10当按钮被第次点击时，停计时在Clock1.TimerEnabled属性被设为false之后，Clock1.Timer事件不再被触发，因此球停移动。当然，只是在第次点击时让运动停，这样的操作并不能为游戏带来乐趣，需要在事件处理程序中添加个ifelse块来控制计时功能的启与禁，从实现对运动的双向控制（运动及停）。如图17-11所。图 17-11添加ifelse块，通过点击按钮来控制运动的开始与停在点击按钮的事件处理程序中，第次点击按钮，计时器停计时，按钮上的字由“停”变为“开始”；第次点击按钮，此时TimerEnabled的值为false，因此执“else”分，于是计时器被置于启状态，使得物体重新开始移动，按钮上的字改回“停”。关于ifelse
