Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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.

Dallas Gutauckis

December 18, 2013
Tweet

More Decks by Dallas Gutauckis

Other Decks in Programming

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