Stop running from animations

Creating eye candy animations takes time and effort, but the end result is worth it. To make your life a bit easier, in this talk Ivan will share with you 10 tips he learned while working on all sorts of animations. Those tips will help you break your fear of animations and after this talk, you will have no more excuses.

Transcript

1. Stop Running from Animations IVAN MARIĆ, @MARIC_IV ANDROID TEAM LEAD
3. https://www.ted.com/talks/ chris_hadfield_what_i_learned_from_going_blind_in_space
5. 01 JUST DO IT
8. 02 LEARN THE BASICS
9. PROPERTY ANIMATION Powerful framework Value oriented Animate any object
10. VALUE ANIMATOR Foundation of animations Provide current value at any time No target object
11. ValueAnimator startValue endValue duration Elapsed Time Object 1 setTargetProperty() getAnimatedValue() Object n setTargetProperty() . . .
12. OBJECT ANIMATOR Add target Object instance Object property
13. ObjectAnimator animatorX = ObjectAnimator .ofFloat(animatedView, "translationX", 0, dx).setDuration(ANIM_DURATION); ObjectAnimator animatorY = ObjectAnimator .ofFloat(animatedView, "translationY", 0, dy).setDuration(ANIM_DURATION); AnimatorSet animator = new AnimatorSet(); animator.playTogether(animatorX, animatorY); animator.start(); OBJECT ANIMATOR
14. ObjectAnimator animatorX = ObjectAnimator .ofFloat(animatedView, "translationX", 0, dx).setDuration(ANIM_DURATION); ObjectAnimator animatorY = ObjectAnimator .ofFloat(animatedView, "translationY", 0, dy).setDuration(ANIM_DURATION); AnimatorSet animator = new AnimatorSet(); animator.playTogether(animatorX, animatorY); animator.start(); OBJECT ANIMATOR
15. ObjectAnimator animatorX = ObjectAnimator .ofFloat(animatedView, "translationX", 0, dx).setDuration(ANIM_DURATION); ObjectAnimator animatorY = ObjectAnimator .ofFloat(animatedView, "translationY", 0, dy).setDuration(ANIM_DURATION); AnimatorSet animator = new AnimatorSet(); animator.playTogether(animatorX, animatorY); animator.start(); OBJECT ANIMATOR float getTranslationX() setTranslationX(float)
16. animatedView.animate() .translationX(dx) .translationY(dy) .setDuration(ANIM_DURATION) .start(); VIEW PROPERTY ANIMATION
17. DARK AGE
18. DARK AGE VIEW ANIMATIONS
19. VIEW ANIMATION Alpha Scale Translate Rotate
20. Animation animation = new TranslateAnimation(0, dx, 0, dy); animation.setDuration(ANIM_DURATION); animation.setFillAfter(true); animatedView.startAnimation(animation); VIEW ANIMATION
21. Animation animation = new TranslateAnimation( Animation.RELATIVE_TO_PARENT, 0f, Animation.RELATIVE_TO_PARENT, 0.9f, Animation.RELATIVE_TO_PARENT, 0f, Animation.RELATIVE_TO_PARENT, 0.9f); animation.setDuration(ANIM_DURATION); animation.setFillAfter(true); animatedView.startAnimation(animation); VIEW ANIMATION
22. VIEW ANIMATION MISCONCEPTIONS Deprecated Refactor Don’t use them
23. Move & fade out text Move & fade in text Scale & fade out all
24. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent"> <ImageView android:id="@+id/logo" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/infinum_logo" android:layout_above="@+id/firstText"/> <TextView android:id="@id/firstText" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_centerInParent="true" android:text="@string/first_text"/> <TextView android:id="@+id/secondText" android:layout_width="match_parent" android:layout_height="wrap_content" android:visibility="invisible" android:layout_centerInParent="true" android:text="@string/second_text"/> </RelativeLayout>
25. Move & fade out text TranslateAnimation moveOutText = new TranslateAnimation( Animation.RELATIVE_TO_SELF, 0f, Animation.RELATIVE_TO_SELF, 0f, Animation.RELATIVE_TO_SELF, 0f, Animation.RELATIVE_TO_SELF, -0.8f); AlphaAnimation fadeOut = new AlphaAnimation(1f, 0f); AnimationSet firstTextAnimation = new AnimationSet(true); firstTextAnimation.addAnimation(moveText); firstTextAnimation.addAnimation(fadeOut); firstTextAnimation.setDuration(600);
26. Move & fade in text TranslateAnimation moveInText = new TranslateAnimation( Animation.RELATIVE_TO_SELF, 0f, Animation.RELATIVE_TO_SELF, 0f, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0f); AlphaAnimation fadeIn = new AlphaAnimation(0f, 1f); AnimationSet secondTextAnimation = new AnimationSet(true); secondTextAnimation.addAnimation(moveInText); secondTextAnimation.addAnimation(fadeIn); secondTextAnimation.setDuration(600); secondTextAnimation.setFillAfter(true);
27. Scale & fade out all ScaleAnimation logoScaleAnimation = new ScaleAnimation( 1f, 2f, 1f, 2f, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 1f); ScaleAnimation textScaleAnimation = new ScaleAnimation( 1f, 2f, 1f, 2f, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0f); AnimationSet logoAnim = new AnimationSet(true); logoAnim.addAnimation(logoScaleAnimation); logoAnim.addAnimation(fadeOut); logoAnim.setDuration(800); logoAnim.setStartOffset(800); logoAnim.setFillAfter(true); AnimationSet textAnim = new AnimationSet(true); textAnim.addAnimation(textScaleAnimation); textAnim.addAnimation(fadeOut); textAnim.setDuration(800); textAnim.setStartOffset(800); textAnim.setFillAfter(true);
28. firstTextAnimation.setAnimationListener( new Animation.AnimationListener() { @Override public void onAnimationEnd(Animation animation) { firstText.setVisibility(View.INVISIBLE); secondText.setVisibility(View.VISIBLE); secondText.startAnimation(secondTextAnimation); } }); secondTextAnimation.setAnimationListener( new Animation.AnimationListener() { @Override public void onAnimationEnd(Animation animation) { logo.startAnimation(logoAnim); secondText.startAnimation(textAnim); } }); firstText.startAnimation(firstTextAnimation);
29. firstText.animate().alpha(0f) .translationY(firstText.getHeight()) .setDuration(600); secondText.setTranslationY(secondText.getHeight() / 2); secondText.setAlpha(0); secondText.animate().alpha(1f) .translationY(0) .setDuration(600); logo.setPivotX(logo.getWidth() / 2f); logo.setPivotY(logo.getHeight()); secondText.setPivotX(secondText.getWidth() / 2f); secondText.setPivotY(0); logo.animate().alpha(0) .scaleX(2).scaleY(2) .setDuration(800).setStartDelay(800); secondText.animate().alpha(0) .scaleX(2).scaleY(2) .setDuration(800).setStartDelay(800);
31. 03 PHYSICS MATTER
32. START VALUE END VALUE
33. START VALUE END VALUE DURATION
34. INTERPOLATION float getInterpolation (float input) 0 1 START END INPUT OUTPUT
35. Mapped value 0 0,2 0,4 0,6 0,8 1 1,2 Elapsed time 0 0,2 0,4 0,6 0,8 1 Linear Accelerate Overshoot
36. LINEAR ACCELERATE DECELERATE
37. LINEAR ACCELERATE DECELERATE
38. https://robots.thoughtbot.com/android-interpolators-a-visual-guide AccelerateDecelerateInterpolator AccelerateInterpolator AnticipateInterpolator AnticipateOvershootInterpolator BounceInterpolator CycleInterpolator DecelerateInterpolator FastOutLinearInInterpolator FastOutSlowInInterpolator LinearInterpolator LinearOutSlowInInterpolator OvershootInterpolator PathInterpolator
43. 04 FOR EVERYTHING ELSE THERE IS CANVAS
44. @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); } VIEW
45. HOW IT WORKS Determine elapsed time Calculate positions, sizes, colors…. Draw objects Repeat → Invalidate view with delay
46. public class AnimatedDrawable extends Drawable public AnimatedDrawable() { // Init all Paint and other resources used in draw method } @Override public void draw(Canvas canvas) { } }
47. public class AnimatedDrawable extends Drawable implements Animatable { public AnimatedDrawable() { // Init all Paint and other resources used in draw method } @Override public void draw(Canvas canvas) { draw(canvas, (SystemClock.uptimeMillis() - startTime) / DURATION); } @Override public void start() { startTime = SystemClock.uptimeMillis(); } }
48. public class AnimatedDrawable extends Drawable implements Animatable, Runnable, Drawable.Callback { public AnimatedDrawable() { // Init all Paint and other resources used in draw method } @Override public void draw(Canvas canvas) { draw(canvas, (SystemClock.uptimeMillis() - startTime) / DURATION); } @Override public void start() { startTime = SystemClock.uptimeMillis(); } @Override public void run() { invalidateSelf(); scheduleSelf(this, SystemClock.uptimeMillis() + FRAME_DELAY); } @Override public void invalidateDrawable(Drawable who) { who.invalidateSelf(); } }
50. 05 MATH IS YOUR FRIEND
51. WHAT YOU NEED TO KNOW Algebra Trigonometry Linear Algebra Calculus Geometry
52. Don’t have to be a math wizard
56. WHAT CAN YOU DO Don’t slack on math class Learn and research Search practical use
57. WHAT CAN YOU DO Probably too late for that Learn and research Search practical use
58. POLAR COORDINATES (r, ϕ)
59. 06 MAKE A ROUTINE
60. TIME CONSUMPTION Lot of tweaking No motivation Last thing on your list
61. TIME CONSUMPTION Lot of tweaking No motivation Last thing on your list Just like testing
66. 07 ANIMATE ALL THE THINGS
68. WHAT TO ANIMATE Screen transitions New information Long running actions User feedback Boring screens
69. WHAT TO ANIMATE Screen transitions New information Long running actions User feedback Boring screens
70. SCREEN TRANSITION Reveal views overridePendingTransition(); Custom and shared element transitions XML configuration
71. WHAT TO ANIMATE Screen transitions New information Long running actions User feedback Boring screens
72. WHAT TO ANIMATE Screen transitions New information Long running actions User feedback Boring screens
73. WHAT TO ANIMATE Screen transitions New information Long running actions User feedback Boring screens
74. WHAT TO ANIMATE Screen transitions New information Long running actions User feedback Boring screens
75. 08 LOADING…
76. WHEN Always for a long running actions
77. WHEN Always for a long running actions
78. IMPROVE Show it with a delay Show it for some period of time
82. DRAWABLE ANIMATION AnimationDrawable drawable = (AnimationDrawable) ContextCompat .getDrawable(this, R.drawable.drawable_animation); image.setImageDrawable(drawable); drawable.start(); <animation-list xmlns:android="http://schemas.android.com/apk/res/android" android:oneshot="false"> <item android:drawable="@drawable/anim_000" android:duration="30"/> <item android:drawable="@drawable/anim_001" android:duration="30"/> <item android:drawable="@drawable/anim_002" android:duration="30"/> <item android:drawable="@drawable/anim_003" android:duration="30"/> <!--...-->
84. LOTTIE https://airbnb.design/lottie/
85. 09 PERFECT TIMING
86. HUMAN PROCESSOR MODEL Eye movement time 230 ms Visual image storage 200 ms Be quick, be readable
88. ANIMATION LISTENER Delays and offsets onStart, onEnd, onRepeat onCancel onUpdate → SDK 19+
89. THINKING OUTSIDE THE BOX Post runnable ValueAnimator Animation set Custom or extend Animation
90. 10 DON’T JUDGE BY YOURSELF
91. De gustibus non est disputandum. - IN MATTERS OF TASTE, THERE CAN BE NO DISPUTES
92. SHOW IT TO OTHERS Colleagues, friends, family… You can brag Negative feedback
96. Thank you! IVAN.MARIC@INFINUM.CO @MARIC_IV Visit infinum.co or find us on social networks: infinum.co infinumco infinumco infinum