Animations in AndroidScott Weber
Mobiata
About Me
• 10+ years doing enterprise software
• Met founder of Mobiata mid-2010
• Taught myself BlackBerry development
• FlightTrack BlackBerry 4.0
• Moved to Android Fall 2011
About Mobiata
• Founded November 2008
• Acquired by Expedia November 2010
Why Animate?
• Hint at interaction
• Make interaction more natural
• “Feel” or “Polish”
Ways to Animate with Android
• OpenGL
• Manual
• Animation
• Animator
That’s another talk
Manual Method
• Basically just do everything in draw() / onDraw()
• Works best with custom Views and custom Drawables
public void draw(Canvas canvas) { float loopPercent = calculateCurrentLoopPercent();
float alpha = -(loopPercent * loopPercent) + 1;
mPaint.setAlpha((int) (255 * alpha));
float radius = loopPercent * mRadius;
Rect bounds = getBounds(); float x = ((bounds.right - bounds.left) / 2f) + bounds.left; float y = ((bounds.bottom - bounds.top) / 2f) + bounds.top;
canvas.drawCircle(x, y, radius, mPaint);}
Manual MethodExample
Animation
• Changes the way that a View draws itself
• Does not actually change the View’s properties
• Limited to pretty basic functionality: AlphaAnimation, RotateAnimation, ScaleAnimation, TranslateAnimation, AnimationSet
android.view.animation.*
AnimationExample
AlphaAnimation fadeOut = new AlphaAnimation(1, 0);fadeOut.fillAfter(true);myView.startAnimation(fadeOut);
Animator
• Preferred method of animating views
• Alter view properties, rather than just morphing during draw()
• Can easily and neatly tie animation of multiple views together
• Introduced in API 11 (Honeycomb)
• NineOldAndroids (NOA) to the rescue! (nineoldandroids.com)
android.animation.*
ObjectAnimator
• Animate properties of objects (Views)
• Uses reflection to find getter/setter for animated property
• NOA adds support for: alpha, x, y, translateX, translateY, scaleX, scaleY, rotateX, rotateY, rotateZ
ObjectAnimatorExamples
ObjectAnimator.ofFloat(myView, “alpha”, 0);
ObjectAnimator.ofFloat(myView, “alpha”, 1, 0);
ObjectAnimator.ofFloat(myView, “alpha”, 1, 0, 1);
ValueAnimator
• Provides a more generic Animator
• Especially useful for animating when a simple setProp() is not enough
• Also handy for timing other events to animations
ValueAnimatorExample
ValueAnimator anim = new ValueAnimator();anim.addUpdateListener(new WeightAdjustUpdateListener(myView));anim.setFloatValues(startWeight, desiredWeight);
...
private static class WeightAdjustUpdateListener implements AnimatorUpdateListener { ... public void onAnimationUpdate(ValueAnimator animation) { float weight = (Float) animation.getAnimatedValue(); ((LayoutParams) mView.getLayoutParams()).weight = weight; mView.requestLayout(); }}
AnimatorSet
• Provides a way to group and choreograph multiple animations
• Start multiple animations simultaneously with playTogether()
• Start multiple animations one after another with playSequentially()
• Or use the Builder pattern:
Or: Oh, you wanted to do more than one thing at a time?!
AnimatorSet s = new AnimatorSet();s.play(anim1).before(anim2).before(anim3);
AnimatorSet t = new AnimatorSet();t.play(anim1).before(anim2);t.play(anim2).before(anim3);
NOT SURE IF OVER MY HEAD
OR JUST TERRIBLE CODE
AnimatorSetExample
AnimatorSet set = new AnimatorSet();set.playTogether(ObjectAnimator.ofFloat(myView, “y”, destinationY), ObjectAnimator.ofFloat(myDimmerView, “alpha”, 1));
set.setDuration(350);
set.setInterpolator(new AccelerateDecelerateInterpolator());
set.start();
Gotcha!
ObjectAnimator.ofFloat(myButton, “x”, 400);
1: Don’t forget to start() the party
This doesn’t actually do anything!
Gotcha!1: Don’t forget to start() the party
ObjectAnimator.ofFloat(myButton, “x”, 400).start();
Pre-API11NOA
Gotcha!
Animator moveRight = ObjectAnimator.ofFloat(myButton, “x”, 400);moveRight.addListener(new AnimatorListenerAdapter() { @Override public void onAnimationEnd(Animator anim) {
myButton.setVisibility(View.GONE); }}moveRight.start();
2: What exactly did you mean by “GONE?”
Pre-API11NOA
Gotcha!
Animator moveRight = ObjectAnimator.ofFloat(myButton, “x”, 400);moveRight.addListener(new AnimatorListenerAdapter() { @Override public void onAnimationEnd(Animator anim) {
myButton.setVisibility(View.GONE); }}moveRight.start();
2: What exactly did you mean by “GONE?”
myButton.clearAnimation();
Gotcha!
Animator moveDown = ObjectAnimator.ofFloat(myButton, “y”, 400);moveDown.start();
3: When moving a View doesn’t really mean it has moved
Pre-API11NOA
Gotcha!
Animator moveDown = ObjectAnimator.ofFloat(myButton, “y”, 400);moveDown.start();
myButton.offsetTopAndBottom(...);
3: When moving a View doesn’t really mean it has moved
Pre-API11NOA
Gotcha!
Animator moveDown = ObjectAnimator.ofFloat(myButton, “y”, 400);moveDown.start();
Animator moveDownAgain = ObjectAnimator.ofFloat(myButton, “translateY”, 100);moveDownAgain.start();
Where is the View now?
4: Lost in translation...
Gotcha!
AnimatorSet myBeautifulAnimation = new AnimatorSet();...myBeautifulAnimation.start();
myBeautifulAnimation takes 3 seconds to complete and triggers all kinds of events along the way. What happens when the user, in the middle of the animation:- hits the back button?- hits the home button?- rotates her device?- tries to tap your views as they are moving around the screen?
5: Oh, those pesky users!
Gotcha!6: Fun with Fragments
• Good News! Your user interface can easily be separated into two components that only need to pass limited information back and forth.
• Fragments FTW!
• Hmm... your designer wants that widget in UI component one to animate out of that component and into UI component two when the user transitions.
• Fragments FTL :(
Gotcha!6: Fun with Fragments
• Solution: A “transition period” in which both Fragments are visible. (Note: see Gotcha 5)
• The Activity becomes the choreographer, keeping track of the “in” and “out” animations and adding/removing Fragments as needed.
• Consider both “forward” and “backward” flow.
Gotcha!7: Timing is everything
Animations are easy!
Don’t be afraid to add a little motion to your apps.
Gotcha!7: Timing is everything
Animations are easy!
Don’t be afraid to add a little motion to your apps.
Don’t assume you can just“throw in some animations” at the last minute
(sometimes)
Resources
Romain Guyhttps://plus.google.com/109538161516040592207http://www.curious-creature.org/category/android/
Chet Haasehttps://plus.google.com/104755487586666698979
Roman Nurikhttps://plus.google.com/113735310430199015092
Resources
Official Tutorial: Adding Animationshttp://developer.android.com/training/animation/index.html
Dev.Bytes Animation video tutorials (with Chet Haase)http://www.youtube.com/watch?v=_UWXqFBF86Uhttp://www.youtube.com/watch?v=3UbJhmkeSighttp://www.youtube.com/watch?v=atH3o2uh_94http://www.youtube.com/watch?v=Ho8vk61lVIU
Questions
Scott Weber goo.gl/p9U58