mobile programming lecture 11 animation and traceview
TRANSCRIPT
Mobile ProgrammingLecture 11
Animation and TraceView
Agenda
Animation
Animation Engines
TraceView
Animations
• TranslateAnimationo move an object
• RotateAnimationo rotate an object
• ScaleAnimationo resize an object
• AlphaAnimationo change alpha properties
• AnimationSeto a group of animations to be played together
TranslateAnimation
Button myButton = findViewById(R.id.animButton);
TranslateAnimation animation = new TranslateAnimation(
myButton.getX(),
x,
myButton.getY(),
y);
animation.setDuration(500);
myButton.startAnimation(animation);
TranslateAnimation
Button myButton = findViewById(R.id.animButton);
TranslateAnimation animation = new TranslateAnimation(
myButton.getX(),
x,
myButton.getY(),
y);
animation.setDuration(500);
myButton.startAnimation(animation);
Let's say we want to move some Button
TranslateAnimation
Button myButton = findViewById(R.id.animButton);
TranslateAnimation animation = new TranslateAnimation(
myButton.getX(),
x,
myButton.getY(),
y);
animation.setDuration(500);
myButton.startAnimation(animation);
We create an new TranslateAnimation, which allows us to move Views
TranslateAnimation
Button myButton = findViewById(R.id.animButton);
TranslateAnimation animation = new TranslateAnimation(
myButton.getX(),
x,
myButton.getY(),
y);
animation.setDuration(500);
myButton.startAnimation(animation);
The first argument is the position on the x axis of where we want it to start
TranslateAnimation
Button myButton = findViewById(R.id.animButton);
TranslateAnimation animation = new TranslateAnimation(
myButton.getX(),
x,
myButton.getY(),
y);
animation.setDuration(500);
myButton.startAnimation(animation);
2nd argument is where we want the animation to end on the x axis
TranslateAnimation
Button myButton = findViewById(R.id.animButton);
TranslateAnimation animation = new TranslateAnimation(
myButton.getX(),
x,
myButton.getY(),
y);
animation.setDuration(500);
myButton.startAnimation(animation);
3rd argument is where on the y axis we want the animation to start
TranslateAnimation
Button myButton = findViewById(R.id.animButton);
TranslateAnimation animation = new TranslateAnimation(
myButton.getX(),
x,
myButton.getY(),
y);
animation.setDuration(500);
myButton.startAnimation(animation);
4th argument is where we want the animation to end on the y axis
TranslateAnimation
Button myButton = findViewById(R.id.animButton);
TranslateAnimation animation = new TranslateAnimation(
myButton.getX(),
x,
myButton.getY(),
y);
animation.setDuration(500);
myButton.startAnimation(animation);
getX() gets the current position of the left of the Button
TranslateAnimation
Button myButton = findViewById(R.id.animButton);
TranslateAnimation animation = new TranslateAnimation(
myButton.getX(),
x,
myButton.getY(),
y);
animation.setDuration(500);
myButton.startAnimation(animation);
getRight() gets the current position of the very top of the Button
TranslateAnimation
Button myButton = findViewById(R.id.animButton);
TranslateAnimation animation = new TranslateAnimation(
myButton.getX(),
x,
myButton.getY(),
y);
animation.setDuration(500);
myButton.startAnimation(animation);
Here we set how long we want this Animation to last for, in milliseconds
TranslateAnimation
Button myButton = findViewById(R.id.animButton);
TranslateAnimation animation = new TranslateAnimation(
myButton.getX(),
x,
myButton.getY(),
y);
animation.setDuration(500);
myButton.startAnimation(animation);We call startAnimation on the View that we wish to animate, and pass the Animation as the argument
RotateAnimation
Button myButton = findViewById(R.id.animButton);
RotateAnimation animation = new RotateAnimation(0, 360);
animation.setDuration(500);
myButton.startAnimation(animation);
RotateAnimation
Button myButton = findViewById(R.id.animButton);
RotateAnimation animation = new RotateAnimation(0, 360);
animation.setDuration(500);
myButton.startAnimation(animation);
RotateAnimation allows us to ... rotate a View
RotateAnimation
Button myButton = findViewById(R.id.animButton);
RotateAnimation animation = new RotateAnimation(0, 360);
animation.setDuration(500);
myButton.startAnimation(animation);
1st argument is the rotation offset to apply in the beginning of the animation
RotateAnimation
Button myButton = findViewById(R.id.animButton);
RotateAnimation animation = new RotateAnimation(0, 360);
animation.setDuration(500);
myButton.startAnimation(animation);
2nd argument is the rotation offset to apply in the end of the animation
RotateAnimation
Button myButton = findViewById(R.id.animButton);
RotateAnimation animation = new RotateAnimation(0, 360);
animation.setDuration(500);
myButton.startAnimation(animation);
This will make the View that we apply the animation on do a "front flip"
RotateAnimation
Button myButton = findViewById(R.id.animButton);
RotateAnimation animation = new RotateAnimation(0, 360);
animation.setDuration(500);
myButton.startAnimation(animation);
This will make the View that we apply the animation on do a "front flip"
ScaleAnimation
Button myButton = findViewById(R.id.animButton);
ScaleAnimation animation = new ScaleAnimation(1, 2, 1, 2);
animation.setDuration(500);
myButton.startAnimation(animation);
ScaleAnimation
Button myButton = findViewById(R.id.animButton);
ScaleAnimation animation = new ScaleAnimation(1, 2, 1, 2);
animation.setDuration(500);
myButton.startAnimation(animation);
ScaleAnimation allows us to grow or shrink a View
ScaleAnimation
Button myButton = findViewById(R.id.animButton);
ScaleAnimation animation = new ScaleAnimation(1, 2, 1, 2);
animation.setDuration(500);
myButton.startAnimation(animation);
All arguments are scaling factors, where 1 means that the scale doesn't change
ScaleAnimation
Button myButton = findViewById(R.id.animButton);
ScaleAnimation animation = new ScaleAnimation(1, 2, 1, 2);
animation.setDuration(500);
myButton.startAnimation(animation);
1st argument is the scaling factor to apply horizontally, at the beginning of the animation
ScaleAnimation
Button myButton = findViewById(R.id.animButton);
ScaleAnimation animation = new ScaleAnimation(1, 2, 1, 2);
animation.setDuration(500);
myButton.startAnimation(animation);
2nd argument is the scaling factor to apply horizontally, at the end of the animation
ScaleAnimation
Button myButton = findViewById(R.id.animButton);
ScaleAnimation animation = new ScaleAnimation(1, 2, 1, 2);
animation.setDuration(500);
myButton.startAnimation(animation);
3rd argument is the scaling factor to apply vertically, at the beginning of the animation
ScaleAnimation
Button myButton = findViewById(R.id.animButton);
ScaleAnimation animation = new ScaleAnimation(1, 2, 1, 2);
animation.setDuration(500);
myButton.startAnimation(animation);
4th argument is the scaling factor to apply vertically, at the end of the animation
ScaleAnimation
Button myButton = findViewById(R.id.animButton);
ScaleAnimation animation = new ScaleAnimation(1, 2, 1, 2);
animation.setDuration(500);
myButton.startAnimation(animation);
This will double the size of the View, in both dimensions
ScaleAnimation
Button myButton = findViewById(R.id.animButton);
ScaleAnimation animation = new ScaleAnimation(1, 2, 1, 2);
animation.setDuration(500);
myButton.startAnimation(animation);
This will double the size of the View, in both dimensions
AlphaAnimation
Button myButton = findViewById(R.id.animButton);
AlphaAnimation animation = new AlphaAnimation(1.0, 0.0);
animation.setDuration(500);
myButton.startAnimation(animation);
AlphaAnimation allows us to animation the transparency of a View
AlphaAnimation
Button myButton = findViewById(R.id.animButton);
AlphaAnimation animation = new AlphaAnimation(1.0, 0.0);
animation.setDuration(500);
myButton.startAnimation(animation);
First argument is a float, which is the starting transparency value
AlphaAnimation
Button myButton = findViewById(R.id.animButton);
AlphaAnimation animation = new AlphaAnimation(1.0, 0.0);
animation.setDuration(500);
myButton.startAnimation(animation);
Second argument is the ending transparency value
AlphaAnimation
Button myButton = findViewById(R.id.animButton);
AlphaAnimation animation = new AlphaAnimation(1.0, 0.0);
animation.setDuration(500);
myButton.startAnimation(animation);
1.0 means no transparency, 0.0 means fully transparent.
AlphaAnimation
Button myButton = findViewById(R.id.animButton);
AlphaAnimation animation = new AlphaAnimation(1.0, 0.0);
animation.setDuration(500);
myButton.startAnimation(animation);
Applying this Animation on a View will fade it out completely
Animation
See AnimationExample.tar
Animations in XML
If you have Animations that you can set up before runtime, you can use an XML file
Animations in XML
To add a new XML animation file
• Right click on your project
• Add > New > Android XML File
• Resource Type: Tween Animation
• Enter the file name under File, e.g. full_rotate.xml
• Select a root element (.e.g. rotate)
• Done
Animations in XML
You will end up with something like this
<?xml version="1.0" encoding="utf-8"?>
<rotate>
</rotate>
Animations in XML
You will end up with something like this
<?xml version="1.0" encoding="utf-8"?>
<rotate >
</rotate>
Add a blank space after "rotate", then press Ctrl+Space to see what options are vailable
Animations in XML
You will end up with something like this
<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
android:fromDegrees="0"
android:toDegrees="360"
android:duration="500">
</rotate>
You may need to add this manually
Animations in XML
You will end up with something like this
<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
android:fromDegrees="0"
android:toDegrees="360"
android:duration="500">
</rotate>
Here we set the attributes for the Animation
Animations in XML
button = (Button) findViewById(R.id.button1);
Animation rotateAnim = AnimationUtils.loadAnimation(
getApplicationContext(),
R.anim.full_rotate);
button.startAnimation(rotateAnim);
Animations in XML
button = (Button) findViewById(R.id.button1);
Animation rotateAnim = AnimationUtils.loadAnimation(
getApplicationContext(),
R.anim.full_rotate);
button.startAnimation(rotateAnim); We need to inflate the XML file
Animations in XML
button = (Button) findViewById(R.id.button1);
Animation rotateAnim = AnimationUtils.loadAnimation(
getApplicationContext(),
R.anim.full_rotate);
button.startAnimation(rotateAnim);
This class allows you to perform common operations when working with Animations
Animations in XML
button = (Button) findViewById(R.id.button1);
Animation rotateAnim = AnimationUtils.loadAnimation(
getApplicationContext(),
R.anim.full_rotate);
button.startAnimation(rotateAnim);
Such as loading an Animation from an XML file
Animations in XML
button = (Button) findViewById(R.id.button1);
Animation rotateAnim = AnimationUtils.loadAnimation(
getApplicationContext(),
R.anim.full_rotate);
button.startAnimation(rotateAnim);
For the second argument, we pass the XML animation resource
Animations in XML
button = (Button) findViewById(R.id.button1);
Animation rotateAnim = AnimationUtils.loadAnimation(
getApplicationContext(),
R.anim.full_rotate);
button.startAnimation(rotateAnim);
This method returns a generic Animation object
Animations in XML
button = (Button) findViewById(R.id.button1);
Animation rotateAnim = AnimationUtils.loadAnimation(
getApplicationContext(),
R.anim.full_rotate);
button.startAnimation(rotateAnim);
Start the Animation
Animations in XML
See AnimationFromXmlExample.tar
Animations
• Views automatically revert back to their original states after Animations are complete!
• If you want to Animate a View, and have it maintain the state of the View at the end of the Animation, you need to use an AnimationListener
AnimationsAnimation anim = new TranslateAnimation(0, 0, 0, 300);
anim.setDuration(1000);
anim.setAnimationListener(new AnimationListener() {
@Override
public void onAnimationStart(Animation animation) { }
@Override
public void onAnimationRepeat(Animation animation) { }
@Override
public void onAnimationEnd(Animation animation) {
theText.setY(300);
}
});
theText.startAnimation(anim);
AnimationsAnimation anim = new TranslateAnimation(0, 0, 0, 300);
anim.setDuration(1000);
anim.setAnimationListener(new AnimationListener() {
@Override
public void onAnimationStart(Animation animation) { }
@Override
public void onAnimationRepeat(Animation animation) { }
@Override
public void onAnimationEnd(Animation animation) {
theText.setY(300);
}
});
theText.startAnimation(anim);
Animation for moving a View vertically by 300px
AnimationsAnimation anim = new TranslateAnimation(0, 0, 0, 300);
anim.setDuration(1000);
anim.setAnimationListener(new AnimationListener() {
@Override
public void onAnimationStart(Animation animation) { }
@Override
public void onAnimationRepeat(Animation animation) { }
@Override
public void onAnimationEnd(Animation animation) {
theText.setY(300);
}
});
theText.startAnimation(anim);
Use AnimationListener for events about the an Animation
AnimationsAnimation anim = new TranslateAnimation(0, 0, 0, 300);
anim.setDuration(1000);
anim.setAnimationListener(new AnimationListener() {
@Override
public void onAnimationStart(Animation animation) { }
@Override
public void onAnimationRepeat(Animation animation) { }
@Override
public void onAnimationEnd(Animation animation) {
theText.setY(300);
}
});
theText.startAnimation(anim);
When the animation ends, we want to set the Y position to 300px
AnimationsAnimation anim = new TranslateAnimation(0, 0, 0, 300);
anim.setDuration(1000);
anim.setAnimationListener(new AnimationListener() {
@Override
public void onAnimationStart(Animation animation) { }
@Override
public void onAnimationRepeat(Animation animation) { }
@Override
public void onAnimationEnd(Animation animation) {
theText.setY(300);
}
});
theText.startAnimation(anim);
When the animation ends, we want to set the Y position to 300px
Animations
See AnimationListenerExample.tar
Animations - Interpolators
Interpolators provide instructions on how an animation is supposed to behave while it is being executed
For example, you can have the animation be faster in the beginning than it is in the end
Animations - Interpolators
• AccelerateInterpolator
o slow -> fast
• AccelerateDecelerateInterpolator
o slow -> fast -> slow
• DecelerateInterpolator
o fast -> slow
• LinearInterpolator
o same speed all the way through
• CycleInterpolator
o repeat animation for x cycles
• BounceInterpolator
o Bouncing effect at the end
• OvershootIntepolator: goes beyond animation range then returns to
Animations - Interpolators
final TextView tv = (TextView) findViewById(R.id.textView1);
Animation anim = new RotateAnimation(0, 720); anim.setInterpolator(new BounceInterpolator());
anim.setDuration(2000);
tv.startAnimation(anim);
Animations - Interpolators
final TextView tv = (TextView) findViewById(R.id.textView1);
Animation anim = new RotateAnimation(0, 720); anim.setInterpolator(new BounceInterpolator());
anim.setDuration(2000);
tv.startAnimation(anim);
Animations - Interpolators
See AnimationInterpolatorExample.tar
Animations - AnimationSet
• There may be cases where you want to execute two animations at the same time
• In order to accomplish this, you need to use an AnimationSet
Animations - AnimationSet
AnimationSet animSet = new AnimationSet(true);
TranslateAnimation mover = new TranslateAnimation(0, 0, 0, 300);
AlphaAnimation fader = new AlphaAnimation(1.0f, 0.0f);
animSet.addAnimation(mover);
animSet.addAnimation(fader);
animSet.setDuration(4000);
animSet.setInterpolator(new CycleInterpolator(2.0f));
tv.startAnimation(animSet);
Animations - AnimationSet
AnimationSet animSet = new AnimationSet(true);
TranslateAnimation mover = new TranslateAnimation(0, 0, 0, 300);
AlphaAnimation fader = new AlphaAnimation(1.0f, 0.0f);
animSet.addAnimation(mover);
animSet.addAnimation(fader);
animSet.setDuration(4000);
animSet.setInterpolator(new CycleInterpolator(2.0f));
tv.startAnimation(animSet);
True if you want the Animations in the AnimationSet to share the Interpolator, false if you want each to have its own
Animations - AnimationSet
AnimationSet animSet = new AnimationSet(true);
TranslateAnimation mover = new TranslateAnimation(0, 0, 0, 300);
AlphaAnimation fader = new AlphaAnimation(1.0f, 0.0f);
animSet.addAnimation(mover);
animSet.addAnimation(fader);
animSet.setDuration(4000);
animSet.setInterpolator(new CycleInterpolator(2.0f));
tv.startAnimation(animSet);
Here we have two Animations
Animations - AnimationSet
AnimationSet animSet = new AnimationSet(true);
TranslateAnimation mover = new TranslateAnimation(0, 0, 0, 300);
AlphaAnimation fader = new AlphaAnimation(1.0f, 0.0f);
animSet.addAnimation(mover);
animSet.addAnimation(fader);
animSet.setDuration(4000);
animSet.setInterpolator(new CycleInterpolator(2.0f));
tv.startAnimation(animSet);
We add the Animations to the AnimationSet
Animations - AnimationSet
AnimationSet animSet = new AnimationSet(true);
TranslateAnimation mover = new TranslateAnimation(0, 0, 0, 300);
AlphaAnimation fader = new AlphaAnimation(1.0f, 0.0f);
animSet.addAnimation(mover);
animSet.addAnimation(fader);
animSet.setDuration(4000);
animSet.setInterpolator(new CycleInterpolator(2.0f));
tv.startAnimation(animSet);We set the duration and Interpolator on the entire set
Animations - AnimationSet
AnimationSet animSet = new AnimationSet(true);
TranslateAnimation mover = new TranslateAnimation(0, 0, 0, 300);
AlphaAnimation fader = new AlphaAnimation(1.0f, 0.0f);
animSet.addAnimation(mover);
animSet.addAnimation(fader);
animSet.setDuration(4000);
animSet.setInterpolator(new CycleInterpolator(2.0f));
tv.startAnimation(animSet);To start the Animation, we pass the AnimationSet
Animations - AnimationSet
See AnimationSetExample.tar
Animations - Activities
You can Animate the transition between Activities.
After calling startActivity() or finishActivity()
• call overridePendingTransition(R.anim.in, R.anim.out)
Where R.anim.in is an XML animation file for the entrance animation for the next Activity, and R.anim.out is the exit animation for the current Activity
Animations - Activities
See ActivityAnimationExample.tar
Animation Libraries
Universal Tween Engine
AndEngine
• Videos
TraceView
• Traceview is a graphical viewer for execution logs that you create by using the Debug class to log tracing information in your code
• it can help you debug your application and profile its performance.
TraceView
• When you have a trace log file (generated by adding tracing code to your application or by DDMS), you can have Traceview load the log files and display their data in a window visualizes your application in two panels:
• A timeline panel -- describes when each thread and method started and stopped
• A profile panel -- provides a summary of what happened inside a method
TraceView - Creating Trace Files
There are two ways to generate trace logs:
• Include the Debug class in your code and call its methods to start and stop logging of trace information to disk.
This method is very precise because you can specify in your code exactly where to start and stop logging trace data
• Use the method profiling feature of DDMS to generate trace logs. o This method is less precise since you do not modify code, but rather
specify when to start and stop logging with a DDMSo Although you have less control on exactly where the data is logged,
this method is useful if you don't have access to the application's code you do not need the precision of the first method.
TraceView - Debug Class
If you are using the Debug class, your device or emulator must have an SD card and your application must have permission to write to the SD card.
If you are using DDMS, Android 2.2 and later devices do not need an SD card. The trace log files are streamed directly to your development machine.
TraceView - Debug Class
To create the trace files
• include the Debug class and call one of the startMethodTracing() methodso specify a base name for the trace files that the system generates
To stop tracing, call stopMethodTracing()
• These methods start and stop method tracing across the entire virtual machineo e.g., you could call
startMethodTracing() in your activity's onCreate() method stopMethodTracing() in that activity's onDestroy() method.
TraceView - Debug Class
See TraceViewExample.tar
TraceView - Debug Class
To view the trace file, copy it onto your local machine using the command
adb pull /sdcard/tracename.trace /local_dir/tracename
• the adb command is located in the directoryo android-sdk-tools/platform-tools/
Now you can view the trace using traceview /local_dir/tracename
• the traceview command is located in the directoryandroid-sdk-tools/tools/
TraceView - DDMS
If you want to use DDMS to profile your app instead
• On the Devices tab, select the process that you want to enable method profiling for.
• Click the Start Method Profiling button.
• Interact with your application to start the methods that you want to profile.
• Click the Stop Method Profiling button. DDMS stops profiling your application and opens Traceview with the method profiling information that was collected between the time you clicked on Start Method Profiling and Stop Method Profiling.
TraceView - DDMS
1. Select the process
2. Start Method Profiling
References
• The Busy Coder's Guide to Android Development - Mark Murphy
• Android Developers
• The Mobile Lab at Florida State University