Download
1 / 26
270 likes | 409 Vues
This lecture delves into graphics and animation in mobile computing, covering essential techniques like programmatic shape drawing, XML shape definitions, frame animation, and tweening. It includes practical examples, such as creating a bouncing globe animation and importing graphic packages. You'll learn how to set up drawing environments, define shapes using XML, and use classes to manage animations effectively. The session is designed for students and developers interested in enhancing their mobile app's visual appeal through advanced graphic manipulation techniques.
E N D
Mobile Computing Lecture#12 Graphics & Animation
Lecture Contents • Graphics & Animations • DrawingShapesProgrammatically • DrawingShapesthrough XML • Frame Animation • Bouncing Globe Example • Tween Animation Example
Drawing a Shape • Import the graphics packages • Create a View • Create a ShapeDrawable to hold our Drawable • Create any Shape and assign it to mDrawable • The onDraw method is called to draw the graphics • Set the boundaries and draw the shape on the canvas
Drawing through XML <?xml version="1.0" encoding="utf-8"?> <ScrollViewxmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="wrap_content"> <LinearLayout android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="wrap_content"> <ImageViewandroid:layout_width="fill_parent" android:layout_height="50dip" android:src="@drawable/rect1" /> </LinearLayout> </ScrollView>
Drawing through XML <?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" type="rectangle"> <solid android:color="#FF0000FF"/> </shape>_______________________ public class Main extends Activity { @Override protected void onCreate(Bundle icicle) { super.onCreate(icicle); setContentView(R.layout.xmlrectangle); } }
Multiple Shapes SHAPE1<shape xmlns:android=“XXX” type="oval" > <solid android:color="#FFFFCC55"/> <padding android:left="10sp" android:top="4sp" android:right="10sp" android:bottom="4sp" /> <stroke android:width="1dp" android:color="#FFFFFFFF"/> </shape> SHAPE5 <shape xmlns:android="http://schemas.android.com/apk/res/android" type="oval"> <gradient android:startColor="#FFFF0000" android:endColor="#80FF00FF" android:angle="270"/> <padding android:left="7dp" android:top="7dp" android:right="7dp" android:bottom="7dp" /> <corners android:radius="8dp" /> </shape>
Multiple Shapes SHAPE2<shape xmlns:android=“xxxxx"> <solid android:color="#FF0000FF"/> <stroke android:width="4dp" android:color="#FFFFFFFF" android:dashWidth="1dp" android:dashGap="2dp" /> <padding android:left="7dp" android:top="7dp" android:right="7dp" android:bottom="7dp" /> <corners android:radius="4dp" /> </shape> LINE <shape xmlns:android=“xxxx" type="line" > <solid android:color="#FF00FF00"/> <stroke android:width="1dp" android:color="#FFFFFFFF“ android:dashWidth="1dp" android:dashGap="2dp"/> <padding android:left="1dp" android:top="25dp" android:right="1dp" android:bottom="25dp"/> <size android:height="10dp"/> </shape>
Main Points (Frame Animation Example) • Bind resources to the ImageView. • Call the subclasses MyAnimationRoutine and MyAnimatinoRoutine2 which start and stop the Animation respectively. • MyAnimationRoutineextends TimerTask to allow for a wait time before it starts the animation. • MyAnimationRoutine2 extends TimerTask to allow for a wait time before it stops the animation from running.
