动画编程.ppt

ImageSprite组件 ImageSprite组件拥有和Ball几乎相同的属性（Properties），与Ball不同的属性有： Picture（图案对象） Rotates（如果属性为真,则图案折转时产生旋转，从而使图案方向与运动方向一致） Width（图案宽度） Height（图案高度） 注意：图片精灵无PaintColor、Radius ImageSprite拥有和Ball相同的事件（Events） ImageSprite拥有和Ball相同的方法（Methods） 三、动画构造方法 结合clock组件构造动画 利用Canvas的方法构造动画 利用动画组件属性构造动画 结合clock组件构造动画 利用Canvas的方法构造动画： 可利用Canvas的方法如DrawLine、DrawText、DrawCircle等，加上动态运动的位移设置，可构造点、线、圆、文字的动画显示效果。 注意，构造此程序时如果未设置较大画布（宽度width未设成fill parent或不够宽，高度Height不够高），或者TimeEnable未打钩，就看不到动画效果。 利用动画组件属性构造动画 利用动画组件的Heading、Speed属性生成动画效果。如右：是一个球在画布上沿着斜线方向来回移动并逐步靠近画布左上角。 复习之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应用举例 * * 示例Exam8_2: 蝴蝶平飞 * * 例2的程序代码 例2的改进——蝴蝶跳跃飞 第四次作业 作业内容：动画编程（鼓励编写游戏类动画） 提交成果： AppInventor源程序（*.aia） 提交时间：2014年9日前 复习之2： Ball及ImageSprite的方法（Methods） MoveTo(number x,number y) 例3：反弹球 例3的程序代码 2、通过计算形体运动轨迹，控制形体动画 问题：如何画一个正弦函数波形图 EdgeReached事件涉及到的边沿（edge）编码方案如下: north = 1 northeast = 2 east = 3 southeast = 4 south = -1 southwest = -2 west = -3 northwest = -4 YuJin CS STU YuJin CS STU YuJin CS STU YuJin CS STU YuJin CS STU YuJin CS STU YuJin CS STU YuJin CS STU YuJin CS STU YuJin CS STU YuJin CS STU YuJin CS STU YuJin CS STU 第八章 动画编程 动画主要内容： 一、画布： Canvas 二、动画组件： Ball，ImageSprite 三、动画构造方法： 1、结合时钟组件 2、利用Canvas的方法构造动画 3、利用动画组件属性生成动画效果 一、画布 画布组件（Canvas）：用于绘制图形，提供了画点、画线和圆的方法，用户可以自己任意在画布上绘制图形及放入动画组件；画布为一矩形区域，可在其中执行绘画等触碰动作或设定动画。 AppInventor画布坐标系统 AppInventor画布坐标系统示意图 AppInventor画布坐标系统（Canvas Coordinate System）举例：右图中，水平坐标X，垂直坐标Y。左上角坐标（X=0，Y=0），右下角（X=20，20）。 示例Exam8_1: 绘图板 可画圆圈与曲线 Desiger 完成图 画笔颜色为红色、蓝色、绿色 画线 画圆 清除绘图板上绘图 程式完成图 二、动画组件 Ball 球是一个动画组件，可以和画布、球体或其他图片精灵互动； ImageSprite 图片精灵是一个动画组件，可以和画布、球体或其他图片精灵互动。 AppInventor2的动画相关组件 Ball的属性（Properties） Radius ：半径 PaintColor ：球的