Android Animations

My Animation talk from Droidcon New York City 2014

Original keynote w/ animations: https://www.dropbox.com/s/qhim23pfk3smsse/Android%20Animations.zip?dl=0
Sample app for camera distance tip:
https://github.com/dallasgutauckis/AnimationStation

Transcript

1. ANDROID ANIMATIONS
   with Purpose (mostly)
   

   View Slide

2. ABOUT ME
   • Dallas Gutauckis
   
   • Lead Android Engineer
   SeatGeek
   
   • Over 4 years of Android
   experience
   
   • Former co-organizer of
   GDG/Android Alliance Philly
   
   • Creator of mediocre
   parcelabler.com tool
   

   View Slide

3. ANIMATIONS
   • WHY
   
   • With some examples!
   
   • WHAT
   
   • HOW
   

   View Slide

4. WHY ANIMATE?
   

   View Slide

5. WHY ANIMATE?
   • Ease transitions
   
   • Create a more natural experience
   
   • Inform on features
   
   • Whimsy
   

   View Slide

6. EASE TRANSITIONS
   • Things don’t simply “change”
   in real life
   
   • Transition/move from A to B
   
   • Flip, slide, rotate, fall, etc
   

   View Slide

7. SEATGEEK
   View transitions
   

   View Slide

8. TUMBLR
   Compose
   

   View Slide

9. NATURAL EXPERIENCE
   • Mimics physical properties
   
   • Mass
   
   • Elevation
   
   • Velocity
   

   View Slide

10. GOOGLE+
    Post list
    

    View Slide

11. PLAY STORE
    Read more
    

    View Slide

12. INFORM ON FUNCTION
    • Let the user know something is there
    
    • Great for gestures
    

    View Slide

13. TUMBLR
    Follow
    

    View Slide

14. PLAY MUSIC
    Current song
    

    View Slide

15. PLAY MUSIC
    Next song
    

    View Slide

16. WHIMSY
    Be delightful…
    
    
    
    
    …but don’t get in the way.
    

    View Slide

17. SEATGEEK
    Announced not-logged-in
    

    View Slide

18. SEATGEEK
    Performers not-logged-in
    

    View Slide

19. FACEBOOK
    Pull-to-Refresh Loading
    

    View Slide

20. HOW TO ANIMATE
    

    View Slide

21. DISNEY ANIMATION: THE ILLUSION OF LIFE
    Ollie Johnston and Frank Thomas
    

    View Slide

22. 12 BASIC PRINCIPLES OF
    ANIMATION
    

    View Slide

23. SQUASH & STRETCH
    • Most real life objects react
    to impact and with elasticity
    

    View Slide

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

    View Slide

25. SLOW IN & 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.)
    

    View Slide

26. WHAT SHOULD WE ANIMATE?
    

    View Slide

27. EVERYTHING
    

    View Slide

28. EVERYTHING
    • Not really, but sorta…
    
    • Animate when…
    
    • Something changes
    
    • Follow a blog
    
    • Screen transitions
    
    • You want to hint at functionality
    
    • You want to show off (Whimsy)
    
    • Heart beating
    
    • Radar
    

    View Slide

29. WHAT CAN WE ANIMATE?
    • Basic animations include
    
    • Alpha
    
    • Scale (x and y)
    
    • Rotation (x, y, and z)
    
    • Position (x, y)
    
    • Complex animations can animate anything you can
    program…
    

    View Slide

30. HOW DO WE ANIMATE?
    

    View Slide

31. QUICK WINS
    Simple platform functionality
    

    View Slide

32. overridePendingTransition
    • overridePendingTransition(int enter, int exit)
    
    • Probably not something you’ll change often though
    

    View Slide

33. setCustomAnimations
    
    (…)
    • Custom Fragment transitions
    
    • setCustomAnimations(int enter, int exit)
    
    • setCustomAnimations(int enter, int exit, int
    popEnter, int popExit)
    13 (3.2)
    

    View Slide

34. android:animateLayoutChanges="true"
    • Supports standard views and layouts
    
    • ListView
    
    • LinearLayout
    
    • RelativeLayout
    
    • Support for custom animations with
    LayoutTransition via
    setLayoutTransition(…) 11 (3.0)
    

    View Slide

35. android:enterFadeDuration="..."

    android:exitFadeDuration="..."
    • drawables
    
    • Animates between selector states
    11 (3.0)
    

    View Slide

36. MORE COMPLEX
    

    View Slide

37. ObjectAnimator
    Honeycomb (3.0+)
    

    View Slide

38. FEATURES
    • Duration
    
    • Value interpolator
    
    • Sets
    
    • Sequentially
    
    • Parallel (“Together”)
    
    • Listeners
    
    • Repetition
    
    • Animate any target (Object)
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

42. 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)
    

    View Slide

43. 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();
    

    View Slide

44. ViewPropertyAnimator
    Honeycomb MR1 (3.1+)
    

    View Slide

45. FEATURES
    • Duration
    
    • Value interpolator
    
    • Listeners
    
    • Start delay
    
    • Fluent interface
    

    View Slide

46. 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)
    

    View Slide

47. 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)
    

    View Slide

48. 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)
    

    View Slide

49. A LITTLE MORE ON
    INTERPOLATORS
    

    View Slide

50. 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…
    

    View Slide

51. LINEAR
    Output
    0
    0.25
    0.5
    0.75
    1
    0 0.1 0.2 0.3 0.4 0.5 0.6 0.7 0.8 0.9 1
    Output
    output = input
    

    View Slide

52. OVERSHOOT
    Output
    0
    0.3
    0.6
    0.9
    1.2
    0 0.1 0.2 0.3 0.4 0.5 0.6 0.7 0.8 0.9 1
    Output
    output = (input - 1) * (input - 1) * (([tension]2 + 1) * (input - 1) + [tension]2) + 1
    

    View Slide

53. ACCELERATE + DECELERATE
    Output
    0
    0.25
    0.5
    0.75
    1
    0 0.1 0.2 0.3 0.4 0.5 0.6 0.7 0.8 0.9 1
    Output
    output = (cos((input + 1) * π) / 2) + 0.5
    

    View Slide

54. TIPS, TRICKS, AND GOTCHAS
    

    View Slide

55. X/Y
    ROTATION
    Bad
    

    View Slide

56. • View#setCameraDistance(float) for rotationX/
    rotationY
    

    View Slide

57. X/Y
    ROTATION
    Good
    

    View Slide

58. 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)
    

    View Slide

59. VIEW CLIPPING
    What you want What you’ve got
    

    View Slide

60. VIEW CLIPPING
    • Parent view encapsulates child drawing
    
    • Can’t draw outside
    
    • Refactor your layout
    

    View Slide

61. AGAIN
    What you want What you’ve got
    

    View Slide

62. WHAT YOU’VE GOT
    
    
    
    
    
    
    

    View Slide

63. WHAT YOU WANT
    
    
    
    
    
    

    View Slide

64. VIEWOVERLAY
    • Could also use ViewOverlay
    
    • View.getOverlay().addView(myView);
    
    • Remove from parent first!
    18 (4.3)
    

    View Slide

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

    View Slide

66. VIEW COMPOSITING
    

    View Slide

67. VIEW COMPOSITING
    What you want What you’ve got
    

    View Slide

68. VIEW COMPOSITING
    • Use a TextureView instead
    
    • Only for animations/movement use cases
    14 (4.0)
    

    View Slide

69. BACKWARD COMPATIBILITY
    

    View Slide

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

    View Slide

71. HOMEWORK
    

    View Slide

72. TRANSITIONMANAGER
    • Manages animations between layouts
    
    • Compatibility library/libraries already in the works
    18 (4.3)
    

    View Slide

73. MATERIAL & L
    • New hotness
    
    • Ripple
    
    • Reveal
    
    • Hero
    
    • Curved motion
    
    • View state changes L (?)
    

    View Slide

74. RESOURCES
    https://speakerdeck.com/dlew/i-can-animate-and-so-can-you
    I Can Animate and So Can You
    Daniel Lew
    http://en.wikipedia.org/wiki/12_basic_principles_of_animation
    12 Basic Principles of Animation
    Wikipedia, the free encyclopedia
    https://www.youtube.com/watch?v=ihzZrS69i_s
    Google I/O 2013: A Moving Experience
    Chet Haase & Romain Guy
    

    View Slide

75. GO OUT AND ANIMATE
    

    View Slide

76. THANKS
    Purple shirts seem to be a theme
    
    @DallasGutauckis
    /+DallasGutauckis
    Praise be to Duarte
    

    View Slide