1 / 82

Mobile Programming Lecture 11

Mobile Programming Lecture 11. Animation and TraceView. Agenda. Animation Animation Engines TraceView. Animations. TranslateAnimation move an object RotateAnimation rotate an object ScaleAnimation resize an object AlphaAnimation change alpha properties AnimationSet

saad
Download Presentation

Mobile Programming Lecture 11

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Mobile Programming Lecture 11 Animation and TraceView

  2. Agenda Animation Animation Engines TraceView

  3. Animations • TranslateAnimation • move an object • RotateAnimation • rotate an object • ScaleAnimation • resize an object • AlphaAnimation • change alpha properties • AnimationSet • 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 <?xml version="1.0" encoding="utf-8"?> <rotate> </rotate>

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

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

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

  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

More Related