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



myButton.getX(),

x,

myButton.getY(),

y);



Let's say we want to move some Button

TranslateAnimation



myButton.getX(),

x,

myButton.getY(),

y);



We create an new TranslateAnimation, which allows us to move Views

TranslateAnimation



myButton.getX(),

x,

myButton.getY(),

y);



The first argument is the position on the x axis of where we want it to start

TranslateAnimation



myButton.getX(),

x,

myButton.getY(),

y);



2nd argument is where we want the animation to end on the x axis

TranslateAnimation



myButton.getX(),

x,

myButton.getY(),

y);



3rd argument is where on the y axis we want the animation to start

TranslateAnimation



myButton.getX(),

x,

myButton.getY(),

y);



4th argument is where we want the animation to end on the y axis

TranslateAnimation



myButton.getX(),

x,

myButton.getY(),

y);



getX() gets the current position of the left of the Button

TranslateAnimation



myButton.getX(),

x,

myButton.getY(),

y);



getRight() gets the current position of the very top of the Button

TranslateAnimation



myButton.getX(),

x,

myButton.getY(),

y);



Here we set how long we want this Animation to last for, in milliseconds

TranslateAnimation



myButton.getX(),

x,

myButton.getY(),

y);


myButton.startAnimation(animation);We call startAnimation on the View that we wish to animate, and pass the Animation as the argument

RotateAnimation


RotateAnimation animation = new RotateAnimation(0, 360);



RotateAnimation





RotateAnimation allows us to ... rotate a View

RotateAnimation





1st argument is the rotation offset to apply in the beginning of the animation

RotateAnimation





2nd argument is the rotation offset to apply in the end of the animation

RotateAnimation





This will make the View that we apply the animation on do a "front flip"

RotateAnimation





This will make the View that we apply the animation on do a "front flip"

ScaleAnimation


ScaleAnimation animation = new ScaleAnimation(1, 2, 1, 2);



ScaleAnimation





ScaleAnimation allows us to grow or shrink a View

ScaleAnimation





All arguments are scaling factors, where 1 means that the scale doesn't change

ScaleAnimation





1st argument is the scaling factor to apply horizontally, at the beginning of the animation

ScaleAnimation





2nd argument is the scaling factor to apply horizontally, at the end of the animation

ScaleAnimation





3rd argument is the scaling factor to apply vertically, at the beginning of the animation

ScaleAnimation





4th argument is the scaling factor to apply vertically, at the end of the animation

ScaleAnimation





This will double the size of the View, in both dimensions

ScaleAnimation





This will double the size of the View, in both dimensions

AlphaAnimation


AlphaAnimation animation = new AlphaAnimation(1.0, 0.0);



AlphaAnimation allows us to animation the transparency of a View

AlphaAnimation





First argument is a float, which is the starting transparency value

AlphaAnimation





Second argument is the ending transparency value

AlphaAnimation





1.0 means no transparency, 0.0 means fully transparent.

AlphaAnimation





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



<rotate >

</rotate>

Add a blank space after "rotate", then press Ctrl+Space to see what options are vailable

Animations in XML



<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



<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.startAnimation(rotateAnim); We need to inflate the XML file

Animations in XML






This class allows you to perform common operations when working with Animations

Animations in XML






Such as loading an Animation from an XML file

Animations in XML






For the second argument, we pass the XML animation resource

Animations in XML






This method returns a generic Animation object

Animations in XML






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);




@Override


@Override


@Override


theText.setY(300);

}

});


Animation for moving a View vertically by 300px




@Override


@Override


@Override


theText.setY(300);

}

});


Use AnimationListener for events about the an Animation




@Override


@Override


@Override


theText.setY(300);

}

});


When the animation ends, we want to set the Y position to 300px




@Override


@Override


@Override


theText.setY(300);

}

});


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


• 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


final TextView tv = (TextView) findViewById(R.id.textView1);

Animation anim = new RotateAnimation(0, 720); anim.setInterpolator(new BounceInterpolator());


tv.startAnimation(anim);


final TextView tv = (TextView) findViewById(R.id.textView1);

Animation anim = new RotateAnimation(0, 720); anim.setInterpolator(new BounceInterpolator());


tv.startAnimation(anim);


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


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










Here we have two Animations










We add the Animations to the AnimationSet









tv.startAnimation(animSet);We set the duration and Interpolator on the entire set









tv.startAnimation(animSet);To start the Animation, we pass the 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

https://play.google.com/store/apps/details?id=aurelienribon.tweenengine.demo&feature=nav_result

https://play.google.com/store/apps/details?id=org.anddev.andengine.examples&feature=search_result

http://www.andengine.org/blog/

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.

http://developer.android.com/reference/android/os/Debug.html

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.



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.


See TraceViewExample.tar


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

http://commonsware.com/

http://commonsware.com/

http://developer.android.com/

http://en.wikipedia.org/wiki/Event-driven_programming

Documents

Mobile Programming Lecture 11 Animation and TraceView