Android Animation

Android Animation

Bringing your application to life. Covers why you should animate, what you should animate, the fundamentals of animation, and some actual code samples to get you going.

98df39819d64b9533260e8f67790f7f4?s=128

Dallas Gutauckis

December 18, 2013
Tweet

Transcript

  1. ANDROID ANIMATION BRINGING YOUR APPLICATION TO LIFE DALLAS GUTAUCKIS • 

    Sr. Architect at MeetMe •  Organizer for Android Alliance Philly " (GDG Philadelphia) •  Creator of Parcelabler (not Parcelable) •  dallasgutauckis.com •  github.com/dallasgutauckis
  2. WHY ANIMATE?

  3. FORM –  Creates a more compelling experience – Animations are fun!

    –  Eases transitions
  4. FUNCTION –  Hides loading time –  Hints at gestures – 

    Informs on features
  5. EXAMPLES

  6. Google+ +1’ing –  This is whimsical. This makes the experience

    more fun for the user, since it’s a relatively simple action
  7. Charm Making a match

  8. Charm Switching tabs –  Whimsical

  9. MeetMe Showing more of the default photo

  10. MeetMe Giving a gold star –  This is whimsical. This

    just makes the experience more fun for the user, since it’s a relatively simple action
  11. MeetMe Requesting friendship –  Animates out of visibility to get

    out of the way when you’re done with it
  12. Play Music Showing the current song selection –  Animates on

    tap to show the user he can swipe the view if he desires as well
  13. FUNDAMENTALS

  14. 12 Basic Principles –  The Illusion of Life: Disney Animation

    – 1981 by Ollie Johnston and Frank Thomas h"p://en.wikipedia.org/wiki/ 12_basic_principles_of_anima:on  
  15. SQUASH AND STRETCH –  Most things don’t squash/stretch this much,

    but this exaggeration (another principle) helps to show the physical nature of the object (and you don’t notice how much it’s happening when at speed) Lampman,  Wikipedia  
  16. ANTICIPATION –  Often times, when things are getting ready to

    move, they make a movement in the opposite first – Baseball pitcher pulls arm back before going forward to throw the ball – Person crouches before jumping h"p://en.wikipedia.org/wiki/12_basic_principles_of_anima:on  
  17. SLOW IN AND SLOW OUT –  Movement doesn’t just start

    and stop immediately – Running doesn’t just HAPPEN •  You speed up before getting to your running speed •  You slow down over time before coming to a stop –  (Unless like Chet said, you hit a brick wall – good one Chet.)
  18. WHAT SHOULD WE ANIMATE?

  19. EVERYTHING –  Not really, but sorta… –  Animate when… – Something

    changes •  +1 •  Add friend •  Drawer closes – You want to show off (Travis calls this whimsy) •  Gold star •  +1 •  … but don’t get in the way
  20. PERIPHERAL VISION –  http://youtu.be/z2exxj4COhU?t=6m16s

  21. WHAT CAN WE ANIMATE? –  Basic animations include – Alpha – Scale

    (x and y, x, y) – Rotation (x, y, and z) – Position (x, y) –  Complex animations can animate anything you can program…
  22. HOW DO WE ANIMATE?

  23. QUICK WINS Simple platform functionality

  24. overridePendingTransition –  overridePendingTransition(int enter, int exit) –  Probably not something

    you’ll change often though
  25. setCustomAnimations –  Custom Fragment transitions –  setCustomAnimations(int enter, int exit)

    –  setCustomAnimations(int enter, int exit, int popEnter, int popExit) 13  (3.2)  
  26. android:animateLayoutChanges="true" –  Supports standard views and layouts – ListView – LinearLayout – RelativeLayout

    –  Support for custom animations with LayoutTransition via setLayoutTransition(…) 11  (3.0)  
  27. android:enterFadeDuration="..."
 android:exitFadeDuration="..." –  <selector /> drawabls –  Animates between selector

    states 11  (3.0)  
  28. ObjectAnimator Honeycomb (3.0+)

  29. Features –  Duration –  Value interpolator –  Sets – Sequentially – Together

    –  Listeners –  Repetition –  Animate any target (Object)
  30. Example: alpha out ObjectAnimator alphaAnim = ObjectAnimator.ofFloat(myView, "alpha", 0); alphaAnim.setDuration(200);

    // Default is 300 alphaAnim.setInterpolator(new AccelerateDecelerateInterpolator()); alphaAnim.addListener(new Animator.AnimatorListener() { @Override public void onAnimationEnd(Animator animation) { myView.setVisibility(View.GONE); } @Override public void onAnimationStart(Animator animation) {} @Override public void onAnimationCancel(Animator animation) {} @Override public void onAnimationRepeat(Animator animation) {} }); alphaAnim.start(); 11  (3.0)  
  31. Example: alpha & translationX ObjectAnimator alphaAnim = ObjectAnimator.ofFloat(myView, "alpha", 0);

    ... alphaAnim.start(); ObjectAnimator translationXAnim = ObjectAnimator.ofFloat(myView, "translationX", -100); AnimatorSet set = new AnimatorSet(); set.playTogether( alphaAnim, translationXAnim ); set.start(); 11  (3.0)  
  32. Example: AnimatorSet AnimatorSet set = new AnimatorSet(); set.playTogether( ObjectAnimator.ofFloat(myView, "alpha",

    0), ObjectAnimator.ofFloat(myView, "translationX", -100) ); set.setInterpolator(new AccelerateDecelerateInterpolator()); set.setDuration(250); // Default is 300 set.addListener(new Animator.AnimatorListener() { @Override public void onAnimationEnd(Animator animation) { myView.setVisibility(View.GONE); } @Override public void onAnimationStart(Animator animation) {} @Override public void onAnimationCancel(Animator animation) {} @Override public void onAnimationRepeat(Animator animation) {} }); set.start(); 11  (3.0)  
  33. Example: hardware acceleration AnimatorSet set = new AnimatorSet(); set.playTogether( ObjectAnimator.ofFloat(myView,

    "alpha", 0), ObjectAnimator.ofFloat(myView, "translationX", -100) ); set.setInterpolator(new AccelerateDecelerateInterpolator()); set.setDuration(250); // Default is 300 set.addListener(new Animator.AnimatorListener() { @Override public void onAnimationEnd(Animator animation) { myView.setLayerType(View.LAYER_TYPE_NONE, null); myView.setVisibility(View.GONE); } @Override public void onAnimationStart(Animator animation) {} @Override public void onAnimationCancel(Animator animation) {} @Override public void onAnimationRepeat(Animator animation) {} }); myView.setLayerType(View.LAYER_TYPE_HARDWARE, null); set.start(); 16  (4.1)  
  34. Example: arbitrary 
 value myPancakeView.setPancakeCount(1); ObjectAnimator animator = ObjectAnimator.ofInt(myPancakeView, ”pancakeCount",

    20); animator.setDuration(250); // Default is 300 animator.addListener(new Animator.AnimatorListener() { @Override public void onAnimationEnd(Animator animation) { myPancakeView.addButter(); myPancakeView.addSyrup(); } @Override public void onAnimationStart(Animator animation) {} @Override public void onAnimationCancel(Animator animation) {} @Override public void onAnimationRepeat(Animator animation) {} }); animator.start();
  35. ViewPropertyAnimator Honeycomb MR1 (3.1+)

  36. Features –  Duration –  Value interpolator –  Listeners –  Start

    delay –  Fluent interface
  37. Example: alpha out myView.animate() .alpha(0) .setDuration(250) // Default is 300

    .setInterpolator(new AccelerateDecelerateInterpolator()) .setListener(new Animator.AnimatorListener() { @Override public void onAnimationStart(Animator animation) {} @Override public void onAnimationEnd(Animator animation) { myView.setVisibility(View.GONE); } @Override public void onAnimationCancel(Animator animation) {} @Override public void onAnimationRepeat(Animator animation) {} }) .start(); 12  (3.1)  
  38. Example: alpha & translationX myView.animate() .alpha(0) .translationX(-100) .setDuration(250) // Default

    is 300 .setInterpolator(new AccelerateDecelerateInterpolator()) .setListener(new Animator.AnimatorListener() { @Override public void onAnimationStart(Animator animation) {} @Override public void onAnimationEnd(Animator animation) { myView.setVisibility(View.GONE); } @Override public void onAnimationCancel(Animator animation) {} @Override public void onAnimationRepeat(Animator animation) {} }) .start(); 12  (3.1)  
  39. Example: hardware acceleration myView.animate() .alpha(0) .translationX(-100) .withLayer() .setDuration(250) // Default

    is 300 .setInterpolator(new AccelerateDecelerateInterpolator()) .setListener(new Animator.AnimatorListener() { @Override public void onAnimationStart(Animator animation) {} @Override public void onAnimationEnd(Animator animation) { myView.setVisibility(View.GONE); } @Override public void onAnimationCancel(Animator animation) {} @Override public void onAnimationRepeat(Animator animation) {} }) .start(); 16  (4.1)  
  40. A LITTLE MORE ON INTERPOLATORS

  41. INTERPOLATORS –  Determine the output value based on input – 

    Imagine animating from 0 to 1 over 100 frames – Normally just 0, 0.01, 0.02, 0.03, …, 1 – Now, something else…
  42. Linear 0   0.2   0.4   0.6   0.8

      1   1.2   0   0.09   0.18   0.27   0.36   0.45   0.54   0.63   0.72   0.81   0.9   0.99   Output   Output   output = input
  43. Overshoot 0   0.2   0.4   0.6   0.8

      1   1.2   0   0.09   0.18   0.27   0.36   0.45   0.54   0.63   0.72   0.81   0.9   0.99   Output   Output   output = (input - 1) * (input - 1) * (([tension]2 + 1) * (input - 1) + [tension]2) + 1
  44. AccelerateDecelerate 0   0.2   0.4   0.6   0.8

      1   1.2   0   0.09   0.18   0.27   0.36   0.45   0.54   0.63   0.72   0.81   0.9   0.99   Output   Output   output = (cos((input + 1) * π) / 2) + 0.5
  45. THINGS TO BEWARE

  46. RE-RUNNING ANIMATIONS ON SAME VIEW myListener = new SimpleAnimatorListener(){ @Override

    public void onAnimationEnd(Animator animation){ v.animate().scaleYBy(0.5f).start(); } }; v.animate().scaleY(2f).setListener(myListener).start(); .setListener(null)
  47. VIEW CLIPPING What you want What you’ve got

  48. VIEW CLIPPING –  Parent view encapsulates child drawing – Can’t draw

    outside –  Refactor your layout
  49. AGAIN What you want What you’ve got

  50. WHAT YOU’VE GOT <FrameLayout> <LinearLayout bg=y> <View bg=r /> <View

    bg=g /> </Linearlayout> </FrameLayout>
  51. WHAT YOU WANT <RelativeLayout> <View bg=y/> <View bg=r/> <View br=g/>

    </RelativeLayout>
  52. VIEWOVERLAY –  Could also use ViewOverlay –  View.getOverlay().addView(myView); – Remove from

    parent first! 18  (4.3)  
  53. VIEW COMPOSITING –  VideoView extends SurfaceView – Behind the window – Can’t

    be efficiently moved, scaled, rotated – Can’t be rotated on X or Y axis at all
  54. VIEW COMPOSITING What you want What you’ve got

  55. VIEW COMPOSITING

  56. VIEW COMPOSITING –  Use a TextureView instead –  Only for

    animations/movement use cases 14  (4.0)  
  57. HOMEWORK

  58. WHAT I DIDN’T COVER

  59. TransitionManager –  Manages animations between layouts –  New hotness – 

    Compatibility library/libraries already in the works 18  (4.3)  
  60. BACKWARD COMPATIBILITY

  61. ALL THE INCOMPATIBILITY –  NineOldAndroids – Open source! – Hyper-compatible (all the

    way to 1.0) – So much win! •  Doesn’t support animateLayoutChanges •  Doesn’t support LayoutTransition •  Doesn’t support selector animations –  ViewCompat – [set]hasTransientState
  62. ADDITIONAL RESOURCES https://speakerdeck.com/dlew/i-can-animate-and-so-can-you I Can Animate and So Can You

    Daniel Lew h"p://en.wikipedia.org/wiki/12_basic_principles_of_anima:on   12 Basic Principles of Animation Wikipedia, the free encyclopedia h"ps://www.youtube.com/watch?v=ihzZrS69i_s   Google I/O 2013: A Moving Experience Chet Haase & Romain Guy