【精选】第 17 章 创建动画应用.pdfVIP

第 17 章　创建动画应⽤ 本章将讨论创建另⼀类应⽤的⽅法，应⽤中使⽤了简单的可移动的动画对象。你将学 习使⽤App Inventor创建 维游戏的基本知识，并熟练使⽤图⽚精灵 （image sprite ）及 处理两个物体碰撞⼀类的事件。 当你在电脑屏幕上看到⼀个平滑移动的物体时，你实际上看到的是⼀连串快速移动的 图⽚，每次只移动⼀个极⼩的距离，它利⽤了⼈的视觉暂留，从这⼀点上，它⽆异 于“⼿翻书” —— ⼀种通过快速翻页来看到动画效果的书 （这也是那些精美绝伦的动画 电影的制作⽅法）。 在App Inventor 中，通过在Canvas组件上放置物体，并让这些物体随时间在Canvas内移 动，从⽽产⽣出动画效果。本章将学习使⽤Canvas的坐标系统，学习利⽤Clock .Timer 事件来触发运动，以及如何控制运动速度、如何响应两个物体的碰撞事件等等。 在应⽤中添加Canvas组件 从组件⾯板的Drawing and Animation组中拖出Canvas组件，然后定义它的Width及 Height属性。通常我们希望Canvas与屏幕等宽，为此将宽度设为“Fill parent” ，如图 7- 所⽰。 图 17-1　设置Canvas组件的Width属性 可以⽤同样的⽅式设定Height属性，但⼀般会将其设为⼀个数字 （如300像素），以便 为Canvas上⾯或下⾯的其他组件留出空间。 Canvas 的坐标系统 Canvas上的图画实际上是⼀个许多像素构成的表格，像素是⼿机 （或其他设备）屏幕 上能够显⽰的最⼩的⾊块，每个像素都在Canvas上有它的位置 （或者说单元格），位 置由X-Y坐标系定义，如图 7-2所⽰，X定义了⽔平⽅向上的位置 （⽅向是从左到 右），Y定义了垂直⽅向的位置 （从上到下）。 图 17-2　Canvas 的坐标系统 坐标轴的⽅向定义可能与你的经验不⼀致，不过位于Canvas左上⾓的单元格的x 、y坐 标都为零，因此这个位置表⽰为 （x=0 ，y=0 ）。 （这与App Inventor列表中使⽤的索 引值有所不同，索引值从 开始，看起来更容易理解。）向右移动时，x坐标增⼤；向 下移动时，y值变⼤。位于左上⾓单元格右侧的单元格坐标为 （x= ，y=0 ）。右上⾓ 单元格的x坐标等于canvas的宽度减 ，多数⼿机屏幕的宽度都在300左右，但这⾥例⼦ 中显⽰的宽度是20 ，因此右上⾓的单元格坐标为 （x= 9 ，y=0 ）。 要改变canvas的外观有两种⽅法：①在上⾯绘画，或者②在上⾯放置移动的物体，本 章所涉及的是后者，但我们⾸先要讨论如何绘画，以及如何通过绘画来创建动画 （这 也是本书第 章油漆桶中的主要内容）。 Canvas中的每⼀个单元格都对应显⽰为⼀个有颜⾊的像素。Canvas组件提供的 Canvas.DrawLine及Canvas.Circle块可以⽤来在canvas上以绘制像素组成的图画。⾸先 需要将Canvas.PaintColor属性设置为你需要的颜⾊，然后调⽤某个具体的绘画块来画 出颜⾊。其中的DrawCircle块可以绘制直径为任意⼤⼩的圆，但如果你将半径设为 ， 如图 7-3所⽰，那么只能画出⼀个单独的像素。 图 17-3　⽤1个像素画圆，每 只能画1个单独的像素 在块编辑器Built-in组的Colors抽屉中，App Inventor提供了 3种常⽤的颜⾊，可以⽤来 绘制像素图 （或设置组件背景⾊）。也可以使⽤颜⾊编码⽅案来获得更为丰富的颜 ⾊，颜⾊编码⽅案的解释请参见相关App Inventor⽂ 档：http://appinventor ./learn/reference/blocks/colors.html 。 改变canvas外观的第 种⽅法是在canvas上放置Ball和ImageSprite组件。sprite是⼀个被 放置在场景中的图形对象，所谓的场景这⾥指的就是canvas 。Ball和ImageSprite组件都 属于sprites类型，只是外观不同⽽已。Ball为圆形，只能通过改变颜⾊和半径来改变它 的外观，⽽ImageSprite可以是任何形状；ImageSprite和Ball都只能添加到Canvas中， 不可能将它们拖⼊⽤户界⾯中Canvas 以外的区域。 ⽤计时事件制造动画 在App Inventor 中，为应⽤添加动画的⽅法之⼀就是让物体对计时器事件做出响应，最 常⽤的⽅法就是让sprite按照设定的时间间隔，在canvas上进⾏位置的移动。设定的时