Introdução a animações no Android

Apresentação no Android Meetup BH #03

Transcript

1. Introdução a animações no Android Apenas o básico https://docs.google.com/presentation/d/1VM_rcAb2iWpCXJEgAmJGDfyw543iXD1o5Qmbsx2cGc4/edit?usp=sharing
2. Sobre mim • Anderson Ribeiro e Silva; • Android Developer na CI&T; • Trabalho com Android há 1 ano.
3. Tópicos • View Animation • Property Animation • ViewPropertyAnimator • Interpolators • LayoutTransition • RecyclerView animations • Window Animations • Scenes and Transitions
4. View Animation • Anima o desenho de uma view (AlphaAnimation, RotateAnimation, ScaleAnimation, TranslateAnimation); • Presente desde a API 1; • Definidas por XML ou programaticamente; • Apenas anima o desenho.
5. anim/rotation_alpha.xml <?xml version="1.0" encoding="utf-8"?> <set xmlns:android= "http://schemas.android.com/apk/res/android" android:shareInterpolator= "false" > <rotate android:interpolator= "@android:anim/linear_interpolator" android:pivotX= "50%" android:pivotY= "50%" android:duration= "750" android:fromDegrees= "0" android:toDegrees= "360" android:repeatCount= "-1" /> <alpha android:interpolator= "@android:anim/accelerate_decelerate_interpolator" android:duration= "250" android:fromAlpha= "1" android:toAlpha= "0" android:repeatMode= "reverse" android:repeatCount= "-1" /> </set>
6. Carregando a animação para utilização final Animation rotation = AnimationUtils.loadAnimation(this, R.anim.rotation_alpha); imageView.startAnimation(rotation);
7. Criando a animação programaticamente RotateAnimation rotate = new RotateAnimation(0, 360, Animation.RELATIVE_TO_SELF, .5f, Animation.RELATIVE_TO_SELF, .5f); rotate.setDuration(750); rotate.setInterpolator(new LinearInterpolator()); rotate.setRepeatCount(Animation.INFINITE); AlphaAnimation alpha = new AlphaAnimation(1f, 0f); alpha.setDuration(250); alpha.setInterpolator(new AccelerateDecelerateInterpolator()); alpha.setRepeatMode(Animation.REVERSE); alpha.setRepeatCount(Animation.INFINITE); AnimationSet animation = new AnimationSet(false); animation.addAnimation(rotate); animation.addAnimation(alpha); imageView.startAnimation(animation);
8. https://www.youtube.com/watch?v=3IXtw35IDzg
9. Property Animation • Anima qualquer propriedade de qualquer objeto; • Presente desde API 11 (NineOldAndroids); • Definidas por XML ou programaticamente; • Possibilidade de pausar animação (API 19); • ValueAnimator, ObjectAnimator.
10. animator/rotation_alpha.xml <?xml version="2.0" encoding="utf-8"?> <set xmlns:android= "http://schemas.android.com/apk/res/android" android:shareInterpolator= "false" > <objectAnimator android:interpolator= "@android:anim/linear_interpolator" android:propertyName= "rotation" android:duration= "1500" android:valueType= "floatType" android:valueFrom= "0" android:valueTo= "360" android:repeatCount= "-1" /> <objectAnimator android:interpolator= "@android:anim/accelerate_decelerate_interpolator" android:propertyName= "alpha" android:duration= "500" android:valueType= "floatType" android:valueFrom= "1" android:valueTo= "0" android:repeatMode= "reverse" android:repeatCount= "-1" /> </set>
11. Carregando a animação para utilização final Animator animator = AnimatorInflater.loadAnimator(this, R.animator.rotation); animator.setTarget(imageView); animator.start();
12. Criando a animação programaticamente ObjectAnimator rotation = ObjectAnimator .ofFloat(target, "rotation", 0, 360); rotation.setInterpolator (new LinearInterpolator ()); rotation.setRepeatCount (ObjectAnimator .INFINITE); rotation.setDuration(1500); ObjectAnimator alpha = ObjectAnimator .ofFloat(target, "alpha", 1, 0); alpha.setInterpolator (new AccelerateDecelerateInterpolator ()); alpha.setRepeatCount (ObjectAnimator .INFINITE); alpha.setRepeatMode(ObjectAnimator .REVERSE); alpha.setDuration(500); AnimatorSet animator = new AnimatorSet(); animator.play(rotation).with(alpha); animator.start();
13. https://www.youtube.com/watch?v=tSpDYlrXeh0
14. Métodos para criação de Animators ObjectAnimator .ofFloat(target, "alpha", from, to); ObjectAnimator .ofInt(target, "translationX" , from, to); ObjectAnimator .ofArgb(target, "textColor", from, to); // API 21
15. Animando múltiplas propriedades de um objeto PropertyValuesHolder translationXValuesHolder = PropertyValuesHolder .ofFloat("translationX" , fromX, toX); PropertyValuesHolder translationYValuesHolder = PropertyValuesHolder .ofFloat("translationY" , fromY, toY); ObjectAnimator .ofPropertyValuesHolder (target, translationXValuesHolder , translationYValuesHolder );
16. android.util.Property • Define "getters" e "setters" para uma propriedade de um tipo; • Implementações nativas: View.ALPHA, View.TRANSLATION_X, View.TRANSLATION_Y, View.TRANSLATION_Z, View.X, View.Y, View.Z, View. ROTATION, View.ROTATION_X, View.ROTATION_Y, View. SCALE_X, View.SCALE_Y
17. ObjectAnimator.ofFloat(target, "alpha", from, to);
18. ObjectAnimator.ofFloat(target, View.ALPHA, from, to);
19. Utilizando android.util.Property para Animators public static final Property<ProgressBar, Integer> PROGRESS = new Property<ProgressBar, Integer>(Integer.class, "progress") { @Override public void set(ProgressBar view, Integer value) { view.setProgress(value); } @Override public Integer get(ProgressBar view) { return view.getProgress(); } }; ObjectAnimator.ofInt(myProgressBar, PROGRESS, from, to);
20. Criando um ValueAnimator para animação de cor final int colorStart = ContextCompat.getColor(PropertyAnimationActivity .this, R.color.colorAccent); final int colorEnd = ContextCompat.getColor(PropertyAnimationActivity .this, R.color.colorPrimary); final ValueAnimator valueAnimator = ValueAnimator.ofFloat(0, 1); final ArgbEvaluator argbEvaluator = new ArgbEvaluator(); valueAnimator.addUpdateListener (new ValueAnimator.AnimatorUpdateListener () { @Override public void onAnimationUpdate (ValueAnimator animation) { int color = (Integer) argbEvaluator.evaluate(animation.getAnimatedFraction (), colorStart, colorEnd); buttonStop.setTextColor(color); } });
21. ViewPropertyAnimator • Anima as propriedades de uma view; • Introduzido na API 12; • Fácil API; • Otimizado quando há a necessidade de animar várias propriedades de uma view; • Independente de View Animation e Property Animation.
22. Java view.animate() .alpha(0.5f) .rotation(360) .setDuration(750);
23. Direfenças entre View Animation, Property Animation e ViewPropertyAnimator View Animation Property Animation ViewPropertyAnimator Aplica-se somente a algumas propriedades de objetos view Aplica-se a quaisquer objetos e propriedades Aplica-se somente a algumas propriedades de objetos view Anima somente o desenho da view, e não suas propriedades reais Anima as propriedades reais do objeto Anima as propriedades reais do objeto XML e Java XML e Java Somente Java
24. Interpolators Definem como a animação será executada durante o tempo.
25. AccelerateDecelerateInterpolator, AccelerateInterpolator, AnticipateInterpolator, AnticipateOvershootInterpolator, BaseInterpolator, BounceInterpolator, CycleInterpolator, DecelerateInterpolator, FastOutLinearInInterpolator, FastOutSlowInInterpolator, LinearInterpolator, LinearOutSlowInInterpolator, OvershootInterpolator, PathInterpolator
26. https://www.youtube.com/watch?v=6UL7PXdJ6-E
27. Criando um Custom Interpolator public class HesitateInterpolator implements Interpolator { public float getInterpolation(float t) { float x=2.0f*t-1.0f; return 0.5f*(x*x*x + 1.0f); } }
28. LayoutTransition • Anima alterações de layout dos filhos de uma view; • Utiliza Property Animation; • Animações em cinco situações: APPEARING, DISAPPEARING, CHANGING, CHANGE_APPEARING, CHANGE_DISAPPEARING. • Animações são disparadas sempre que existe uma alteração de layout. Exemplos: addView(), removeView(), setVisibility();
29. <LinearLayout xmlns:android= "http://schemas.android.com/apk/res/android" android:id="@+id/layout" android:layout_width= "match_parent" android:layout_height= "match_parent" android:animateLayoutChanges= "true" android:orientation= "vertical"> ... </LinearLayout>
30. Customizando animações de LayoutTransition LayoutTransition layoutTransition = layout.getLayoutTransition(); layoutTransition.setAnimator(LayoutTransition.APPEARING, AnimatorInflater.loadAnimator (this, R.animator.scale_up)); if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN) { layout.getLayoutTransition().enableTransitionType(LayoutTransition.CHANGING); }
31. https://www.youtube.com/watch?v=TuEkJgUhBds
32. RecyclerView Animations • Anima mudanças das views após notificações no adapter (notifiyItemInserted, notifyItemRemoved); • Utiliza PropertyAnimation.
33. Java recyclerView.setAdapter(myAdapter); recyclerView.setLayoutManager (new LinearLayoutManager (this)); recyclerView.setItemAnimator (new DefaultItemAnimator ());
34. android.support.v7.widget.SimpleItemAnimator new SimpleItemAnimator() { @Override public boolean animateRemove(RecyclerView.ViewHolder holder); @Override public boolean animateAdd(RecyclerView.ViewHolder holder); @Override public boolean animateMove(RecyclerView.ViewHolder holder, int fromX, int fromY, int toX, int toY); @Override public boolean animateChange(RecyclerView.ViewHolder oldHolder, RecyclerView.ViewHolder newHolder, int fromLeft, int fromTop, int toLeft, int toTop); @Override public void runPendingAnimations(); @Override public void endAnimation(RecyclerView.ViewHolder item); @Override public void endAnimations(); @Override public boolean isRunning(); }
35. github.com/wasabeef/recyclerview-animators
36. RecyclerView recyclerView = (RecyclerView) findViewById(R.id.list); recyclerView.setItemAnimator(new SlideInUpAnimator(new OvershootInterpolator(1f)));
37. Window Animations • Disponível desde API 5; • Utiliza View Animations para transição de Activities.
38. CallingActivity.java startActivity(intent); overridePendingTransition(R.anim.right_in, R.anim.left_out);
39. Anywhere.java (API 16) Bundle options = ActivityOptions .makeCustomAnimation ( context, R.anim.right_in, R.anim.left_out).toBundle(); startActivity(intent, options);
40. CalledActivity.java @Override public void finish() { super.finish(); overridePendingTransition (R.anim.left_in, R.anim.right_out); }
41. https://www.youtube.com/watch?v=0lB48-Nenv8
42. Scenes and Transitions • Animações de uma cena para outra; • Disponível na API 19; • Utiliza Property Animation; • Shared elements (API 21), para animar uma mesma view presente nas duas activities da transição.
44. Transitions disponíveis • ChangeBounds, ChangeClipBounds; • ChangeImageTransform; • ChangeScroll; • ChangeTransform (scale e rotation); • Visibility, AutoTransition, Explode, Fade, Slide.
45. Tipos de Transition Activity 1 Activity 2 Exit em Activity 1 Enter em Activity 2 Reenter em Activity 1 Return em Activity 2 • android:windowEnterTransition • android:windowExitTransition • android:windowReenterTransition • android:windowReturnTransition
46. Criando uma custom transition public class CustomTransition extends Transition { @Override public void captureStartValues (TransitionValues values) {} @Override public void captureEndValues (TransitionValues values) {} @Override public Animator createAnimator (ViewGroup sceneRoot, TransitionValues startValues, TransitionValues endValues) {} }
47. Habilitando WindowTransitions pelo tema <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar" > <item name="android:windowActivityTransitions" >true</item> <item name="android:windowEnterTransition" >@transition/explode </item> <item name="android:windowSharedElementEnterTransition" >@transition/change_bounds </item> </style>
48. activity_main.xml <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent" android:gravity="center_vertical" > ... <Button android:id="@+id/button_scene_transition" android:layout_width="match_parent" android:layout_height="wrap_content" android:transitionName="@string/transition_button_scene" android:text="Scene Transition" /> ... </LinearLayout>
49. activity_two.xml <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" > ... <Button android:id="@+id/another_button_id" android:layout_width="match_parent" android:layout_height="wrap_content" android:transitionName="@string/transition_button_scene" android:text="Scene Transition" /> ... </RelativeLayout>
50. MainActivity.java Intent intent = new Intent(MainActivity.this, SceneTransitionActivity.class); ActivityOptionsCompat activityOptions = ActivityOptionsCompat.makeSceneTransitionAnimation( MainActivity.this, findViewById(R.id.button_scene_transition), getString(R.string.transition_button_scene) ); ActivityCompat.startActivity(MainActivity.this, intent, activityOptions.toBundle()); SceneTransitionActivity.java supportFinishAfterTransition();
51. https://www.youtube.com/watch?v=VLq2kNBoUho
52. Referências • Android Developers • https://github.com/lgvalle/Material-Animations • https://github.com/nickbutcher/plaid
53. Dúvidas?
54. Obrigado! https://github.com/dimrsilva/android-animations-examples