Mobile Programming Lecture 11 Animation and TraceView

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