Best practices for animations in Android

Как найти идеальный баланс между фантазией дизайнеров и симпатией пользователей при создании анимации в Android? Как выбрать правильный инструмент и когда стоит его использовать, а когда — нет? Понятно и интересно в докладе “Рецепты анимаций в Android”

Transcript

1. Best practices for animations in Android Artur Vasilov, Android developer
2. Why? › There are almost no talks about animations in Android › It’s complicated › It’s necessary › And here I’m https://material.io/guidelines/motion/material-motion.html 2
3. Examples Best practices for animations in Android
10. Key principles › Meaningful (responsive, intentional) › Natural › Fast & Smooth 10
11. What can we do Best practices for animations in Android
12. Animations in Android › Animation › Animator › LayoutTransition › Ripple › Shared Element Transition › Circular Reveal › Spring Animation, Lottie, Animated Vector, Canvas, Open GL, … 12
13. Animation <set xmlns:android="http://schemas.android.com/apk/res/android"> <scale android:duration="300" android:fillAfter="true" android:fromXScale="1.0" android:fromYScale="1.0" android:interpolator="@android:anim/accelerate_decelerate_interpolator" android:toXScale="2.0" android:pivotX="50%" android:pivotY="50%" android:toYScale="2.0"/> </set>
14. Animation › alpha › rotate › scale › translate › set 14
15. Animation › Bugs › Only changes the visual representation of an object › Only supports View animations › Don’t use it 15
16. Animator ValueAnimator animator = ValueAnimator.ofFloat(1f, 2f); animator.setDuration(300); animator.setInterpolator(new BounceInterpolator()); animator.addUpdateListener(valueAnimator -> { float value = (float) valueAnimator.getAnimatedValue(); button.setScaleX(value); button.setScaleY(value); }); animator.start();
17. Animator ValueAnimator animator = ValueAnimator.ofFloat(1f, 2f); animator.setDuration(500); animator.setInterpolator(new BounceInterpolator()); animator.addUpdateListener(valueAnimator -> { float value = (float) valueAnimator.getAnimatedValue(); button.setScaleX(value); button.setScaleY(value); }); animator.addListener(new AnimatorListenerAdapter() { @Override public void onAnimationEnd(Animator animation) { // TODO : do something on animation end } }); animator.start();
18. Animator › Animate anything › Many callbacks › Many methods to control › AnimatorSet 18
19. Interpolator public interface TimeInterpolator { /** * Maps a value representing the elapsed fraction of an animation to a value that * represents the interpolated fraction. This interpolated value is then multiplied * by the change in value of an animation to derive the animated value at the current * elapsed animation time. */ float getInterpolation(float input); }
20. Interpolator › LinearInterpolator › AccelerateInterpolator › AccelerateDecelerateInterpolator › BounceInterpolator › PathInterpolator › … › Custom 20
22. Evaluator public interface TypeEvaluator<T> { /** * This function returns the result of linearly interpolating the start and end * values, with fraction representing the proportion between the start and end * values. The calculation is a simple parametric calculation: * result = x0 + t * (x1 - x0), where x0 is startValue, x1 is endValue, * and t is fraction. */ public T evaluate(float fraction, T startValue, T endValue); }
23. Color animation ValueAnimator animator = ValueAnimator.ofInt(colorFrom, colorTo); animator.setDuration(duration); animator.setStartDelay(startDelay); animator.addUpdateListener(animation -> { target.setBackgroundColor((int) animation.getAnimatedValue()) }); animator.start();
24. First way ValueAnimator.ofArgb (API 21+) ValueAnimator animator = ValueAnimator.ofArgb(colorFrom, colorTo); animator.setDuration(duration); animator.setStartDelay(startDelay); animator.addUpdateListener(animation -> { target.setBackgroundColor((int) animation.getAnimatedValue()); }); animator.start(); Синий цвет не правильный
25. HSV (Hue Saturation Value) 25
26. HSV final float[] from = new float[3]; final float[] to = new float[3]; Color.colorToHSV(colorFrom, from); Color.colorToHSV(colorTo, to); ValueAnimator animator = ValueAnimator.ofFloat(0, 1); final float[] hsv = new float[3]; animator.addUpdateListener(animation -> { // Transition along each axis of HSV (hue, saturation, value) hsv[0] = from[0] + (to[0] - from[0]) * animation.getAnimatedFraction(); hsv[1] = from[1] + (to[1] - from[1]) * animation.getAnimatedFraction(); hsv[2] = from[2] + (to[2] - from[2]) * animation.getAnimatedFraction(); target.setBackgroundColor(Color.HSVToColor(hsv)); }); animator.start();
27. ViewPropertyAnimator button.animate() .scaleX(2) .scaleY(2) .setDuration(3000) .setInterpolator(new BounceInterpolator()) .withEndAction(() -> button.setVisibility(View.GONE)) .start();
28. ViewPropertyAnimator vs Animator ViewPropertyAnimator › Uses Animator under the hood › For views only (for many properties) › Easy and flexible API Animator › More methods to control 28
29. Animator vs Animation Use Animator since Animation: › Bugs › Only changes the visual representation of an object › Only supports View animations 29
30. We want more Best practices for animations in Android
31. LayoutTransition <RelativeLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:animateLayoutChanges="true"> <!-- --> </RelativeLayout> relativeLayout.setLayoutTransition(new LayoutTransition());
32. LayoutTransition › Appear › Disappear › Change 32
33. Transition › Powerful › Very flexible API TransitionManager.beginDelayedTransition( container, new Transition() // some custom transition ); // change property of some view in the container Синий цвет не правильный
34. Transition scenes 34
35. More about transitions Backport › https://github.com/andkulikov/Transitions-Everywhere › Support library Articles › https://medium.com/@andkulikov/animate-all-the-things- transitions-in-android-914af5477d50 › https://medium.com/@andkulikov/support-library-for-transitions- overview-and-comparison-c41be713cf8c 35
36. Lollipop › Ripple effect › Shared element transition › Circular reveal › … 36
37. Ripple effect 37
38. Ripple effect API 21+ <ripple xmlns:android="http://schemas.android.com/apk/res/android" android:color="@color/white_dark"> <item android:drawable="@color/white"/> </ripple> Синий цвет не правильный
39. Ripple effect API <21 <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:drawable="@color/white_dark" android:state_pressed="true"/> <item android:drawable="@color/white"/> </selector> Синий цвет не правильный
40. Shared Element Transition › Strongly related with Transition API › Activity & Fragment › API 21+ (no backport) 40
41. Circular Reveal Animator animator = ViewAnimationUtils.createCircularReveal( animatingView, centerX, centerY, startRadius, endRadius ); //... animator.start();
42. Circular Reveal «Squared» backport https://github.com/ozodrukh/CircularRe veal 42
43. Physics-based animation Best practices for animations in Android
45. Spring Animation Animation driven by spring force (physics-based animation) 45
46. SpringAnimation SpringAnimation springAnimation = new SpringAnimation( button, DynamicAnimation.TRANSLATION_Y, 500 ); springAnimation.start();
47. Spring force › Damping ratio › Stiffness 47
48. SpringForce SpringAnimation springAnimation = new SpringAnimation( button, DynamicAnimation.TRANSLATION_Y, 500 ); SpringForce springForce = springAnimation.getSpring(); springForce.setDampingRatio(0.5f); springForce.setStiffness(1000f); springAnimation.start();
49. Spring animation › Support library › Facebook rebound http://facebook.github.io/rebound/ 49
50. FlingAnimation 50
51. FlingAnimation FlingAnimation flingAnimation = new FlingAnimation(mView, DynamicAnimation.TRANSLATION_X); flingAnimation.setStartVelocity(velocityX) .setMinValue(0) .setMaxValue(maxTranslationX) .setFriction(1.1f) .start();
52. FlingAnimation › Start velocity › Value range › Friction 52
53. Lottie 53
54. Lottie › Adobe after effects › Only with Android API (no native libraries) › Extremely simple › May be used for onboarding or splash › Complex animations are slow › Has almost all support libraries in dependency list (19k+ methods) 54
55. Other things Best practices for animations in Android
56. Time depends on distance 56
57. RecyclerView.ItemAnimator recyclerView.setItemAnimator(new DefaultItemAnimator() { @Override public boolean animateAdd(RecyclerView.ViewHolder holder) { return super.animateAdd(holder); } });
58. RecyclerView.ItemAnimator @Override protected void animateRemoveHolder(@NonNull RecyclerView.ViewHolder holder) { int duration = getResources().getInteger(R.integer.medium_animation_duration); ViewCompat.animate(holder.itemView) .translationX(holder.itemView.getRootView().getWidth()) .setDuration(duration) .setListener(new BaseItemAnimator.DefaultRemoveVpaListener(holder)) .setStartDelay(getRemoveDelay(holder)) .start(); }
59. Animation callbacks public final boolean isRunning(ItemAnimatorFinishedListener listener) { boolean running = isRunning(); if (listener != null) { if (!running) { listener.onAnimationsFinished(); } else { mFinishedListeners.add(listener); } } return running; } public final void dispatchAnimationsFinished() { final int count = mFinishedListeners.size(); for (int i = 0; i < count; ++i) { mFinishedListeners.get(i).onAnimationsFinished(); } mFinishedListeners.clear(); }
60. Animation callbacks › Changing items in RecyclerView may be performed without animation › Use LayoutManager to understand if change operation will be animated 60
61. And the last things › Are you inflating operations fast enough? › Increase animation duration during developing and debugging › Think about finishing animation in onPause method › Use animations! › Don’t use animations! 61
62. References goo.gl/b8EW95 62
63. avasilov@yandex-team.ru Best practices for animations in Android Artur Vasilov Android developer ArturVasilov ArturVasilov VasilovArtur