The document discusses different animation techniques for Android, including property animation, view animation, object animator, view property animator, value animator, and physics-based animation using the support library. It provides code examples for creating animations that change the alpha, scale, rotation, and translation of views. It also covers using interpolators, listeners, spring animations, and fling animations to control the motion and timing of animations.

1. Animações Fluídas no Android
Renato Peterman

2. Eu
• Indie
• Biticker - Cryptocurrencies Ticker App
• #1 (ou #2) top pagos Finanças Play Store
• #82 Top Finanças AppStore
• barcodr.co
• iBafômetro iOS
• outros…
• Craftlog.com - Co-founder / Desenvolvedor
• AllTheCooks/Cookpad - Desenvolvimento móvel
• Time global (Estados Unidos, Espanha, Líbano, Indonesia, Japão, Brasil)
• Conex - Co-founder / Desenvolvedor

4. • Property Animation (API Level 11 - Android 3+)
• View Animation
• Drawable Animations
• Physics-Based Animations (Support Library)
• Canvas, OpenGL e etc…
API’s

5. • API Level 11 - Android 3+
• ObjectAnimator
• ViewPropertyAnimator (API Level 12+) 😍
• ValueAnimator
• Alpha, TranslateY, TranslateX, ScaleX, ScaleY, Rotation, RotationX,
RotationY, X, Y…
• Animator class
• AnimatorSet
Property Animation

6. • Simples e Conveniente
• Fluent API
• myView.animate().alpha(1f).x(200);
• Apenas Views
ViewPropertyAnimator

7. • API Antiga
• <alpha>, <scale>, <translate>, <rotate> e <set>
• AnimationSet
• Animation class
View Animation

10. Animações e Propriedades

11. Alpha (Transparência)

12. Scale (Tamanho)

13. Rotation (Rotação)

14. Translation (Mover)Y
X

15. Interpolators
• LinearInterpolator
• AccelerateInterpolator
• DecelerateInterpolator
• AccelerateDecelerateInterpolator
• OvershootInterpolator
• AnticipateInterpolator
• AnticipateOvershootInterpolator
• BounceInterpolator
• FastOutLinearInInterpolator
• FastOutSlowInInterpolator
• LinearOutSlowInInterpolator

16. Interpolators
LinearInterpolator()
AccelerateInterpolator()
DecelerateInterpolator()

19. View Animation

20. View Animation
<?xml version="1.0" encoding="utf-8"?>
<set
xmlns:android="http://schemas.android.com/apk/res/android"
android:duration=“600"
android:fillAfter="true"
>
<alpha
android:fromAlpha="1.0"
android:toAlpha="0.5"
/>
<translate
android:fromXDelta="0"
android:toXDelta=“90%p"
/>
</set>
/anim/translate_x_and_scale_view_animation.xml

21. View Animation
private View myView;
protected void playViewAnimation() {
Animation animation = AnimationUtils.loadAnimation(this,
R.anim.translate_x_and_scale_view_animation);
myView.startAnimation(animation);
}

22. ObjectAnimator

23. ObjectAnimator (XML)
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<objectAnimator
android:valueFrom="0"
android:valueTo="250dp"
android:propertyName="translationX"
android:duration="600"
android:interpolator="@android:anim/linear_interpolator"
/>
<objectAnimator
android:valueFrom=“1.0”
android:valueTo=“0.5"
android:propertyName="alpha"
android:duration=“600"
android:interpolator="@android:anim/accelerate_decelerate_interpolator"
/>
</set>
/animator/rotate_and_translate_horizontal_object_animator.xml

24. ObjectAnimator (XML)
private View myView;
protected void playObjectAnimatorFromXml() {
// load the animator set
Animator animator = AnimatorInflater.loadAnimator(this,
R.animator.rotate_and_translate_horizontal_object_animator);
// set the view target
animator.setTarget(myView);
// play!
animator.start();
}

25. ObjectAnimator (Código)
private View myView;
// translation X animation
float positionStart = 0;
float positionEnd = Utils.dpToPx(this, 250);
Animator translationAnimator = ObjectAnimator.ofFloat(myView,
View.TRANSLATION_X,
positionStart,
positionEnd
);

26. ObjectAnimator (Código)
private View myView;
// rotation animation
float rotationStart = 0;
float rotationEnd = 720;
Animator rotationAnimator = ObjectAnimator.ofFloat(myView,
View.ROTATION,
rotationStart,
rotationEnd
);

27. ObjectAnimator (Código)
// play together
AnimatorSet animatorSet = new AnimatorSet();
animatorSet.setDuration(600); // 600 millisegundos
// executa as animacoes todas ao mesmo tempo
animatorSet.playTogether(translationAnimator, rotationAnimator);
animatorSet.start();

28. ObjectAnimator (Código)
protected void playObjectAnimatorFromCode() {
// translation X animation
float positionStart = 0;
float positionEnd = Utils.dpToPx(this, 250);
Animator translationAnimator = ObjectAnimator.ofFloat(myView,
View.TRANSLATION_X,
positionStart,
positionEnd
);
// rotation animation
float rotationStart = 0;
float rotationEnd = 720;
Animator rotationAnimator = ObjectAnimator.ofFloat(myView,
View.ROTATION,
rotationStart,
rotationEnd
);
// Animator setplay together
AnimatorSet animatorSet = new AnimatorSet();
animatorSet.setDuration(600); // 600 millisegundos
animatorSet.playTogether(translationAnimator, rotationAnimator);
animatorSet.start();
}

29. ViewPropertyAnimator

30. ViewPropertyAnimator
protected void playViewPropertyAnimator() {
float positionEnd = Utils.dpToPx(this, 250);
float rotationEnd = 720;
iconViewPropertyAnimator
.animate()
.setDuration(600)
.translationX(positionEnd)
.rotation(rotationEnd);
}

31. ValueAnimator

32. ValueAnimator (XML)
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<animator
android:valueType="floatType"
android:valueFrom="0f"
android:valueTo="1f"
android:duration="600"
/>
</set>
/animator/alpha_value_animator.xml

33. ValueAnimator
private View myView;
protected void playAlphaValueAnimator() {
// carrega animacao do XML
/* ValueAnimator va = (ValueAnimator) AnimatorInflater
.loadAnimator(this, R.animator.alpha_value_animator); */
// cria objeto programaticamente
ValueAnimator va = ValueAnimator.ofFloat(0f, 1f);
va.setDuration(600);
va.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator valueAnimator) {
float animatedValue = (float) valueAnimator.getAnimatedValue();
myView.setAlpha(animatedValue);
}
});
va.start();
}

34. • Animator.AnimatorListener
• onAnimationStart()
• onAnimationEnd()
• onAnimationRepeat()
• onAnimationCancel()
• ValueAnimator.AnimatorUpdateListener
• onAnimationUpdate()
Listeners

35. Physics-Based Animation
(aplicando física as animações)

36. • Support Library 25.4.0+
• Movimentos mais suaves e naturais
• Maior fluidez e responsividade
• Facebook Rebound
Physics-Based Animation

37. Support Library
dependencies {
compile "com.android.support:support-dynamic-animation:27.0.0"
}

40. • DynamicAnimation
• SpringAnimation
• SpringForce
• FlingAnimation
Classes

41. Exemplos
SpringAnimation FlingAnimation

42. • Damping ratio (amortecimento)
• DAMPING_RATIO_HIGH_BOUNCY (0.2f)
• DAMPING_RATIO_MEDIUM_BOUNCY (0.5f)
• DAMPING_RATIO_LOW_BOUNCY (0.75f)
• DAMPING_RATIO_NO_BOUNCY (1f)
• Stiffness (rigidez)
• STIFFNESS_HIGH (10.000f)
• STIFFNESS_MEDIUM (1500f)
• STIFFNESS_LOW (200f)
• STIFFNESS_VERY_LOW (50f)
SpringAnimation

43. Damping ratio (amortecimento)
High Bounce Medium Bounce Low Bounce No Bounce

44. Stiffness (Rigidez)
High Stiffness Medium Stiffness Low Stiffness Very Low Stiffness

45. SpringAnimation
private View myView;
private void createSimpleSpringAnimation() {
// calcula a posição Y - convert 100dp para pixels
float endPosition = Utils.dpToPx(this, 100);
// cria a animacao
SpringAnimation anim = new SpringAnimation(myView,
SpringAnimation.TRANSLATION_Y,
endPosition
);
// altera o damping (amortecimento)
anim.getSpring().setDampingRatio(SpringForce.DAMPING_RATIO_MEDIUM_BOUNCY);
// altera o stiffness (rigidez)
anim.getSpring().setStiffness(SpringForce.STIFFNESS_LOW);
// inicia na animcação
anim.start();
}

46. FlingAnimation
FlingAnimation animation = new FlingAnimation(myView, DynamicAnimation.SCROLL_X);
animation.setStartVelocity(-velocityX)
.setMinValue(0)
.setMaxValue(maxScroll)
.setFriction(1.1f)
.start();

48. • UI Thread: só o necessário!!!1!
• AnimatorSet
• ViewPropertyAnimator
🚫 Reflection
🚫 JNI
• Hardware acceleration
Dicas

49. • Android Animation and Graphics Guide
https://developer.android.com/guide/topics/graphics/index.html
• Introducing ViewPropertyAnimator
https://android-developers.googleblog.com/2011/05/introducing-
viewpropertyanimator.html
• Physics-based Animations
https://developer.android.com/guide/topics/graphics/physics-based-
animation.html
Referências

50. Dúvidas?

52. Obrigado!
www.renatopeterman.com.br
@renatopeterman
github.com/renatopeterman