$30 off During Our Annual Pro Sale. View Details »

Android Animations

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

Dallas Gutauckis

September 20, 2014
Tweet

More Decks by Dallas Gutauckis

Other Decks in Programming

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