A medium-length version of a talk I gave about Android animations at GDG Devfest MN 2014.
Keynote version: http://goo.gl/CFWCll
I Can Animate and SoCan YouDaniel Lew, Feb. 8, 2014
View Slide
Typical AnimationDemo
What Can Be Done
Revelations
Revelation #1Every animation is unique
Revelation #2Animation code is not pretty
Revelation #3Animations firstAnimate
Revelation #4Animate for 4.x+
Ditch 2.x• Poor performance • Can't use modern tricks • Backup: NineOldAndroids
Ditch 3.x• Tiny userbase • ViewPropertyAnimator -Introduced 3.1 • TextureView -Introduced 4.0
Building Animations• Figure out whatattributes to animate • Design View hierarchy • Measure attribute start/end values • Setup and run animators
Determining Attributes• Alpha - every element • Translate - every row • Translate - detailsheader/footer • Scale - details rows (ahardcore fake) • Fading background - notneeded!
View Hierarchy• Animation informs Viewhierarchy • Here, rows gounderneath split actionbar
Measuring Views• Problem: Views not measured untilsometime after inflation • ViewTreeObserver - lets you know when aView has been measured • Two options: OnGlobalLayoutListener,OnPreDrawListener
ViewTreeObserverPattern!final View view = findViewById(R.id.view);view.getViewTreeObserver().addOnPreDrawListener(newOnPreDrawListener() {public boolean onPreDraw() {view.getViewTreeObserver().removeOnPreDrawListener(this);// Measure here!return true;}});
Measuring "After"• Align to other existing Views • Create invisible "dummy" Views to animatetowards • Start in the correct position, animatetowards it
Running Animators• ObjectAnimator - animate! • AnimatorSet - synchronize multipleAnimators • AnimatorListener - setup and cleanup • Canceling Animators w/ reverse()
Property Animators• Generic animation framework • Animates *any* value over time • Basic building block for most animations
ObjectAnimator• Type of property animator • Used for animating essential View properties • Position (or translation) • Rotation • Scale • Alpha • Can be used on custom View properties
ObjectAnimator// Uses setAlpha() and getAlpha() to animateObjectAnimator.ofFloat(myView, "alpha", 0, 1).start();!!!// Uses built-in property to avoid reflectionObjectAnimator.ofFloat(myView, View.ALPHA, 1).start();
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();
Animator Listeners!ObjectAnimator anim = ObjectAnimator.ofFloat(view,"alpha", 1);anim.addListener(new AnimatorListenerAdapter() {public void onAnimationEnd(Animator animation) {// Clean-up code here}});anim.start();
Reversing Course• ValueAnimator.reverse() • Useful for smoothly canceling an animator • Can recursively traverse AnimatorSet forValueAnimators
Performance• Choppy animation == painful • Performance cannot be an afterthought • Smooth animations informs View structure
PerformanceBreakdown• Layout - size/location of Views • Draw - what's inside Views • Render - pushing it on screen
Layout Performance• Initiated byView.requestLayout() • Slow - avoid at all costs • Can sneak up on you
Draw Performance• Initiated byView.invalidate() • How animations are run • Can be optimized withlayers
Render Performance• Initiated every timepixels are put on screen • Varies with pixel count/speed of device • Try to reduce overdraw
Profiling
Profile GPU Rendering• Blue - Draw • Red - Process • Orange - Execute • Green line - your goal
Show GPU Overdraw• Shows overdrawn pixels • Best to worst: nothing,blue, green, red, dark red • Some overdrawnecessary, but reduce ifpossible
Show Hardware LayerUpdates• Flashes green on HWlayer redraw • If constantly flashing,you're doing somethingwrong!
Profile Notes• Other tools: traceview, systrace, OpenGLtraces • Profilers can be inaccurate • One profiling tool at a time, please • Profile multiple devices
Optimizations
Optimization: Layers• Layers store drawnViews for reuse • Reduces drawing duringanimation • Reduces overdrawduring animation
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();
Layer Caveats• Warning: redrawing alayer is *slower* thannon-layer • DisplayLists will rebuildlayers when necessary • Layering simple Viewsjust hurts performance
Optimization: AvoidingLayouts• Layouts == slow! • Layouts happen often • Subclass Views to block layouts
ImageView BlockingLayout!public void setIsFixedSize(boolean isFixedSize) {mIsFixedSize = isFixedSize;}!public void setImageBitmap(Bitmap bm) {mBlockMeasurement = true;super.setImageBitmap(bm);mBlockMeasurement = false;}!public void requestLayout() {if (!mBlockMeasurement || !mIsFixedSize) {super.requestLayout();}}
Other Animation Tools
SurfaceView andTextureView• Great for constantlyanimated View • SurfaceView is fast but isweird • TextureView is 4.0+, butcan be moved around
Activity WindowAnimations• Custom tween animations betweenActivities • Limited to full-screen transitions • Activity.overridePendingTransition() • android:windowAnimationStyle
Fragment Animations• Animations during Fragment transactions • Limited to full-Fragment animations • Fragment.onCreateAnimation() • FragmentTransaction.setCustomAnimations() • FragmentTransaction.setTransition() andsetTransitionStyle()
View offsets• View.offsetLeftAndRight() • View.offsetTopAndBottom() • Performs well • Backwards compatible
set directions• View methods: setLeft(),setRight(), setTop(),setBottom() • Change layout withoutrequesting layout! • Parent layout blowsaway values, may have toblock
Drawable Animations• AnimationDrawable - frame animations • Custom animated Drawable in a View • Drawable.setCallback() • View.verifyDrawable()
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)
Thank You!• Blog: http://daniel-codes.blogspot.com/ • Movies App Source: http://goo.gl/WiRTlQ • Twitter: @danlew42 • Plus: https://plus.google.com/+DanielLew/
dlew
yusukebe
niftycorp
ojun9
findyinc
okuzawats
seike460
hiroyaonoe
sanfrecce_osaka
codehex
deepu105
techouse
afnizarnur
marcelosomers
matthewcrist
schacon
akmur
danielanewman
caitiem20
andyhume
malarkey
samanthasiow
morganepeng
dougneiner