0 évaluation0% ont trouvé ce document utile (0 vote)
8 vues8 pages
Android provides several different view animation support classes. Transition Drawable class specifies a two layer drawable. Animation Drawable class creates frame-by-frame animations. Animation class creates tween animations, where you specify moments in the animation and Android interpolates or fills in the points in between.
Android provides several different view animation support classes. Transition Drawable class specifies a two layer drawable. Animation Drawable class creates frame-by-frame animations. Animation class creates tween animations, where you specify moments in the animation and Android interpolates or fills in the points in between.
Android provides several different view animation support classes. Transition Drawable class specifies a two layer drawable. Animation Drawable class creates frame-by-frame animations. Animation class creates tween animations, where you specify moments in the animation and Android interpolates or fills in the points in between.
And this is Programming Mobile Applications for Android handheld systems. In the bubble view examples that we just saw, I demonstrated a simple kind of animation. I took a single view, and I changed some of its properties. Specifically, its location, and orientation, and I did this over a period of time. Animations like this are fairly common. Applications often animate changes to thing to properties of a view like it's size, it's position, it's transparency, it's orientation, and more. To make animation easier Android provides several different view animation support classes and three that we'll talk about now are the Transition Drawable class for animating a transition between two views, the Animation Drawable for creating frame-by-frame animations, and the Animation class for creating tween animations, where you specify certain frames or moments in the animation and Android interpolates or fills in the points in between. Let's look at each of these classes one at a time. The first animation class we'll discuss is the Transition Drawable. This class specifies a two layer drawable, and when it's displayed, the user sees the first layer, and then a bit later, sees the second layer. Our example application is called Graphics Transition Drawable, and this application takes us back to the Graphics Shape Draw applications that we saw earlier. But this time, instead displaying both shapes at the same time, this application first displays the leftmost cyan colored shape, which then fades into a display of the rightmost magenta colored shape. Let's see how that works. So here's my device, and when I start up the Graphics Transition Drawable application you'll see the first shape fading into the second. So here we go. Here's the first shape, and here's the second. So let's take a look at the source code. So here's the Graphics Transition Drawable application, open in the IDE. Now I'll open the main activity. In OnCreate, this application loads a transition drawable from a file called shape_transition.xml. Let's open that file. This file defines a transition resource. Resources of this type can have up to two item tags, and each item tag describes one drawable. In this case, the drawables are our familiar cyan and magenta shapes. Now, back in the main activity, the code calls set crossfade enabled with the parameter true, and this causes the first drawable to visually fade into the second drawable. Next, the code sets the transition, as the drawable for the image view, by calling set image drawable, and then finally, it calls start on the transition, passing in a value of 5000 for the animation's duration. The next kind of animation that we'll talk about is the Animation Drawable. This drawable animates a series of other drawables, showing each one for some period of time. Our next example application is called Graphics Frame Animation. This application uses an Animation Drawable to display a kind of splash screen, which itself presents a series of images counting down to the start of the main application. Let's see what this does. [BLANK_AUDIO] So here's my device. When I start up the graphics frame animation application, you'll see a series of images, counting down to a final image. Okay, let's get started. Nine, eight, seven, six, five, four, three, two, one, and finally, the image we've all been waiting for. So let's go to the source code for this application. So here's the Graphics Frame Animation application open in the IDE. Now I'll open the main activity and in OnCreate this application loads an Animation Drawable from a file called view_animation.xml. And then it sets that animation drawable as the background on an image view. This code then stores that drawable in a variable called mAnim. And before we go forward, let's take a look at the view_animation.xml file. So here's the view_animation.xml file and this file defines an animation list resource. This resource contains a list of item tags, where each tag represents a drawable, and in this case, the first drawable is just a black screen, and that displays for one second, and this is followed by nine other images, each of which is displayed also for one second. Now back in the main activity, the code waits until the on window focus changed method is called, and this method is called when the applications window gains or loses focus. In this method the code first checks whether the window is currently gaining focus and if it is it then starts the animation. Next class is the animation class, and this class is used to create animations in which transformations are applied to the contents of a view. Applications can play with the timing of these transformations to sequence and combine different transformations to make more complex animations. The graphics Tween Animation application demonstrates the use of the animation class. When this application runs, it displays a bubble view and then proceeds to animate a number of changes to that bubble. Let's see it in action. So here's my device. When I start up the Graphics Tween Animation application you'll see the bubble, and then you'll see a series of transformations applied to that bubble. You'll see it fade in, rotate, move, change its size, and finally, fade out, and you'll also see that the timing of these transformations is not always linear. That is, some transformations will happen at a uniform pace, some will start slow and build up speed, some will start fast and then reduce their speed, some will both speed up and slow down at different points in the animation. Now, I'll slow down the video here a little bit, so you can see these effects more clearly. So, here we go, first the bubble fades in and next the bubble rotates twice, getting faster as it goes. Now the bubble will move, overshoot its final position and then pull back a bit. After that, the bubble will shrink a bit before quickly doubling its size, and finally the bubble fades out of view, quickly at first, and then more slowly near the end. Let's take a look at the source code for this application. So here's the Graphics Tween Animation application open in the IDE. Now, I'll open the main activity. And this application sets the, calls setContentView, passing in the main.xml file. And then it finds an image view in that layout. And after that it reads an animation from the view_animation.xml file which is stored in the res/Anim directory. Here's the resource and nested within the set tag there are several other tags, each of which indicates a specific transformation to be applied to the view. The first is an alpha transformation, the duration of the animation is three seconds. It goes from an alpha of zero, or completely transparent, to an alpha of one, completely opaque. The transformation also uses the linear interpolator, so the effect is applied uniformly throughout the animation. The next tag is a rotate transformation. The duration is set to four seconds, but it's also set to start only after three seconds have passed. So, the first transformation will occur and finish, and then this one will start up. This animation goes from 0 to 720 degrees, or two full turns, and its interpolator accelerates, or speeds, up as the animation proceeds and you can look at all the other tags on your own when we take a break. Going back now to the main activity, let's go to the on window focus changed method. Again, this code checks to see if the window is currently gaining focus, and if so, it starts the animation. [BLANK_AUDIO] The last concept I'll talk about is property animation. The previous examples showed classes that are designed to animate a set of simple property changes on views. But sometimes, you want to animate more than just those things and to support that, Android has developed a system for changing general ,properties of generic objects over a given period of time, and this system of Property Animation has several components. First, there is a Value Animator, and this is the main class that controls the animation. The Value Animator contains a time interpolator which determines how values change as a function of time. For instance, over time do the changes happen uniformly, do they speed up, slow down, or use some combination of the two? Value Animator also defines a listener interface called Animator Update Listener, and this interface defines the on animation update method which gets called each time a new animation frame is created. And lastly, while Android knows how to animate the values of common types, like imagers or floats, it doesn't know how to animate custom types that you create. So if you need to animate your own types, or animate existing types in new ways you can implement the Type Evaluator Interface. This interface defines an Evaluate method that gets called to set the animation values at a particular point in the animation. The last piece of property animation is the Animator Set Class. This class allows you to combine animator objects, like the value animator we just discussed, into more complex animations. So let's look at some example applications that make use of property animation. The first of these applications is called Graphics Value Animator, and this application uses a value animator to animate a change in the background color of an image view. Let's watch this application. So here's my device. I'll now start up the graphics value animator application. And as you can see it presents a single button labeled Animate. When I press that button, a red rectangle will appear in the middle of the display, and over a period of about ten seconds, that rectangle will change color until it's finally blue. I'll press the button now. There's the red rectangle. And now let's watch as it slowly turns blue. Let's open the source code and see how we did that. So here's the graphics value animator application open in the IDE. Now I'll open the main activity. This application starts by setting two integer values, which represent the starting and ending points for the animation. The first value is the integer representation of the color red. The second value is the integer representation of the color blue. In OnCreate, the code creates a button that will start the animation, and as you see here, when the button is clicked, the start animation method is run. Let's look at that method. Here, the start animation method creates a value animated object called anim, and it created that object by calling the value animators of object method. The first parameter for this method is a type evaluator, in this case the type evaluator is actually a, an ARGB evaluator object, and this class knows how to interpolate the integer representations of colors. The second and third parameters for the of object method are the starting and ending points for the animation, the colors red and blue. Next the code adds an Animator Update Listener and that is going to be called back each time new animation frames are created and that code calls the Get Animated Value method to retrieve the current color value, and then it makes that color the background color of the image view, which is shown in the layout. And lastly this code sets the duration of ten seconds for the animation, and then starts the animation running. Let's also look at a second property animation application, called Graphics View Property Animator. This application will implement the same application we created for the Graphics Tween Animation application. You'll see a bubble that fades in, rotates, moves, resizes, and then fades out. And this version of the application, however, will use the view property animator class, which is a simplified kind of animator for just view properties. Let's see that application in action. So here's my device. And I'll start up the Graphics View Property Animator application. And we'll watch as the bubble goes through a series of transformations. Here we go. [BLANK_AUDIO] Let's open up the source code for this application. So here's the Graphics View Property Animator application open in the IDE. Now I'll open the main activity. And let's scroll over to the on window focus changed method. When this method is called, the application insures that the activity window is gaining focus and if so, it calls the run method of the fade in object, and that fade in object is a runnable. Now inside its run method, its code calls animate on the image view, which returns a view property animator object. This object, or this class, uses a fluent interface, like what we saw with the notification area notifications. And so you can build an animation by tacking on various method calls. In this case, the next call is set duration to three seconds, then set interpolator to the linear interpolater, then a call to the alpha method to change the transparency to fully opaque and then a final call which tells the View Property Animator that when this animation ends it should invoke the run method of another runnable called rotate. And, as you can probably guess, this rotate runnable creates the rotation step of the animation, and then it ends by calling the movement step of the animation, and this continues until all of the steps have been completed. So that's all for our lesson on graphics and animation. See you next time for a lesson on multi-touch and gestures. See you then. [BLANK_AUDIO]