![Page 1: Mobile Programming Lecture 11 Animation and TraceView](https://reader035.vdocuments.us/reader035/viewer/2022081503/5697bf7b1a28abf838c838db/html5/thumbnails/1.jpg)
Mobile ProgrammingLecture 11
Animation and TraceView
![Page 2: Mobile Programming Lecture 11 Animation and TraceView](https://reader035.vdocuments.us/reader035/viewer/2022081503/5697bf7b1a28abf838c838db/html5/thumbnails/2.jpg)
Agenda
Animation
Animation Engines
TraceView
![Page 3: Mobile Programming Lecture 11 Animation and TraceView](https://reader035.vdocuments.us/reader035/viewer/2022081503/5697bf7b1a28abf838c838db/html5/thumbnails/3.jpg)
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
![Page 4: Mobile Programming Lecture 11 Animation and TraceView](https://reader035.vdocuments.us/reader035/viewer/2022081503/5697bf7b1a28abf838c838db/html5/thumbnails/4.jpg)
TranslateAnimation
Button myButton = findViewById(R.id.animButton);
TranslateAnimation animation = new TranslateAnimation(
myButton.getX(),
x,
myButton.getY(),
y);
animation.setDuration(500);
myButton.startAnimation(animation);
![Page 5: Mobile Programming Lecture 11 Animation and TraceView](https://reader035.vdocuments.us/reader035/viewer/2022081503/5697bf7b1a28abf838c838db/html5/thumbnails/5.jpg)
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
![Page 6: Mobile Programming Lecture 11 Animation and TraceView](https://reader035.vdocuments.us/reader035/viewer/2022081503/5697bf7b1a28abf838c838db/html5/thumbnails/6.jpg)
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
![Page 7: Mobile Programming Lecture 11 Animation and TraceView](https://reader035.vdocuments.us/reader035/viewer/2022081503/5697bf7b1a28abf838c838db/html5/thumbnails/7.jpg)
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
![Page 8: Mobile Programming Lecture 11 Animation and TraceView](https://reader035.vdocuments.us/reader035/viewer/2022081503/5697bf7b1a28abf838c838db/html5/thumbnails/8.jpg)
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
![Page 9: Mobile Programming Lecture 11 Animation and TraceView](https://reader035.vdocuments.us/reader035/viewer/2022081503/5697bf7b1a28abf838c838db/html5/thumbnails/9.jpg)
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
![Page 10: Mobile Programming Lecture 11 Animation and TraceView](https://reader035.vdocuments.us/reader035/viewer/2022081503/5697bf7b1a28abf838c838db/html5/thumbnails/10.jpg)
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
![Page 11: Mobile Programming Lecture 11 Animation and TraceView](https://reader035.vdocuments.us/reader035/viewer/2022081503/5697bf7b1a28abf838c838db/html5/thumbnails/11.jpg)
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
![Page 12: Mobile Programming Lecture 11 Animation and TraceView](https://reader035.vdocuments.us/reader035/viewer/2022081503/5697bf7b1a28abf838c838db/html5/thumbnails/12.jpg)
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
![Page 13: Mobile Programming Lecture 11 Animation and TraceView](https://reader035.vdocuments.us/reader035/viewer/2022081503/5697bf7b1a28abf838c838db/html5/thumbnails/13.jpg)
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
![Page 14: Mobile Programming Lecture 11 Animation and TraceView](https://reader035.vdocuments.us/reader035/viewer/2022081503/5697bf7b1a28abf838c838db/html5/thumbnails/14.jpg)
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
![Page 15: Mobile Programming Lecture 11 Animation and TraceView](https://reader035.vdocuments.us/reader035/viewer/2022081503/5697bf7b1a28abf838c838db/html5/thumbnails/15.jpg)
RotateAnimation
Button myButton = findViewById(R.id.animButton);
RotateAnimation animation = new RotateAnimation(0, 360);
animation.setDuration(500);
myButton.startAnimation(animation);
![Page 16: Mobile Programming Lecture 11 Animation and TraceView](https://reader035.vdocuments.us/reader035/viewer/2022081503/5697bf7b1a28abf838c838db/html5/thumbnails/16.jpg)
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
![Page 17: Mobile Programming Lecture 11 Animation and TraceView](https://reader035.vdocuments.us/reader035/viewer/2022081503/5697bf7b1a28abf838c838db/html5/thumbnails/17.jpg)
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
![Page 18: Mobile Programming Lecture 11 Animation and TraceView](https://reader035.vdocuments.us/reader035/viewer/2022081503/5697bf7b1a28abf838c838db/html5/thumbnails/18.jpg)
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
![Page 19: Mobile Programming Lecture 11 Animation and TraceView](https://reader035.vdocuments.us/reader035/viewer/2022081503/5697bf7b1a28abf838c838db/html5/thumbnails/19.jpg)
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"
![Page 20: Mobile Programming Lecture 11 Animation and TraceView](https://reader035.vdocuments.us/reader035/viewer/2022081503/5697bf7b1a28abf838c838db/html5/thumbnails/20.jpg)
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"
![Page 21: Mobile Programming Lecture 11 Animation and TraceView](https://reader035.vdocuments.us/reader035/viewer/2022081503/5697bf7b1a28abf838c838db/html5/thumbnails/21.jpg)
ScaleAnimation
Button myButton = findViewById(R.id.animButton);
ScaleAnimation animation = new ScaleAnimation(1, 2, 1, 2);
animation.setDuration(500);
myButton.startAnimation(animation);
![Page 22: Mobile Programming Lecture 11 Animation and TraceView](https://reader035.vdocuments.us/reader035/viewer/2022081503/5697bf7b1a28abf838c838db/html5/thumbnails/22.jpg)
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
![Page 23: Mobile Programming Lecture 11 Animation and TraceView](https://reader035.vdocuments.us/reader035/viewer/2022081503/5697bf7b1a28abf838c838db/html5/thumbnails/23.jpg)
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
![Page 24: Mobile Programming Lecture 11 Animation and TraceView](https://reader035.vdocuments.us/reader035/viewer/2022081503/5697bf7b1a28abf838c838db/html5/thumbnails/24.jpg)
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
![Page 25: Mobile Programming Lecture 11 Animation and TraceView](https://reader035.vdocuments.us/reader035/viewer/2022081503/5697bf7b1a28abf838c838db/html5/thumbnails/25.jpg)
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
![Page 26: Mobile Programming Lecture 11 Animation and TraceView](https://reader035.vdocuments.us/reader035/viewer/2022081503/5697bf7b1a28abf838c838db/html5/thumbnails/26.jpg)
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
![Page 27: Mobile Programming Lecture 11 Animation and TraceView](https://reader035.vdocuments.us/reader035/viewer/2022081503/5697bf7b1a28abf838c838db/html5/thumbnails/27.jpg)
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
![Page 28: Mobile Programming Lecture 11 Animation and TraceView](https://reader035.vdocuments.us/reader035/viewer/2022081503/5697bf7b1a28abf838c838db/html5/thumbnails/28.jpg)
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
![Page 29: Mobile Programming Lecture 11 Animation and TraceView](https://reader035.vdocuments.us/reader035/viewer/2022081503/5697bf7b1a28abf838c838db/html5/thumbnails/29.jpg)
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
![Page 30: Mobile Programming Lecture 11 Animation and TraceView](https://reader035.vdocuments.us/reader035/viewer/2022081503/5697bf7b1a28abf838c838db/html5/thumbnails/30.jpg)
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
![Page 31: Mobile Programming Lecture 11 Animation and TraceView](https://reader035.vdocuments.us/reader035/viewer/2022081503/5697bf7b1a28abf838c838db/html5/thumbnails/31.jpg)
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
![Page 32: Mobile Programming Lecture 11 Animation and TraceView](https://reader035.vdocuments.us/reader035/viewer/2022081503/5697bf7b1a28abf838c838db/html5/thumbnails/32.jpg)
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
![Page 33: Mobile Programming Lecture 11 Animation and TraceView](https://reader035.vdocuments.us/reader035/viewer/2022081503/5697bf7b1a28abf838c838db/html5/thumbnails/33.jpg)
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.
![Page 34: Mobile Programming Lecture 11 Animation and TraceView](https://reader035.vdocuments.us/reader035/viewer/2022081503/5697bf7b1a28abf838c838db/html5/thumbnails/34.jpg)
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
![Page 35: Mobile Programming Lecture 11 Animation and TraceView](https://reader035.vdocuments.us/reader035/viewer/2022081503/5697bf7b1a28abf838c838db/html5/thumbnails/35.jpg)
Animation
See AnimationExample.tar
![Page 36: Mobile Programming Lecture 11 Animation and TraceView](https://reader035.vdocuments.us/reader035/viewer/2022081503/5697bf7b1a28abf838c838db/html5/thumbnails/36.jpg)
Animations in XML
If you have Animations that you can set up before runtime, you can use an XML file
![Page 37: Mobile Programming Lecture 11 Animation and TraceView](https://reader035.vdocuments.us/reader035/viewer/2022081503/5697bf7b1a28abf838c838db/html5/thumbnails/37.jpg)
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
![Page 38: Mobile Programming Lecture 11 Animation and TraceView](https://reader035.vdocuments.us/reader035/viewer/2022081503/5697bf7b1a28abf838c838db/html5/thumbnails/38.jpg)
Animations in XML
You will end up with something like this
<?xml version="1.0" encoding="utf-8"?>
<rotate>
</rotate>
![Page 39: Mobile Programming Lecture 11 Animation and TraceView](https://reader035.vdocuments.us/reader035/viewer/2022081503/5697bf7b1a28abf838c838db/html5/thumbnails/39.jpg)
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
![Page 40: Mobile Programming Lecture 11 Animation and TraceView](https://reader035.vdocuments.us/reader035/viewer/2022081503/5697bf7b1a28abf838c838db/html5/thumbnails/40.jpg)
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
![Page 41: Mobile Programming Lecture 11 Animation and TraceView](https://reader035.vdocuments.us/reader035/viewer/2022081503/5697bf7b1a28abf838c838db/html5/thumbnails/41.jpg)
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
![Page 42: Mobile Programming Lecture 11 Animation and TraceView](https://reader035.vdocuments.us/reader035/viewer/2022081503/5697bf7b1a28abf838c838db/html5/thumbnails/42.jpg)
Animations in XML
button = (Button) findViewById(R.id.button1);
Animation rotateAnim = AnimationUtils.loadAnimation(
getApplicationContext(),
R.anim.full_rotate);
button.startAnimation(rotateAnim);
![Page 43: Mobile Programming Lecture 11 Animation and TraceView](https://reader035.vdocuments.us/reader035/viewer/2022081503/5697bf7b1a28abf838c838db/html5/thumbnails/43.jpg)
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
![Page 44: Mobile Programming Lecture 11 Animation and TraceView](https://reader035.vdocuments.us/reader035/viewer/2022081503/5697bf7b1a28abf838c838db/html5/thumbnails/44.jpg)
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
![Page 45: Mobile Programming Lecture 11 Animation and TraceView](https://reader035.vdocuments.us/reader035/viewer/2022081503/5697bf7b1a28abf838c838db/html5/thumbnails/45.jpg)
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
![Page 46: Mobile Programming Lecture 11 Animation and TraceView](https://reader035.vdocuments.us/reader035/viewer/2022081503/5697bf7b1a28abf838c838db/html5/thumbnails/46.jpg)
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
![Page 47: Mobile Programming Lecture 11 Animation and TraceView](https://reader035.vdocuments.us/reader035/viewer/2022081503/5697bf7b1a28abf838c838db/html5/thumbnails/47.jpg)
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
![Page 48: Mobile Programming Lecture 11 Animation and TraceView](https://reader035.vdocuments.us/reader035/viewer/2022081503/5697bf7b1a28abf838c838db/html5/thumbnails/48.jpg)
Animations in XML
button = (Button) findViewById(R.id.button1);
Animation rotateAnim = AnimationUtils.loadAnimation(
getApplicationContext(),
R.anim.full_rotate);
button.startAnimation(rotateAnim);
Start the Animation
![Page 49: Mobile Programming Lecture 11 Animation and TraceView](https://reader035.vdocuments.us/reader035/viewer/2022081503/5697bf7b1a28abf838c838db/html5/thumbnails/49.jpg)
Animations in XML
See AnimationFromXmlExample.tar
![Page 50: Mobile Programming Lecture 11 Animation and TraceView](https://reader035.vdocuments.us/reader035/viewer/2022081503/5697bf7b1a28abf838c838db/html5/thumbnails/50.jpg)
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
![Page 51: Mobile Programming Lecture 11 Animation and TraceView](https://reader035.vdocuments.us/reader035/viewer/2022081503/5697bf7b1a28abf838c838db/html5/thumbnails/51.jpg)
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);
![Page 52: Mobile Programming Lecture 11 Animation and TraceView](https://reader035.vdocuments.us/reader035/viewer/2022081503/5697bf7b1a28abf838c838db/html5/thumbnails/52.jpg)
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
![Page 53: Mobile Programming Lecture 11 Animation and TraceView](https://reader035.vdocuments.us/reader035/viewer/2022081503/5697bf7b1a28abf838c838db/html5/thumbnails/53.jpg)
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
![Page 54: Mobile Programming Lecture 11 Animation and TraceView](https://reader035.vdocuments.us/reader035/viewer/2022081503/5697bf7b1a28abf838c838db/html5/thumbnails/54.jpg)
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
![Page 55: Mobile Programming Lecture 11 Animation and TraceView](https://reader035.vdocuments.us/reader035/viewer/2022081503/5697bf7b1a28abf838c838db/html5/thumbnails/55.jpg)
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
![Page 56: Mobile Programming Lecture 11 Animation and TraceView](https://reader035.vdocuments.us/reader035/viewer/2022081503/5697bf7b1a28abf838c838db/html5/thumbnails/56.jpg)
Animations
See AnimationListenerExample.tar
![Page 57: Mobile Programming Lecture 11 Animation and TraceView](https://reader035.vdocuments.us/reader035/viewer/2022081503/5697bf7b1a28abf838c838db/html5/thumbnails/57.jpg)
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
![Page 58: Mobile Programming Lecture 11 Animation and TraceView](https://reader035.vdocuments.us/reader035/viewer/2022081503/5697bf7b1a28abf838c838db/html5/thumbnails/58.jpg)
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
![Page 59: Mobile Programming Lecture 11 Animation and TraceView](https://reader035.vdocuments.us/reader035/viewer/2022081503/5697bf7b1a28abf838c838db/html5/thumbnails/59.jpg)
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);
![Page 60: Mobile Programming Lecture 11 Animation and TraceView](https://reader035.vdocuments.us/reader035/viewer/2022081503/5697bf7b1a28abf838c838db/html5/thumbnails/60.jpg)
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);
![Page 61: Mobile Programming Lecture 11 Animation and TraceView](https://reader035.vdocuments.us/reader035/viewer/2022081503/5697bf7b1a28abf838c838db/html5/thumbnails/61.jpg)
Animations - Interpolators
See AnimationInterpolatorExample.tar
![Page 62: Mobile Programming Lecture 11 Animation and TraceView](https://reader035.vdocuments.us/reader035/viewer/2022081503/5697bf7b1a28abf838c838db/html5/thumbnails/62.jpg)
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
![Page 63: Mobile Programming Lecture 11 Animation and TraceView](https://reader035.vdocuments.us/reader035/viewer/2022081503/5697bf7b1a28abf838c838db/html5/thumbnails/63.jpg)
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);
![Page 64: Mobile Programming Lecture 11 Animation and TraceView](https://reader035.vdocuments.us/reader035/viewer/2022081503/5697bf7b1a28abf838c838db/html5/thumbnails/64.jpg)
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
![Page 65: Mobile Programming Lecture 11 Animation and TraceView](https://reader035.vdocuments.us/reader035/viewer/2022081503/5697bf7b1a28abf838c838db/html5/thumbnails/65.jpg)
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
![Page 66: Mobile Programming Lecture 11 Animation and TraceView](https://reader035.vdocuments.us/reader035/viewer/2022081503/5697bf7b1a28abf838c838db/html5/thumbnails/66.jpg)
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
![Page 67: Mobile Programming Lecture 11 Animation and TraceView](https://reader035.vdocuments.us/reader035/viewer/2022081503/5697bf7b1a28abf838c838db/html5/thumbnails/67.jpg)
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
![Page 68: Mobile Programming Lecture 11 Animation and TraceView](https://reader035.vdocuments.us/reader035/viewer/2022081503/5697bf7b1a28abf838c838db/html5/thumbnails/68.jpg)
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
![Page 69: Mobile Programming Lecture 11 Animation and TraceView](https://reader035.vdocuments.us/reader035/viewer/2022081503/5697bf7b1a28abf838c838db/html5/thumbnails/69.jpg)
Animations - AnimationSet
See AnimationSetExample.tar
![Page 70: Mobile Programming Lecture 11 Animation and TraceView](https://reader035.vdocuments.us/reader035/viewer/2022081503/5697bf7b1a28abf838c838db/html5/thumbnails/70.jpg)
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
![Page 71: Mobile Programming Lecture 11 Animation and TraceView](https://reader035.vdocuments.us/reader035/viewer/2022081503/5697bf7b1a28abf838c838db/html5/thumbnails/71.jpg)
Animations - Activities
See ActivityAnimationExample.tar
![Page 72: Mobile Programming Lecture 11 Animation and TraceView](https://reader035.vdocuments.us/reader035/viewer/2022081503/5697bf7b1a28abf838c838db/html5/thumbnails/72.jpg)
Animation Libraries
Universal Tween Engine
AndEngine
• Videos
![Page 73: Mobile Programming Lecture 11 Animation and TraceView](https://reader035.vdocuments.us/reader035/viewer/2022081503/5697bf7b1a28abf838c838db/html5/thumbnails/73.jpg)
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.
![Page 74: Mobile Programming Lecture 11 Animation and TraceView](https://reader035.vdocuments.us/reader035/viewer/2022081503/5697bf7b1a28abf838c838db/html5/thumbnails/74.jpg)
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
![Page 75: Mobile Programming Lecture 11 Animation and TraceView](https://reader035.vdocuments.us/reader035/viewer/2022081503/5697bf7b1a28abf838c838db/html5/thumbnails/75.jpg)
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.
![Page 76: Mobile Programming Lecture 11 Animation and TraceView](https://reader035.vdocuments.us/reader035/viewer/2022081503/5697bf7b1a28abf838c838db/html5/thumbnails/76.jpg)
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.
![Page 77: Mobile Programming Lecture 11 Animation and TraceView](https://reader035.vdocuments.us/reader035/viewer/2022081503/5697bf7b1a28abf838c838db/html5/thumbnails/77.jpg)
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.
![Page 78: Mobile Programming Lecture 11 Animation and TraceView](https://reader035.vdocuments.us/reader035/viewer/2022081503/5697bf7b1a28abf838c838db/html5/thumbnails/78.jpg)
TraceView - Debug Class
See TraceViewExample.tar
![Page 79: Mobile Programming Lecture 11 Animation and TraceView](https://reader035.vdocuments.us/reader035/viewer/2022081503/5697bf7b1a28abf838c838db/html5/thumbnails/79.jpg)
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/
![Page 80: Mobile Programming Lecture 11 Animation and TraceView](https://reader035.vdocuments.us/reader035/viewer/2022081503/5697bf7b1a28abf838c838db/html5/thumbnails/80.jpg)
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.
![Page 81: Mobile Programming Lecture 11 Animation and TraceView](https://reader035.vdocuments.us/reader035/viewer/2022081503/5697bf7b1a28abf838c838db/html5/thumbnails/81.jpg)
TraceView - DDMS
1. Select the process
2. Start Method Profiling
![Page 82: Mobile Programming Lecture 11 Animation and TraceView](https://reader035.vdocuments.us/reader035/viewer/2022081503/5697bf7b1a28abf838c838db/html5/thumbnails/82.jpg)
References
• The Busy Coder's Guide to Android Development - Mark Murphy
• Android Developers
• The Mobile Lab at Florida State University