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

I Can Animate and So Can You (mdevcon)

I Can Animate and So Can You (mdevcon)

A medium-length version of a talk I gave about Android animations at mdevcon in Amsterdam 2014.

Keynote version: http://goo.gl/7KuSxP

D225ebf0faa666ac7655cc7e4689283c?s=128

Daniel Lew
PRO

March 08, 2014
Tweet

Transcript

  1. I Can Animate and So Can You Daniel Lew, Mar.

    8, 2014
  2. Typical Animation Demo

  3. What Can Be Done

  4. Revelations

  5. Revelation #1 Every animation is unique

  6. Revelation #2 Animation code is not pretty

  7. Revelation #3 Animations first Animate

  8. Revelation #4 Animate for 4.x+

  9. Ditch 2.x • Poor performance • Can't use modern tricks

    • Backup: NineOldAndroids
  10. Ditch 3.x • Tiny userbase • ViewPropertyAnimator - Introduced 3.1

    • TextureView - Introduced 4.0
  11. Building Animations • Figure out what attributes to animate •

    Design View hierarchy • Measure attribute start/ end values • Setup and run animators
  12. Determining Attributes • Alpha - every element • Translate -

    every row • Translate - details header/footer • Scale - details rows (a hardcore fake) • Fading background - not needed!
  13. View Hierarchy • Animation informs View hierarchy • Here, rows

    go underneath split action bar
  14. Measuring Views • Problem: Views not measured until sometime after

    inflation • ViewTreeObserver - lets you know when a View has been measured • Two options: OnGlobalLayoutListener, OnPreDrawListener
  15. ViewTreeObserver Pattern ! final View view = findViewById(R.id.view); view.getViewTreeObserver().addOnPreDrawListener(new OnPreDrawListener()

    { public boolean onPreDraw() { view.getViewTreeObserver().removeOnPreDrawListener(this); // Measure here! return true; } });
  16. Measuring "After" • Align to other existing Views • Create

    invisible "dummy" Views to animate towards
  17. Running Animators • ObjectAnimator - animate! • AnimatorSet - synchronize

    multiple Animators • AnimatorListener - setup and cleanup • Canceling Animators w/ reverse()
  18. Property Animators • Generic animation framework • Animates *any* value

    over time • Basic building block for most animations
  19. ObjectAnimator • Type of property animator • Used for animating

    essential View properties • Position (or translation) • Rotation • Scale • Alpha • Can be used on custom View properties
  20. ObjectAnimator // Uses setAlpha() and getAlpha() to animate ObjectAnimator.ofFloat(myView, "alpha",

    0, 1).start(); ! ! ! // Uses built-in property to avoid reflection ObjectAnimator.ofFloat(myView, View.ALPHA, 1).start();
  21. AnimatorSet ! ObjectAnimator one = ObjectAnimator.ofFloat(view1, "alpha", 1); ObjectAnimator two

    = ObjectAnimator.ofFloat(view2, "alpha", 1); ! AnimatorSet set = new AnimatorSet(); set.playTogether(one, two); set.start();
  22. Animator Listeners ! ObjectAnimator anim = ObjectAnimator.ofFloat(view, "alpha", 1); anim.addListener(new

    AnimatorListenerAdapter() { public void onAnimationEnd(Animator animation) { // Clean-up code here } }); anim.start();
  23. Reversing Course • ValueAnimator.reverse() • Useful for smoothly canceling an

    animator • Can recursively traverse AnimatorSet for ValueAnimators
  24. Questions So Far?

  25. Performance • Choppy animation == painful • Performance cannot be

    an afterthought • Smooth animations informs structure
  26. Performance Breakdown • Layout - size/location of Views • Draw

    - what's inside Views • Render - pushing it on screen
  27. Layout Performance • Initiated by View.requestLayout() • Slow - avoid

    at all costs • Can sneak up on you
  28. Draw Performance • Initiated by View.invalidate() • How animations are

    run
  29. Render Performance • Initiated every time pixels are put on

    screen • Varies with pixel count/ speed of device • Try to reduce overdraw
  30. Profiling

  31. Profile GPU Rendering • Blue - Draw • Red -

    Process • Orange - Execute • Green line - your goal
  32. Show GPU Overdraw • Shows overdrawn pixels • Best to

    worst: nothing, blue, green, red, dark red • Some overdraw necessary, but reduce if possible
  33. Other Profilers • Traceview - Breakdown of method calls •

    Systrace - Measures everything on system • OpenGL Traces - Every single OpenGL call
  34. Profile Warnings • Profilers can be inaccurate • One profiling

    tool at a time, please • Profile multiple devices
  35. Optimization: Layers • Layers store drawn Views for reuse •

    Reduces drawing during animation • Reduces overdraw during animation
  36. Layers LinearLayout ImageView TextView TextView

  37. Layers LinearLayout ImageView TextView TextView LinearLayout

  38. Layer Pattern ! final View myView = findViewById(R.id.my_view); myView.setLayerType(View.LAYER_TYPE_HARDWARE, null);

    myView.animate() .translationX(50) .setListener(new AnimatorListenerAdapter() { public void onAnimationEnd(Animator animation) { myView.setLayerType(View.LAYER_TYPE_NONE, null); } }) .start();
  39. Layer Caveats • Warning: redrawing a layer is *slower* than

    non-layer • DisplayLists will rebuild layers when necessary • Layering simple Views just hurts performance
  40. Other Animation Tools

  41. Custom Views • Custom Views easier than they sound! •

    Animate your own attributes • Simplify animation via isolation • Cheat for performance’s sake
  42. set directions • View methods: setLeft(), setRight(), setTop(), setBottom() •

    Change layout without requesting layout! • Parent layout blows away values, may have to block
  43. Drawable Animations • AnimationDrawable - frame animations • Custom animated

    Drawable in a View • Drawable.setCallback() • View.verifyDrawable()
  44. SurfaceView and TextureView • Great for constantly animated View •

    SurfaceView is fast but is weird • TextureView is 4.0+, but can be moved around
  45. Resources • Android: goo.gl/4aZIzM • DevBytes: goo.gl/QeTM9B • Chet Haase:

    graphics-geek.blogspot.com/ • Romain Guy: curious-creature.org • Google IO Sessions (esp. with Haase/Guy)
  46. Thank You! • Blog: http://blog.danlew.net • Movies App Source: http://goo.gl/WiRTlQ

    • Twitter: @danlew42