110 likes | 119 Views
Learn how to create animated apps using Canvas and ImageSprite components. This tutorial covers the basics of drawing on Canvas, specifying coordinates, reacting to touches and drags, and animating objects.
E N D
Creating Animated Apps:Canvas與ImageSprite 靜宜大學資管系 楊子青
1. Canvas Component • A two-dimensional touch-sensitive rectangular panel on which drawing can be done and sprites can be moved. • Any location on the Canvas can be specified as a pair of (X, Y) values, where • X is the number of pixels away from the left edge of the Canvas • Y is the number of pixels away from the top edge of the Canvas • There are events to tell when and where a Canvas has been touched or a Sprite has been dragged.
Adding a Canvas Component to App • You can drag a Canvas component into your app from the Basic palette. • specify the Canvas’s Width and Height. • Often span the width of the device screen: “Fill parent” • Height: 300
2. ImageSprite component • is an animated object that is contained by a canvas • can react to touches and drags, • interact with other sprites (image sprites and other balls) and the edge of the canvas, • and move according to its properties.
2.1 Timer event • One way to specify animation in App Inventor is to change an object in response to a timer event. • Most commonly, you’ll move sprites to different locations on the canvas at set time intervals.