Transcript 9781133597209_PPT_ch10x

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
Android Boot Camp for Developers using Java
2
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
Android Boot Camp for Developers using Java
3
Creating Animation
• Animation is everywhere
–
–
–
–
Words with Friends
Angry Birds
Cut the Rope
Roller Ball
• A motion tween is used
to animate the object
Figure 10-2 Wave Animation Android app using
– Specifies start state
Tween animation
– Transition type
– Number of times to animate
Android Boot Camp for Developers using Java
4
Creating Animation
(continued)
• Steps to complete the App:
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
Add the four images to the drawable folder.
Add a Frame animation XML file to the project.
Add the layout for the image and button objects in main.xml.
Set the duration between frames in the frame-by-frame
animation.
Declare and instantiate the ImageView, Button, and
AnimationDrawable controls.
Code the OnClickListeners for the Button controls.
Run the frame-by-frame Animation application.
Add a layout for an ImageView control for the Tween animation.
Add a Tween animation XML file to rotate the last surfing image.
Create a second Activity named Tween.java to launch the
rotation Tween animation.
When the application executes, change the orientation of the
emulator.
Android Boot Camp for Developers using Java
5
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
Android Boot Camp for Developers using Java
6
Adding the Layout for the Frame Image
and Button Controls
• 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)
Android Boot Camp for Developers using Java
7
Adding the Layout for the Frame Image
and Button Controls
(continued)
Figure 10-5 Two button controls in XML code
Android Boot Camp for Developers using Java
8
Adding the Layout for the Frame Image
and Button Controls
(continued)
• 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>
Android Boot Camp for Developers using Java
9
Coding the AnimationDrawable Object
• The AnimationDrawable class
– Contains methods to sequence frame-by-frame
images
Figure 10-10 Instantiating AnimationDrawable
Android Boot Camp for Developers using Java
10
Setting the Background Resource
• 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
Android Boot Camp for Developers using Java
11
Setting the Background Resource
(continued)
Figure 10-13 getBackground prepares the Animation drawable
Android Boot Camp for Developers using Java
12
Adding Two Button Controls
Figure 10-14 btFrame is the instance
of the first button
Figure 10-15 btTween is the instance of the second button
Android Boot Camp for Developers using Java
13
Adding Two Button Controls
(continued)
Figure 10-16 First button OnClickListener
Android Boot Camp for Developers using Java
14
Adding Two Button Controls
(continued)
Figure 10-17 Second button OnClickListener
Android Boot Camp for Developers using Java
15
Using the Start and Stop Methods
Figure 10-18 Entering the start()
method
Figure 10-19 Entering the stop() method
Android Boot Camp for Developers using Java
16
Using the Start and Stop Methods
(continued)
• Adding the Layout for the Tween Image
Figure 10-21 ImageView control coded in tween.xml
Android Boot Camp for Developers using Java
17
Using the Start and Stop Methods
(continued)
• Creating Tween Animation
– Tween effects are transitions that change
objects from one state to another
Table10-1 Tween animation effects
Android Boot Camp for Developers using Java
18
Using the Start and Stop Methods
(continued)
• 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 />
Android Boot Camp for Developers using Java
19
Using the Start and Stop Methods
(continued)
• Coding a Second Activity to Launch the
Tween Animation
Figure 10-25 Main.java launches the second Activity (complete code for Main.java)
Android Boot Camp for Developers using Java
20
Using the Start and Stop Methods
(continued)
• Coding a StartAnimation
Figure 10-26 onCreate method in Tween.java
Figure 10-27 tween.xml layout is set
Android Boot Camp for Developers using Java
21
Using the Start and Stop Methods
(continued)
Figure 10-28 ImageView is instantiated
Figure 10-29 Image rotates using Tween animation
(complete code for Tween.java)
Android Boot Camp for Developers using Java
22
Using the Start and Stop Methods
(continued)
• Updating the Android Manifest File
Figure 10-30 Adding the Tween Activity to the Android Manifest File
Android Boot Camp for Developers using Java
23
Using the Start and Stop Methods
(continued)
• Updating the Android Manifest File
Figure 10-31 Adding the theme to the Android Manifest File
Android Boot Camp for Developers using Java
24
Changing the Emulator to Landscape
Orientation
• 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
Android Boot Camp for Developers using Java
25
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
Android Boot Camp for Developers using Java
26
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
Android Boot Camp for Developers using Java
27
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
Android Boot Camp for Developers using Java
28
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
Android Boot Camp for Developers using Java
29
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
Android Boot Camp for Developers using Java
30