appinventor HTML5,App Inventor编程教程-第18课-创建动画应用

本章将讨论另一类应用——包含简单动画(会移动的物体)的应用。你将学习用App Inventor创建二维游戏的基本知识，包括熟练使用精灵组件，以及处理像两个物体碰撞这样的事件。

当在电脑屏幕上看到一个平滑移动的物体时，你实际上看到的是一连串快速移动的图片，图片每次只移动很短的距离。与手翻书(一种通过快速翻页来实现动画效果的书)一样，它利用了人类的视觉暂留现象，这也是那些精美绝伦的动画电影的本质。

App Inventor中的动画是这样实现的：将球或精灵放置在画布上，然后编写程序，让这些物体随时间做微小的移动或变换，时间间隔以毫秒计。本章将讲解画布的坐标系统，学习利用计时器的计时事件来触发运动，学会控制运动的速度以及处理两个物体的碰撞事件，等等。

图17-1 画布的坐标系统

在应用中添加画布组件

从组件面板的绘画动画分组中拖出画布组件，然后定义它的宽度及高度属性。通常我们希望画布与屏幕等宽，为此将宽度设为“充满”。

可以用同样的方式设定高度属性，但一般会将其设为一个具体的数字(如300像素)，以使画布的上方或下方留有足够的空间容纳其他组件。

画布的坐标系统

画布上的图画实际上是一个由像素拼接而成的网格。像素是屏幕上能够显示的最小色块(一个宽高均为1个单位的小方格)，每个像素的位置由网格系统的x-y坐标系定义，如图17-1所示。在这个坐标系中，x定义了像素在水平方向上的位置(从屏幕左侧的0开始，向右为增大方向)，y定义了像素在垂直方向的位置(从屏幕顶部的0开始，向下为增大方向)。

图17-1 画布的坐标系统位于画布左上角的方格是坐标系中两个坐标轴的原点，坐标值为0，因此这一点的坐标可以表示为(x=0, y=0)。向右移动时，x值增大；向下移动时，y值增大。紧邻左上角方格右侧的方格，其坐标为(x=0, y=0)，右上角方格的x坐标等于画布的宽度减1。大部分手机屏幕的宽度在300(目前市场上的高端安卓手机屏幕宽度已达1440像素。——译者注)个像素左右，但图17-1中所示的屏幕宽度只有20个像素，因此右上角的像素坐标为(x=19, y=0)。

有两种方法可以改变画布外观：在画布上绘画，或者在画布中放置移动的物体(还可以设置画布的背景图片属性。——译者注)。本章主要关注后者，不过我们首先来讲解如何在画布上绘画，以及如何通过绘画来创建动画(这也是第2章中的主要内容)。

画布中的每一个方格(即像素)都呈现出单一一种颜色。画布组件提供了画线及画圆功能，可以用于在画布上绘制像素组成的图画。首先将画布的画笔颜色属性设为需要的颜色，然后调用画布的绘画功能来画出该颜色。其中的画圆功能可以绘制直径为任意大小的圆，但如果半径设为1，如图17-2所示，那么只能画出一个方形