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

scott@mobiata.com