Talk from droidcon London 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.

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. 01JUST DO IT

8. 02LEARN 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. 03PHYSICS 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. Mappedvalue
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. 04FOR 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. 05MATH 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. 06MAKE 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. 07ANIMATE 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. 08LOADING…

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. 09PERFECT TIMING

86. HUMAN PROCESSOR MODEL
Eye movement time 230 ms
Visual image storage 200 ms
Be quick, be readable

88. ANIMATION LISTENER
Avoid delays and offsets
onStart, onEnd, onRepeat
onCancel
onUpdate → SDK 19+

89. SOLUTION
ValueAnimator
Animation set
Custom or extend Animation
Drawable animation

90. 10DON’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