第8章 动画编程

1、第八章动画编程动画编程动画主要内容：一、画布： Canvas二、动画组件： Ball，ImageSprite三、动画构造方法： 1、结合时钟组件 2、利用Canvas的方法构造动画 3、利用动画组件属性生成动画效果一、画布p 画布组件（Canvas）：用于绘制图形，提供了用于绘制图形，提供了画点、画线和圆的方法，用户可以自己任意在画点、画线和圆的方法，用户可以自己任意在画布上绘制图形及放入动画组件；画布上绘制图形及放入动画组件；画布为一矩形区域，可在其中执行绘画等触碰动作或设定动画。 AppInventor画布坐标系统 AppInventor画布坐标系统示意图AppInventor画布坐标系统

2、（Canvas Coordinate System）举例：右图中，水平坐标X，垂直坐标Y。左上角坐标（X=0，Y=0），右下角（X=20，20）。示例Exam8_1: 绘图板可画圆圈与曲线Desiger 完成图画笔颜色为红色、蓝色、绿色画线画圆清除绘图板上绘图程式完成图二、动画组件o Ball 球是一个动画组件，可以和画布、球体或其他图球是一个动画组件，可以和画布、球体或其他图片精灵互动；片精灵互动；o ImageSprite 图片精灵是一个动画组件，可以和画布、球体或图片精灵是一个动画组件，可以和画布、球体或其他图片精灵互动。其他图片精灵互动。AppInventor2的动画相关组件 Ball

3、的属性（的属性（Properties） Radius ：半径 PaintColor ：球的颜色 Enabled ：如果值为true则被激活（可以产成动画效果）Interval ：球的移动变化间隔（单位是毫秒，缺省值是100毫秒即0.1秒） Visible ：如果设定为true，则可以看到球Heading ：球的运动方向 Zero is horizontally to the right (east), 90 is straight up, 180 is to the left, and 270 is straight down X：球的X坐标位置 Y：球的Y坐标位置Z ：球的Z坐标位置(用于形

4、体重叠时用于形体重叠时）Speed ：球每运动一次移动的像数个数 Ball组件组件Ball的事件（的事件（Event）CollidedWith(other) 球与其它形体碰撞时，此方法可触发一个事件，从而产生连锁反应。Dragged(startX, startY, prevX, prevY, currentX, currentY) 球被鼠标拖动后,可跳到新的位置。EdgeReached(edge) 球接触显示区域边缘时, 此方法可触发一个事件，从而产生连锁反应NoLongerCollidingWith(other) ：球脱离与其它形体碰撞时,可触发一个事件，从而产生连锁反应。Touched(x

5、, y) 球被用户手指触摸到时,可触发一个事件，从而产生连锁反应。TouchedDown(x, y)TouchedUp(x, y) Flung(x, y, heading, xvel, yvel)Ball的方法（的方法（method） Bounce(edge) 碰到边沿或角落时，球产生反弹动作。 boolean CollidingWith(other) 向外发送球与其它形体是否发生碰撞的信息。 MoveIntoBounds() 如果球脱离了约束范围，此方法可使球重新进入约束区域。 MoveTo(x, y) 此方法可使球体直接跳动到指定位置。 PointInDirection(x, y) Poi

6、ntTowards(target) ImageSprite组件组件 ImageSprite组件拥有和Ball几乎相同的属性属性（Properties），），与Ball不同的属性有： Picture（图案对象） Rotates（如果属性为真,则图案折转时产生旋转，从而使图案方向与运动方向一致） Width（图案宽度） Height（图案高度） 注意：图片精灵无注意：图片精灵无PaintColor、Radius ImageSprite拥有和Ball相同的事件（事件（Events） ImageSprite拥有和Ball相同的方法（方法（Methods）三、动画构造方法o 结合clock组件构造动画o

7、 利用Canvas的方法构造动画o 利用动画组件属性构造动画 结合clock组件构造动画利用利用Canvas的方法构造动画：的方法构造动画：o 可利用Canvas的方法如DrawLine、DrawText、DrawCircle等，加上动态运动的位移设置，可构造点、线、圆、文字的动画显示效果。 o 注意，构造此程序时如果未设置较大画布（宽度width未设成fill parent或不够宽，高度Height不够高），或者TimeEnable未打钩，就看不到动画效果。利用动画组件属性构造动画o 利用动画组件的Heading、Speed属性生成动画效果。如右：是一个球在画布上沿着斜线方向来回移动并逐步靠

8、近画布左上角。复习之复习之1：Ball及及ImageSprite事件（事件（Event）及其应用及其应用Dragged(number startX, number startY, number prevX, number prevY, number currentX, number currentY) EdgeReached(number edge) CollidedWith(component other) Dragged应用举例应用举例 EdgeReached应用举例应用举例 CollidedWith应用举例应用举例 2022-5-2429示例Exam8_2: 蝴蝶平飞2022-5-2430例2的程序代码例2的改进蝴蝶跳跃飞第四次作业作业内容：动画编程（鼓励编写游戏类动画）提交成果：AppInventor源程序（*.aia）提交时间：2014年9日前 复习之复习之2： Ball及ImageSprite的方法（Methods） MoveTo(number x,number y) 例3：反弹球例3的程序代码2、通过计算形体运动轨迹，控制形体动画 问题：如何画一个正弦函数波形图 EdgeReac