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.

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
   

   View Slide

2. WHY ANIMATE?
   

   View Slide

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

   View Slide

4. FUNCTION
   –  Hides loading time
   –  Hints at gestures
   –  Informs on features
   

   View Slide

5. EXAMPLES
   

   View Slide

6. Google+
   +1’ing
   
   –  This is whimsical. This makes
   the experience more fun for the
   user, since it’s a relatively
   simple action
   

   View Slide

7. Charm
   Making a match
   
   

   View Slide

8. Charm
   Switching tabs
   
   –  Whimsical
   
   

   View Slide

9. MeetMe
   Showing more of the default photo
   
   

   View Slide

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
    
    

    View Slide

11. MeetMe
    Requesting friendship
    
    –  Animates out of visibility to get
    out of the way when you’re
    done with it
    
    

    View Slide

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
    

    View Slide

13. FUNDAMENTALS
    

    View Slide

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  
    

    View Slide

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  
    

    View Slide

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  
    

    View Slide

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

    View Slide

18. WHAT SHOULD WE
    ANIMATE?
    

    View Slide

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
    

    View Slide

20. PERIPHERAL VISION
    –  http://youtu.be/z2exxj4COhU?t=6m16s
    
    

    View Slide

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…
    

    View Slide

22. HOW DO WE
    ANIMATE?
    

    View Slide

23. QUICK WINS
    Simple platform functionality
    

    View Slide

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

    View Slide

25. setCustomAnimations
    
    –  Custom Fragment transitions
    –  setCustomAnimations(int enter, int exit)
    –  setCustomAnimations(int enter, int exit, int
    popEnter, int popExit)
    13  (3.2)  
    

    View Slide

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

    View Slide

27. android:enterFadeDuration="..."

    android:exitFadeDuration="..."
    –  drawabls
    –  Animates between selector states
    11  (3.0)  
    

    View Slide

28. ObjectAnimator
    Honeycomb (3.0+)
    

    View Slide

29. Features
    –  Duration
    –  Value interpolator
    –  Sets
    – Sequentially
    – Together
    –  Listeners
    –  Repetition
    –  Animate any target (Object)
    

    View Slide

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)  
    

    View Slide

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)  
    

    View Slide

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)  
    

    View Slide

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)  
    

    View Slide

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

    View Slide

35. ViewPropertyAnimator
    Honeycomb MR1 (3.1+)
    

    View Slide

36. Features
    –  Duration
    –  Value interpolator
    –  Listeners
    –  Start delay
    –  Fluent interface
    

    View Slide

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)  
    

    View Slide

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)  
    

    View Slide

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)  
    

    View Slide

40. A LITTLE MORE ON
    INTERPOLATORS
    

    View Slide

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…
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

45. THINGS TO
    BEWARE
    

    View Slide

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)
    

    View Slide

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

    View Slide

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

    View Slide

49. AGAIN
    What you want What you’ve got
    

    View Slide

50. WHAT YOU’VE GOT
    
    
    
    
    
    
    

    View Slide

51. WHAT YOU WANT
    
    
    
    
    
    

    View Slide

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

    View Slide

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
    

    View Slide

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

    View Slide

55. VIEW COMPOSITING
    

    View Slide

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

    View Slide

57. HOMEWORK
    

    View Slide

58. WHAT I DIDN’T
    COVER
    

    View Slide

59. TransitionManager
    –  Manages animations between layouts
    –  New hotness
    –  Compatibility library/libraries already in
    the works
    18  (4.3)  
    

    View Slide

60. BACKWARD
    COMPATIBILITY
    

    View Slide

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
    

    View Slide

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
    

    View Slide