Mobile Computing With Android ACST 4550 Android Animation

Working with Animation Android supports several different kinds of animation. Two of the simplest varieties are: Frame-by-frame Frame-by-frame animation involves the display of a sequence of images in rapid succession using threads or handlers. Tweening Tweened animation involves applying standard graphical transformations such as rotations and fades on a single image. The Android SDK provides some helper utilities for loading and using animation resources. These are found in android.view.animation.AnimationUtils class.

Android Handlers and Threads Scheduling Handler tasks is accomplished in two ways: One approach uses the post(), postAtTime() and postDelayed() methods. The other approach uses the sendMessage(), sendEmptyMessage(), sendMessageAtTime(), and sendMessageDelayed() methods. The post versions allow you to enqueue Runnable objects to the message queue that will execute on the UI thread when they are dequeued. The sendMessage versions allow you to enqueue a Message object containing a Bundle of data that will be processed by the Handler's handleMessage(Message) method on the UI thread. This is the method we will be using.

Creating a Handler For SendMessage() Messages Handler handler = new Handler() { @Override public void handleMessage(Message msg) { switch (msg.what) { case 1: // Do work associated with message 1 break; case 2: // Do work associated with message 2 default: // Do default work } super.handleMessage(msg);

Creating a Message for a Handler You can create a Message to send to a Handler that contains data using the Bundle class in the following way for the 1st case statement in this example: Message message = new Message(); Bundle bundle = new Bundle(); bundle.putString("Message", someDataString); message.setData(bundle); message.what = 1; handler.sendMessage(message); “Message” is a key, and someDataString is a value paired with it. You can add many such key/value pairs this way. If you only have a single object to send you can use the Message.obtain() method to send your object as follows: handler.sendMessage(Message.obtain(handler, 2, someDataString)); If you have no Message object to send because you just need to trigger a certain case statement, you can use sendEmptyMessage as follow: handler.sendEmptyMessage(3);

Receiving a Message in a Handler The following shows how you would retrieve the data sent from the previous slide for case 1 (that used a Bundle), case 2 (that used Message.obtain) and case 3 (that used sendEmptyMessage): Handler handler = new Handler() { @Override public void handleMessage(Message msg) { switch (msg.what) { case 1: String msgStr = msg.getData().getString("Message"); // Do some work associated with the string break; case 2: String msgStr = (String) msg.obj; case 3: // No object was sent, so do some work without it } super.handleMessage(msg);

Putting a Message into the MessageQueue handler.sendMessage(Message) Sends a Message object to the handler’s handleMessage() method. handler.sendEmptyMessage(CaseNumber) Sends a null object to the handler triggering the given switch case number. handler.sendMessageDelayed(Message,4000) [or sendEmptyMessageDelayed()] Sends a Message object to the handler after 4 seconds (4000 millis) have passed. This is a simple way to implement a timer because you can have the matching case statement issue another sendMessageDelayed() call with the same time delay, which loops whatever action occurs at that case statement according to the delay time. handler.sendMessageAtTime(Message,nextTimeMillis) [or sendEmptyMessageAtTime()] Sends a Message object to the handler at nextTimeMillis, which is an absolute number of milliseconds since the start time. You can determine how many milliseconds have past since start time using SystemClock.uptimeMillis().

Using Handler Tasks for Animation Since Handler Tasks can access the UI thread, you can implement animations with Handlers instead of the Thread approach we used before. The following App shows how a Handler can make the Snowman’s arms wave and make the car drive around it: (They are in samplecode07.txt) See: SnowmanCarHandlerView.java See: TicTacToeGameView.java

Defining and Using Frame-by-Frame Animation Resources Frame-by-frame animation is often used when the content changes from frame to frame. This can be used for complex frame transitions—much like a kid’s flip-book. To define frame-by-frame resources, take the following steps: Save each frame graphic as an individual drawable resource. It may help to name your graphics sequentially, in the order in which they are displayed—for example, frame1.png, frame2.png, and so on. Define the animation set resource in an XML file within the res/drawable/ resource directory hierarchy. Load, start, and stop the animation programmatically.

Defining and Using Frame-by-Frame Animation Resources (Cont’d) <?xml version="1.0" encoding="utf-8" ?> <animation-list xmlns:android= "http://schemas.android.com/apk/res/android" android:oneshot="false"> <item android:drawable="@drawable/splash1" android:duration="500" /> <item android:drawable="@drawable/splash2" <item android:drawable="@drawable/splash3" </animation-list> Here’s an example of a simple frame-by-frame animation resource file called res/drawable/juggle.xml that defines a simple three-frame animation that takes 1.5 seconds to complete a single loop.

Defining and Using Frame-by-Frame Animation Resources (Cont’d) Frame-by-frame animation set resources defined with <animation-list> are represented by the Drawable subclass AnimationDrawable. The following code retrieves an AnimationDrawable resource called juggle: AnimationDrawable jugglerAnimation = (AnimationDrawable)getResources(). getDrawable(R.drawable.juggle); After you have a valid AnimationDrawable (android.graphics.drawable.AnimationDrawable), you can assign it to a View control on the screen and start and stop animation.

Defining and Using Tweened Animation Resources Tweened animation features include: Scaling Fading Rotation Translation These actions can be applied simultaneously or sequentially and might use different interpolators. Tweened animation sequences are not tied to a specific graphics file, so you can write one sequence and then use it for a variety of different graphics. For example: You can make moon, star, and diamond graphics all pulse using a single scaling sequence, or you can make them spin using a rotate sequence.

Defining Tweened Animation Sequence Resources in XML Graphic animation sequences can be stored as specially formatted XML files in the res/anim/ directory and are compiled into the application binary at build time. Here’s an example of a simple animation resource file called res/anim/spin.xml that defines a simple rotate operation—rotating the target graphic counterclockwise four times in place, taking 10 seconds to complete: <?xml version="1.0" encoding="utf-8" ?> <set xmlns:android="http://schemas.android.com/apk/res/android" android:shareInterpolator="false"> <rotate android:fromDegrees="0" android:toDegrees="-1440" android:pivotX="50%" android:pivotY="50%" android:duration="10000" /> </set>

Using Tweened Sequence Resources Programmatically If we go back to the earlier example of a BitmapDrawable, we can now include some animation simply by adding the following code to load the animation resource file spin.xml and set the animation in motion: ImageView flagImageView = (ImageView)findViewById(R.id.ImageView01); flagImageView.setImageResource(R.drawable.flag); ... Animation an = AnimationUtils.loadAnimation(this, R.anim.spin); flagImageView.startAnimation(an); Now you have your graphic spinning. Notice that we loaded the animation using the base class object Animation.

Using Tweened Sequence Resources Programmatically (Cont’d) You can also extract specific animation types using the subclasses that match: RotateAnimation ScaleAnimation TranslateAnimation AlphaAnimation These are found in the android.view.animation package. There are a number of different interpolators you can use with your tweened animation sequences.