Presentation is loading. Please wait.

Presentation is loading. Please wait.

Mobile Programming Lecture 11 Animation and TraceView.

Published byMarshall Dorsey Modified over 9 years ago

Similar presentations

Presentation on theme: "Mobile Programming Lecture 11 Animation and TraceView."— Presentation transcript:

1 Mobile Programming Lecture 11 Animation and TraceView

2 Agenda Animation Animation Engines TraceView

3 Animations TranslateAnimation o move an object RotateAnimation o rotate an object ScaleAnimation o resize an object AlphaAnimation o change alpha properties AnimationSet o a group of animations to be played together

4 TranslateAnimation Button myButton = findViewById(R.id.animButton); TranslateAnimation animation = new TranslateAnimation( myButton.getX(), x, myButton.getY(), y); animation.setDuration(500); myButton.startAnimation(animation);

5 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

6 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

7 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

8 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

9 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

10 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

11 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

12 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

13 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

14 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

15 RotateAnimation Button myButton = findViewById(R.id.animButton); RotateAnimation animation = new RotateAnimation(0, 360); animation.setDuration(500); myButton.startAnimation(animation);

16 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

17 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

18 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

19 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"

20 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"

21 ScaleAnimation Button myButton = findViewById(R.id.animButton); ScaleAnimation animation = new ScaleAnimation(1, 2, 1, 2); animation.setDuration(500); myButton.startAnimation(animation);

22 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

23 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

24 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

25 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

26 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

27 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

28 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

29 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

30 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

31 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

32 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

33 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.

34 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

35 Animation See AnimationExample.tar

36 Animations in XML If you have Animations that you can set up before runtime, you can use an XML file

37 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

38 Animations in XML You will end up with something like this

39 Animations in XML You will end up with something like this Add a blank space after "rotate", then press Ctrl+Space to see what options are vailable

40 Animations in XML You will end up with something like this <rotate xmlns:android="http://schemas.android.com/apk/res/android" android:fromDegrees="0" android:toDegrees="360" android:duration="500"> You may need to add this manually

41 Animations in XML You will end up with something like this <rotate xmlns:android="http://schemas.android.com/apk/res/android" android:fromDegrees="0" android:toDegrees="360" android:duration="500"> Here we set the attributes for the Animation

42 Animations in XML button = (Button) findViewById(R.id.button1); Animation rotateAnim = AnimationUtils.loadAnimation( getApplicationContext(), R.anim.full_rotate); button.startAnimation(rotateAnim);

43 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

44 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

45 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

46 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

47 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

48 Animations in XML button = (Button) findViewById(R.id.button1); Animation rotateAnim = AnimationUtils.loadAnimation( getApplicationContext(), R.anim.full_rotate); button.startAnimation(rotateAnim); Start the Animation

49 Animations in XML See AnimationFromXmlExample.tar

50 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

51 Animations Animation 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);

52 Animations Animation 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

53 Animations Animation 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

54 Animations Animation 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

55 Animations Animation 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

56 Animations See AnimationListenerExample.tar

57 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

58 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

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

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

61 Animations - Interpolators See AnimationInterpolatorExample.tar

62 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

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

64 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

65 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

66 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

67 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

68 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

69 Animations - AnimationSet See AnimationSetExample.tar

70 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

71 Animations - Activities See ActivityAnimationExample.tar

72 Animation Libraries Universal Tween Engine AndEngine Videos

73 TraceView Traceview is a graphical viewer for execution logs that you create by using the Debug class to log tracing information in your codeDebug it can help you debug your application and profile its performance.

74 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

75 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.Debug 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 DDMS o 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.

76 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.Debug 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.

77 TraceView - Debug Class To create the trace files include the Debug class and call one of the startMethodTracing() methods o 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 machine o e.g., you could call  startMethodTracing() in your activity's onCreate() method  stopMethodTracing() in that activity's onDestroy() method.

78 TraceView - Debug Class See TraceViewExample.tar

79 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 directory o android-sdk-tools/platform-tools/ Now you can view the trace using traceview /local_dir/tracename the traceview command is located in the directory android-sdk-tools/tools/

80 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.

81 TraceView - DDMS 1. Select the process 2. Start Method Profiling

82 References The Busy Coder's Guide to Android Development - Mark Murphy The Busy Coder's Guide to Android Development - Mark Murphy Android Developers The Mobile Lab at Florida State University

Download ppt "Mobile Programming Lecture 11 Animation and TraceView."

Similar presentations

Introduction to Macromedia Director 8.5 – Lingo

Introduction to Macromedia Director 8.5 – Lingo
INTRODUCTION TO ADOBE FLASH CS4

INTRODUCTION TO ADOBE FLASH CS4
11 Getting Started with ASP.NET Beginning ASP.NET 4.0 in C# 2010 Chapters 5 and 6.

11 Getting Started with ASP.NET Beginning ASP.NET 4.0 in C# 2010 Chapters 5 and 6.
Chapter 6 Preparing and Publishing Applications. Chapter 6 Lessons 1.Publish movies 2.Reduce file size to optimize a movie 3.Create a preloader 4.Publish.

Chapter 6 Preparing and Publishing Applications. Chapter 6 Lessons 1.Publish movies 2.Reduce file size to optimize a movie 3.Create a preloader 4.Publish.
AGENT TRAINING PowerPoint Basics. Goals: After today, you will be able to: Add new slides Add new slides Apply design templates Apply design templates.

AGENT TRAINING PowerPoint Basics. Goals: After today, you will be able to: Add new slides Add new slides Apply design templates Apply design templates.
Step1 Insert an ‘oval’ AutoShape on your slide and resize and recolor it to your liking. (click to continue) step2 To make sure that it is a perfect circle,

Step1 Insert an ‘oval’ AutoShape on your slide and resize and recolor it to your liking. (click to continue) step2 To make sure that it is a perfect circle,
Hello world Follow steps under the sections “Create an AVD” and “Create a New Android Project” at

Hello world Follow steps under the sections “Create an AVD” and “Create a New Android Project” at
The Android Development Environment.  Getting started on the Android Platform  Installing required libraries  Programming Android using the Eclipse.

The Android Development Environment.  Getting started on the Android Platform  Installing required libraries  Programming Android using the Eclipse.
Fundamentals of Programming in Visual Basic 3.1 Visual basic Objects Visual Basic programs display a Windows style screen (called a form) with boxes into.

Fundamentals of Programming in Visual Basic 3.1 Visual basic Objects Visual Basic programs display a Windows style screen (called a form) with boxes into.
Basic Animation. Animation 4 options – Animated.gif – Frame by Frame animation – Tweened animation This is our focus – OpenGL ES Graphics API for more.

Basic Animation. Animation 4 options – Animated.gif – Frame by Frame animation – Tweened animation This is our focus – OpenGL ES Graphics API for more.
Programming with App Inventor Computing Institute for K-12 Teachers Summer 2012 Workshop.

Programming with App Inventor Computing Institute for K-12 Teachers Summer 2012 Workshop.
Android Application Development 2013 PClassic Chris Murphy 1.

Android Application Development 2013 PClassic Chris Murphy 1.
Mobile Programming Lecture 1 Getting Started. Today's Agenda About the Eclipse IDE Hello, World! Project Android Project Structure Intro to Activities,

Mobile Programming Lecture 1 Getting Started. Today's Agenda About the Eclipse IDE Hello, World! Project Android Project Structure Intro to Activities,
Visual Basic Chapter 1 Mr. Wangler.

Visual Basic Chapter 1 Mr. Wangler.
CS5103 Software Engineering Lecture 08 Android Development II.

CS5103 Software Engineering Lecture 08 Android Development II.
XP Tutorial 5 Buttons, Behaviors, and Sounds. XP New Perspectives on Macromedia Flash MX 2004 2 Buttons Interactive means that the user has some level.

XP Tutorial 5 Buttons, Behaviors, and Sounds. XP New Perspectives on Macromedia Flash MX Buttons Interactive means that the user has some level.
BUILDING RICH MEDIA ELEMENTS. Design Decisions Based on Design Specification  Following the design specification will ensure that the application is.

BUILDING RICH MEDIA ELEMENTS. Design Decisions Based on Design Specification  Following the design specification will ensure that the application is.
Chapter 10: Move! Creating Animation

Chapter 10: Move! Creating Animation
Exercise : Animated Navigation Structure in Flash 1.Develop Answers to “What did you learn in ITI program?” “What do you have to offer?” “What are your.

Exercise : Animated Navigation Structure in Flash 1.Develop Answers to “What did you learn in ITI program?” “What do you have to offer?” “What are your.
Introduction to Scratch!

Introduction to Scratch!

Similar presentations

Ads by Google