Animações Fluídas no Android - DevFestPR 17
0 likes108 views
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.
Animações Fluídas no Android - DevFestPR 17
- 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
- 12. Scale (Tamanho)
- 15. Interpolators • LinearInterpolator • AccelerateInterpolator • DecelerateInterpolator • AccelerateDecelerateInterpolator • OvershootInterpolator • AnticipateInterpolator • AnticipateOvershootInterpolator • BounceInterpolator • FastOutLinearInInterpolator • FastOutSlowInInterpolator • LinearOutSlowInInterpolator
- 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(); }
- 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
- 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?