animations in android using animators - scott...
TRANSCRIPT
![Page 1: Animations in Android Using Animators - Scott Weberscottweber.com/files/201305-MobiDevDay-animations_in_android.pdf · Animator Duration • Duration is in milliseconds • Default](https://reader035.vdocuments.us/reader035/viewer/2022062505/5ee18050ad6a402d666c5c63/html5/thumbnails/1.jpg)
Animations in Android
Using Animators
Saturday, May 4, 13
![Page 2: Animations in Android Using Animators - Scott Weberscottweber.com/files/201305-MobiDevDay-animations_in_android.pdf · Animator Duration • Duration is in milliseconds • Default](https://reader035.vdocuments.us/reader035/viewer/2022062505/5ee18050ad6a402d666c5c63/html5/thumbnails/2.jpg)
Who is this guy?
Scott WeberMobiata / Expedia
scottweber.com gplus.to/scottdweber
Saturday, May 4, 13
![Page 3: Animations in Android Using Animators - Scott Weberscottweber.com/files/201305-MobiDevDay-animations_in_android.pdf · Animator Duration • Duration is in milliseconds • Default](https://reader035.vdocuments.us/reader035/viewer/2022062505/5ee18050ad6a402d666c5c63/html5/thumbnails/3.jpg)
Why Animate?
• Hint at interaction
• Make interaction more natural
• “Feel” or “Polish”
Saturday, May 4, 13
![Page 4: Animations in Android Using Animators - Scott Weberscottweber.com/files/201305-MobiDevDay-animations_in_android.pdf · Animator Duration • Duration is in milliseconds • Default](https://reader035.vdocuments.us/reader035/viewer/2022062505/5ee18050ad6a402d666c5c63/html5/thumbnails/4.jpg)
Ways to Animate with Android
• OpenGL
• Manual
• Animation
• Animator
That’s another talk
Not today
Nope
Saturday, May 4, 13
![Page 5: Animations in Android Using Animators - Scott Weberscottweber.com/files/201305-MobiDevDay-animations_in_android.pdf · Animator Duration • Duration is in milliseconds • Default](https://reader035.vdocuments.us/reader035/viewer/2022062505/5ee18050ad6a402d666c5c63/html5/thumbnails/5.jpg)
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
![Page 6: Animations in Android Using Animators - Scott Weberscottweber.com/files/201305-MobiDevDay-animations_in_android.pdf · Animator Duration • Duration is in milliseconds • Default](https://reader035.vdocuments.us/reader035/viewer/2022062505/5ee18050ad6a402d666c5c63/html5/thumbnails/6.jpg)
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
![Page 7: Animations in Android Using Animators - Scott Weberscottweber.com/files/201305-MobiDevDay-animations_in_android.pdf · Animator Duration • Duration is in milliseconds • Default](https://reader035.vdocuments.us/reader035/viewer/2022062505/5ee18050ad6a402d666c5c63/html5/thumbnails/7.jpg)
ObjectAnimatorExamples
ObjectAnimator.ofFloat(myView, “alpha”, 0);
ObjectAnimator.ofFloat(myView, “alpha”, 1, 0);
ObjectAnimator.ofFloat(myView, “alpha”, 1, 0, 1);
Saturday, May 4, 13
![Page 8: Animations in Android Using Animators - Scott Weberscottweber.com/files/201305-MobiDevDay-animations_in_android.pdf · Animator Duration • Duration is in milliseconds • Default](https://reader035.vdocuments.us/reader035/viewer/2022062505/5ee18050ad6a402d666c5c63/html5/thumbnails/8.jpg)
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
![Page 9: Animations in Android Using Animators - Scott Weberscottweber.com/files/201305-MobiDevDay-animations_in_android.pdf · Animator Duration • Duration is in milliseconds • Default](https://reader035.vdocuments.us/reader035/viewer/2022062505/5ee18050ad6a402d666c5c63/html5/thumbnails/9.jpg)
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
![Page 10: Animations in Android Using Animators - Scott Weberscottweber.com/files/201305-MobiDevDay-animations_in_android.pdf · Animator Duration • Duration is in milliseconds • Default](https://reader035.vdocuments.us/reader035/viewer/2022062505/5ee18050ad6a402d666c5c63/html5/thumbnails/10.jpg)
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
![Page 11: Animations in Android Using Animators - Scott Weberscottweber.com/files/201305-MobiDevDay-animations_in_android.pdf · Animator Duration • Duration is in milliseconds • Default](https://reader035.vdocuments.us/reader035/viewer/2022062505/5ee18050ad6a402d666c5c63/html5/thumbnails/11.jpg)
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
![Page 12: Animations in Android Using Animators - Scott Weberscottweber.com/files/201305-MobiDevDay-animations_in_android.pdf · Animator Duration • Duration is in milliseconds • Default](https://reader035.vdocuments.us/reader035/viewer/2022062505/5ee18050ad6a402d666c5c63/html5/thumbnails/12.jpg)
AnimatorSetExample
AnimatorSet set = new AnimatorSet();
set.playTogether(ObjectAnimator.ofFloat(myView, “y”, destinationY), ObjectAnimator.ofFloat(myView, “alpha”, 1));
set.start();
Saturday, May 4, 13
![Page 13: Animations in Android Using Animators - Scott Weberscottweber.com/files/201305-MobiDevDay-animations_in_android.pdf · Animator Duration • Duration is in milliseconds • Default](https://reader035.vdocuments.us/reader035/viewer/2022062505/5ee18050ad6a402d666c5c63/html5/thumbnails/13.jpg)
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
![Page 14: Animations in Android Using Animators - Scott Weberscottweber.com/files/201305-MobiDevDay-animations_in_android.pdf · Animator Duration • Duration is in milliseconds • Default](https://reader035.vdocuments.us/reader035/viewer/2022062505/5ee18050ad6a402d666c5c63/html5/thumbnails/14.jpg)
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
![Page 15: Animations in Android Using Animators - Scott Weberscottweber.com/files/201305-MobiDevDay-animations_in_android.pdf · Animator Duration • Duration is in milliseconds • Default](https://reader035.vdocuments.us/reader035/viewer/2022062505/5ee18050ad6a402d666c5c63/html5/thumbnails/15.jpg)
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
![Page 16: Animations in Android Using Animators - Scott Weberscottweber.com/files/201305-MobiDevDay-animations_in_android.pdf · Animator Duration • Duration is in milliseconds • Default](https://reader035.vdocuments.us/reader035/viewer/2022062505/5ee18050ad6a402d666c5c63/html5/thumbnails/16.jpg)
Animator Interpolator
• Built-in interpolators include Accelerate, Decelerate, Anticipate, Overshoot, Bounce, Linear
Accelerate Decelerate
AccelerateDecelerate
Anticipate
Overshoot
Saturday, May 4, 13
![Page 17: Animations in Android Using Animators - Scott Weberscottweber.com/files/201305-MobiDevDay-animations_in_android.pdf · Animator Duration • Duration is in milliseconds • Default](https://reader035.vdocuments.us/reader035/viewer/2022062505/5ee18050ad6a402d666c5c63/html5/thumbnails/17.jpg)
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
![Page 18: Animations in Android Using Animators - Scott Weberscottweber.com/files/201305-MobiDevDay-animations_in_android.pdf · Animator Duration • Duration is in milliseconds • Default](https://reader035.vdocuments.us/reader035/viewer/2022062505/5ee18050ad6a402d666c5c63/html5/thumbnails/18.jpg)
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
![Page 19: Animations in Android Using Animators - Scott Weberscottweber.com/files/201305-MobiDevDay-animations_in_android.pdf · Animator Duration • Duration is in milliseconds • Default](https://reader035.vdocuments.us/reader035/viewer/2022062505/5ee18050ad6a402d666c5c63/html5/thumbnails/19.jpg)
Gotcha!
ObjectAnimator.ofFloat(myButton, “x”, 400);
1: Don’t forget to start() the party
This doesn’t actually do anything!
Saturday, May 4, 13
![Page 20: Animations in Android Using Animators - Scott Weberscottweber.com/files/201305-MobiDevDay-animations_in_android.pdf · Animator Duration • Duration is in milliseconds • Default](https://reader035.vdocuments.us/reader035/viewer/2022062505/5ee18050ad6a402d666c5c63/html5/thumbnails/20.jpg)
Gotcha!1: Don’t forget to start() the party
ObjectAnimator.ofFloat(myButton, “x”, 400).start();
Saturday, May 4, 13
![Page 21: Animations in Android Using Animators - Scott Weberscottweber.com/files/201305-MobiDevDay-animations_in_android.pdf · Animator Duration • Duration is in milliseconds • Default](https://reader035.vdocuments.us/reader035/viewer/2022062505/5ee18050ad6a402d666c5c63/html5/thumbnails/21.jpg)
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
![Page 22: Animations in Android Using Animators - Scott Weberscottweber.com/files/201305-MobiDevDay-animations_in_android.pdf · Animator Duration • Duration is in milliseconds • Default](https://reader035.vdocuments.us/reader035/viewer/2022062505/5ee18050ad6a402d666c5c63/html5/thumbnails/22.jpg)
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
![Page 23: Animations in Android Using Animators - Scott Weberscottweber.com/files/201305-MobiDevDay-animations_in_android.pdf · Animator Duration • Duration is in milliseconds • Default](https://reader035.vdocuments.us/reader035/viewer/2022062505/5ee18050ad6a402d666c5c63/html5/thumbnails/23.jpg)
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
![Page 24: Animations in Android Using Animators - Scott Weberscottweber.com/files/201305-MobiDevDay-animations_in_android.pdf · Animator Duration • Duration is in milliseconds • Default](https://reader035.vdocuments.us/reader035/viewer/2022062505/5ee18050ad6a402d666c5c63/html5/thumbnails/24.jpg)
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
![Page 25: Animations in Android Using Animators - Scott Weberscottweber.com/files/201305-MobiDevDay-animations_in_android.pdf · Animator Duration • Duration is in milliseconds • Default](https://reader035.vdocuments.us/reader035/viewer/2022062505/5ee18050ad6a402d666c5c63/html5/thumbnails/25.jpg)
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
![Page 26: Animations in Android Using Animators - Scott Weberscottweber.com/files/201305-MobiDevDay-animations_in_android.pdf · Animator Duration • Duration is in milliseconds • Default](https://reader035.vdocuments.us/reader035/viewer/2022062505/5ee18050ad6a402d666c5c63/html5/thumbnails/26.jpg)
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
![Page 27: Animations in Android Using Animators - Scott Weberscottweber.com/files/201305-MobiDevDay-animations_in_android.pdf · Animator Duration • Duration is in milliseconds • Default](https://reader035.vdocuments.us/reader035/viewer/2022062505/5ee18050ad6a402d666c5c63/html5/thumbnails/27.jpg)
Gotcha!6: Timing is everything
Animations are easy!
Don’t be afraid to add a little motion to your apps.
Saturday, May 4, 13
![Page 28: Animations in Android Using Animators - Scott Weberscottweber.com/files/201305-MobiDevDay-animations_in_android.pdf · Animator Duration • Duration is in milliseconds • Default](https://reader035.vdocuments.us/reader035/viewer/2022062505/5ee18050ad6a402d666c5c63/html5/thumbnails/28.jpg)
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
![Page 29: Animations in Android Using Animators - Scott Weberscottweber.com/files/201305-MobiDevDay-animations_in_android.pdf · Animator Duration • Duration is in milliseconds • Default](https://reader035.vdocuments.us/reader035/viewer/2022062505/5ee18050ad6a402d666c5c63/html5/thumbnails/29.jpg)
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
![Page 30: Animations in Android Using Animators - Scott Weberscottweber.com/files/201305-MobiDevDay-animations_in_android.pdf · Animator Duration • Duration is in milliseconds • Default](https://reader035.vdocuments.us/reader035/viewer/2022062505/5ee18050ad6a402d666c5c63/html5/thumbnails/30.jpg)
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