Animations in Android

Using Animators

Saturday, May 4, 13

Who is this guy?

Scott WeberMobiata / Expedia

scottweber.com gplus.to/scottdweber

scott@mobiata.com

Saturday, May 4, 13

Why Animate?

• Hint at interaction

• Make interaction more natural

• “Feel” or “Polish”

Saturday, May 4, 13

Ways to Animate with Android

• OpenGL

• Manual

• Animation

• Animator

That’s another talk

Not today

Nope

Saturday, May 4, 13

Animator

• Preferred method of animating views

• Alters view properties over time

• Can easily and neatly tie animation of multiple views together

• Introduced in API 11 (Honeycomb)

• NineOldAndroids (NOA) to the rescue! (nineoldandroids.com)

android.animation.*

Saturday, May 4, 13

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

Saturday, May 4, 13

ObjectAnimatorExamples

ObjectAnimator.ofFloat(myView, “alpha”, 0);

ObjectAnimator.ofFloat(myView, “alpha”, 1, 0);

ObjectAnimator.ofFloat(myView, “alpha”, 1, 0, 1);

Saturday, May 4, 13

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

Saturday, May 4, 13

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(); }}

Saturday, May 4, 13

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(); }}

XXXXXXXXXX

Saturday, May 4, 13

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

Saturday, May 4, 13

AnimatorSetExample

AnimatorSet set = new AnimatorSet();

set.playTogether(ObjectAnimator.ofFloat(myView, “y”, destinationY), ObjectAnimator.ofFloat(myView, “alpha”, 1));

set.start();

Saturday, May 4, 13

Animator Properties

• Duration (getDuration() / setDuration())

• StartDelay (getStartDelay() / setStartDelay())

• Interpolator (getInterpolator() / setInterpolator())

• Listeners (addListener() / removeListener() / getListeners() / removeAllListeners())

• Control (start() / cancel() / end())

• Status (isStarted() / isRunning())

Saturday, May 4, 13

Animator Duration

• Duration is in milliseconds

• Default duration is 300 ms

• Standard durations:• android.R.integer.config_shortAnimTime

• android.R.integer.config_mediumAnimTime

• android.R.integer.config_longAnimTime

Saturday, May 4, 13

Animator Interpolator

• Controls the “physics” of the animation

• Default is AccelerateDecelerateInterpolator

• Building your own is easy:private static final Interpolator sInterpolator = new Interpolator() { public float getInterpolation(float t) {    t -= 1.0f;        return t * t * t * t * t + 1.0f;    }};

Saturday, May 4, 13

Animator Interpolator

• Built-in interpolators include Accelerate, Decelerate, Anticipate, Overshoot, Bounce, Linear

Accelerate Decelerate

AccelerateDecelerate

Anticipate

Overshoot

Saturday, May 4, 13

Animator Listeners

• Callback available for major events during the life of an animation: onAnimationStart(), onAnimationEnd(), onAnimationCancel(), onAnimationRepeat()

• Tips:

• If an animation is canceled, onAnimationCancel() will be called and then onAnimationEnd()

• Use AnimatorListenerAdapter if you don’t plan to implement all four callbacks

Saturday, May 4, 13

ValueAnimator Properties

• RepeatMode (getRepeatMode() / setRepeatMode())

• ValueAnimator.RESTART or ValueAnimator.REVERSE

• RepeatCount (getRepeatCount() / setRepeatCount())

• Any integer value or ValueAnimator.INFINITE

• Control (reverse())

Saturday, May 4, 13

Gotcha!

ObjectAnimator.ofFloat(myButton, “x”, 400);

1: Don’t forget to start() the party

This doesn’t actually do anything!

Saturday, May 4, 13

Gotcha!1: Don’t forget to start() the party

ObjectAnimator.ofFloat(myButton, “x”, 400).start();

Saturday, May 4, 13

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?”

Saturday, May 4, 13

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();

Saturday, May 4, 13

Gotcha!

Animator moveDown = ObjectAnimator.ofFloat(myButton, “y”, 400);moveDown.start();

3: When moving a View doesn’t really mean it has moved

Pre-API11NOA

Saturday, May 4, 13

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

Saturday, May 4, 13

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...

Saturday, May 4, 13

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!

Saturday, May 4, 13

Gotcha!6: Timing is everything

Animations are easy!

Don’t be afraid to add a little motion to your apps.

Saturday, May 4, 13

Gotcha!6: 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)

Saturday, May 4, 13

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

Saturday, May 4, 13

Resources

Official Tutorial: Adding Animationshttp://developer.android.com/training/animation/index.html

Dev.Bytes Animation video tutorials (with Chet Haase)http://www.youtube.com/playlist?list=PLWz5rJ2EKKc_XOgcRukSoKKjewFJZrKV0(http://goo.gl/v7j5a)

Saturday, May 4, 13

Questions

Scott Weberscottweber.com

gplus.to/scottdweber scott@mobiata.com

Saturday, May 4, 13