chapter 10: move! creating animation. objectives in this chapter, you learn to: create an android...
TRANSCRIPT
Chapter 10: Move! Creating Animation
Objectives
In this chapter, you learn to:• Create an Android application with Frame and Tween
animation• Understand Frame animation• Understand Tween animation• Add an animation-list XML file• Code the AnimationDrawable object• Set the background Drawable resource• Launch the start( ) and stop( ) methods
2Android Boot Camp for Developers using Java
Objectives (continued)
• Add Tween animation to the application• Create a Tween XML file that rotates an image• Determine the rotation pivot, duration, and repeat count
of a Tween animation• Load the startActivity Tween animation in a second
Activity• Change the orientation of the emulator
3Android Boot Camp for Developers using Java
Creating Animation
• Animation is everywhere– Words with Friends– Angry Birds– Cut the Rope– Roller Ball
• A motion tween is usedto animate the object– Specifies start state– Transition type– Number of times to animate
4Android Boot Camp for Developers using Java
Figure 10-2 Wave Animation Android app using Tween animation
Creating Animation (continued)
• Steps to complete the App:1. Add the four images to the drawable folder.
2. Add a Frame animation XML file to the project.
3. Add the layout for the image and button objects in main.xml.
4. Set the duration between frames in the frame-by-frame animation.
5. Declare and instantiate the ImageView, Button, and AnimationDrawable controls.
6. Code the OnClickListeners for the Button controls.
7. Run the frame-by-frame Animation application.
8. Add a layout for an ImageView control for the Tween animation.
9. Add a Tween animation XML file to rotate the last surfing image.
10. Create a second Activity named Tween.java to launch the rotation Tween animation.
11. When the application executes, change the orientation of the emulator.
5Android Boot Camp for Developers using Java
Android Animation
• Two types of animation for Android:– Frame animation
• A sequence of photos playing as a slide show• Similar to cartoon animation• Images rapidly replaced by new, similar images
– Tween animation• Created by a series of transformations on a single
image• Transformations include position, size, shape rotation,
color, and transparency
6Android Boot Camp for Developers using Java
Adding the Layout for the Frame Image and Button Controls
7Android Boot Camp for Developers using Java
• This app requires nested layout – relative layout within a linear layout– Linear layout
• ImageView control displays the animation images– Relative layout
• Buttons arranged side by side (not allowed in linear layout)
8Android Boot Camp for Developers using Java
Figure 10-5 Two button controls in XML code
Adding the Layout for the Frame Image and Button Controls (continued)
Adding the Layout for the Frame Image and Button Controls (continued)
9Android Boot Camp for Developers using Java
• Creating Frame-by-frame Animation– Animation-list root element is needed to reference images
stored in the drawable folders• Set the android:oneshot property to false for the animation
plays repeatedly
<?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/surf1" android:duration="100"/><item android:drawable="@drawable/surf2" android:duration="100"/><item android:drawable="@drawable/surf3" android:duration="100"/><item android:drawable="@drawable/surf4" android:duration="100"/></animation-list>
• The AnimationDrawable class– Contains methods to sequence frame-by-frame
images
Coding the AnimationDrawable Object
10Android Boot Camp for Developers using Java
Figure 10-10 Instantiating AnimationDrawable
Setting the Background Resource
11Android Boot Camp for Developers using Java
• Image backgrounds can be set to:– A 9-patch image
• Contains pre-defined stretching areas that maintain the same look on different screen sizes
• Named for the nine areas, called patches, that scale separately
– A solid color background
Setting the Background Resource (continued)
12Android Boot Camp for Developers using Java
Figure 10-13 getBackground prepares the Animation drawable
Adding Two Button Controls
13Android Boot Camp for Developers using Java
Figure 10-14 btFrame is the instance of the first button
Figure 10-15 btTween is the instance of the second button
Adding Two Button Controls (continued)
14Android Boot Camp for Developers using Java
Figure 10-16 First button OnClickListener
Adding Two Button Controls (continued)
15Android Boot Camp for Developers using Java
Figure 10-17 Second button OnClickListener
Using the Start and Stop Methods
16Android Boot Camp for Developers using Java
Figure 10-18 Entering the start() method
Figure 10-19 Entering the stop() method
Using the Start and Stop Methods (continued)
17Android Boot Camp for Developers using Java
• Adding the Layout for the Tween Image
Figure 10-21 ImageView control coded in tween.xml
Using the Start and Stop Methods (continued)
18Android Boot Camp for Developers using Java
• Creating Tween Animation– Tween effects are transitions that change
objects from one state to another
Table10-1 Tween animation effects
Using the Start and Stop Methods (continued)
19Android Boot Camp for Developers using Java
• Coding a Tween Rotation XML File
<?xml version="1.0" encoding="utf-8"?><rotate xmlns:android="http://schemas.android.com/apk/res/android" android:fromDegrees="0"android:toDegrees="359" android:pivotX="50%" android:pivotY="50%" android:duration="2000" android:repeatCount="5"rotate />
Using the Start and Stop Methods (continued)
20Android Boot Camp for Developers using Java
• Coding a Second Activity to Launch the Tween Animation
Figure 10-25 Main.java launches the second Activity (complete code for Main.java)
Using the Start and Stop Methods (continued)
21Android Boot Camp for Developers using Java
• Coding a StartAnimation
Figure 10-26 onCreate method in Tween.java
Figure 10-27 tween.xml layout is set
Using the Start and Stop Methods (continued)
22Android Boot Camp for Developers using Java
Figure 10-28 ImageView is instantiated
Figure 10-29 Image rotates using Tween animation (complete code for Tween.java)
• Updating the Android Manifest File
Using the Start and Stop Methods (continued)
23Android Boot Camp for Developers using Java
Figure 10-30 Adding the Tween Activity to the Android Manifest File
• Updating the Android Manifest File
Using the Start and Stop Methods (continued)
24Android Boot Camp for Developers using Java
Figure 10-31 Adding the theme to the Android Manifest File
Changing the Emulator to Landscape Orientation
25Android Boot Camp for Developers using Java
• Most Android devices automatically rotate the display from portrait to landscape when the user turns the device
• The default screen orientation layout is vertical• Ctrl + F12 rotates the phone emulator to landscape
orientation• You can also press the 7 key on the keypad when
Num Lock is turned off
Running and Testing the Application
• Click Run on the menu bar• Select Android Application from the dialog box• Save all the files when prompted• Unlock the emulator (if necessary)• Click the Start Frame Animation and begin the
rotation – The animation should rotate six times and then end
26Android Boot Camp for Developers using Java
Summary
• Frame animation and Tween animation are the two types of animation provided by Android
• Nest a relative layout within a linear layout to display two controls side by side
• To create frame animation, load images in a drawable folder and then create an animation list
• Set the oneshot property of the animation-list to false to repeatedly play the animation
• In the XML file, select drawable as the resource type and animation-list as the root element
27Android Boot Camp for Developers using Java
Summary (continued)
• Frame-based animations and image transitions are defined as drawables in Android Development
• The Background property can be set to any full drawable resource
• Main.java includes an instance of AnimationDrawable and assigns it as the background of the animation images. Android constructs an AnimationDrawable Java object before setting it as the background
28Android Boot Camp for Developers using Java
Summary (continued)
• Use the start( ) and stop( ) methods of the drawable objects to control a Frame animation
• A Tween animation manipulates a Drawable image by adding tween effects, which are predefined transitions that change an object from one state to another
• The XML file for a Tween animation defines rotate attributes such as the number of degrees to spin, the pivot location, the rotation duration, and the number of times to repeat the rotation
29Android Boot Camp for Developers using Java
Summary (continued)
• To launch a Tween animation, use the startAnimation method, which begins animating a View object by calling the AnimationUtils class utilities to access the resources it needs to play the animation
• To switch the emulator to use a landscape orientation on a PC, press the Ctrl+F12 keys. To rotate the emulator to the original portrait position, press the Ctrl+F12 keys again. Mac users can press the Fn+Ctrl+F12 keys to change the orientation
30Android Boot Camp for Developers using Java