1. 程式人生 > >Android RecyclerView 詳解 RecyclerView的動畫實現(移除、新增、改變、移動)和自定義動畫的實現

Android RecyclerView 詳解 RecyclerView的動畫實現(移除、新增、改變、移動)和自定義動畫的實現

一丶新增刪除時候的重新整理問題

先上一下效果圖吧

1.為了方便起見我們還是先新增三個按鈕分別實現新增刪除和改變

2.在Adapter中寫呼叫方法並進行重新整理

  1. public void remove(int position){

  2. list.remove(position);

  3. notifyItemRemoved(position);

  4. }

  5. public void add(int position,String data) {

  6. list.add(position,data);

  7. notifyItemInserted(position);

  8. }

  9. public void change(int position,String data) {

  10. list.remove(position);

  11. list.add(position,data);

  12. notifyItemChanged(position);

  13. }

可以發現他和ListView的重新整理不同的是,對應不同的刪除新增或者改變對應的notify都是不同的,如果不這樣的話那麼新增刪除改變的動畫將沒有。

3.在Mainactivity中呼叫方法就好

  1. case R.id.btn_add:

  2. myAdapter.add(0,"新加資料");

  3. myRecyclerView.scrollToPosition(0);

  4. break;

  5. case R.id.btn_delete:

  6. myAdapter.remove(0);

  7. break;

  8. case R.id.btn_change:

  9. myAdapter.change(0,"改變的資料");

  10. break;

注意!!!可以發現增加的時候多了一個方法,那麼這個方法是定位顯示的條目位置的,當你新新增方法的時候他不會顯示出來,需要將條目位置進行設定。  

二、對原動畫進行更改達到自己想要的動畫

1.如何設定原動畫

  1. //設定預設動畫

  2. DefaultItemAnimator animator = new DefaultItemAnimator();

  3. //設定動畫時間

  4. animator.setAddDuration(2000);

  5. animator.setRemoveDuration(2000);

  6. myRecyclerView.setItemAnimator(animator);

2.設定自己自定義的動畫

(1)首先這些動畫的方法都是私有的所以我們沒有辦法去重寫他,那麼我們可以新建一個屬於自己的動畫類來實現自定義動畫

(2)自定義動畫的實現(依然為了方便起見我們新增四個按鈕來動態的設定自定義動畫方便對比)

a.首先我們需要建一個自己的動畫類將原本的那個程式碼全部複製過來

b.刪除動畫(滑動消失)

先來效果圖吧

原始碼

  1. @Override

  2. public boolean animateRemove(final ViewHolder holder) {

  3. resetAnimation(holder);

  4. mPendingRemovals.add(holder);

  5. return true;

  6. }

這段程式碼是將移除動畫新增到集合當中

真正執行移除的動畫程式碼如下(原始碼)

  1. private void animateRemoveImpl(final ViewHolder holder) {

  2. final View view = holder.itemView;//首先得到ItemView

  3. final ViewPropertyAnimatorCompat animation = ViewCompat.animate(view);//開啟一個屬性動畫

  4. mRemoveAnimations.add(holder);//加入到要刪除的VIew中

  5. /* animation.setDuration(getRemoveDuration())//設定延遲時間

  6. .alpha(0).setListener(new VpaListenerAdapter() {//listener是開始和結束的監聽*/

  7. animation.setDuration(getRemoveDuration())//設定延遲時間

  8. .translationX(view.getWidth()).setListener(new VpaListenerAdapter() {//listener是開始和結束的監聽

  9. //變到哪裡

  10. @Override

  11. public void onAnimationStart(View view) {

  12. dispatchRemoveStarting(holder);

  13. }

  14. @Override

  15. public void onAnimationEnd(View view) {

  16. animation.setListener(null);//當動畫結束的時候要將監聽置為空

  17. //ViewCompat.setAlpha(view, 1);//因為有複用佈局的問題,所以你將控制元件刪除的時候需要將他還原,要不會出現重複問題

  18. ViewCompat.setTranslationX(view, 0);//因為有複用佈局的問題,所以你將控制元件刪除的時候需要將他還原,要不會出現重複問題

  19. dispatchRemoveFinished(holder);

  20. mRemoveAnimations.remove(holder);

  21. dispatchFinishedWhenDone();

  22. }

  23. }).start();

  24. }

我們可以發現他的動畫是先淡出然後上移,我們想要實現讓他啊滑動出屏幕後其他條目上移的話那麼簡單的將淡入淡出動畫改成移動動畫即可

  1. private void animateRemoveImpl(final ViewHolder holder) {

  2. final View view = holder.itemView;//首先得到ItemView

  3. final ViewPropertyAnimatorCompat animation = ViewCompat.animate(view);//開啟一個屬性動畫

  4. mRemoveAnimations.add(holder);//加入到要刪除的VIew中

  5. animation.setDuration(getRemoveDuration())//設定延遲時間

  6. .translationX(view.getWidth()).setListener(new VpaListenerAdapter() {//listener是開始和結束的監聽

  7. @Override

  8. public void onAnimationStart(View view) {

  9. dispatchRemoveStarting(holder);

  10. }

  11. @Override

  12. public void onAnimationEnd(View view) {

  13. animation.setListener(null);//當動畫結束的時候要將監聽置為空

  14. //ViewCompat.setAlpha(view, 1);//因為有複用佈局的問題,所以你將控制元件刪除的時候需要將他還原,要不會出現重複問題

  15. ViewCompat.setTranslationX(view,0);//因為有複用佈局的問題,所以你將控制元件刪除的時候需要將他還原,要不會出現重複問題

  16. dispatchRemoveFinished(holder);

  17. mRemoveAnimations.remove(holder);

  18. dispatchFinishedWhenDone();

  19. }

  20. }).start();

  21. }

在點選事件中設定成自己的動畫和動畫延時時間就好

  1. myItemAnimator = new MyItemAnimator();

  2. myItemAnimator.setRemoveDuration(2000);

  3. myRecyclerVIew.setItemAnimator(myItemAnimator);

c.新增時的動畫

先來效果圖

原動畫是先下移然後再從最淡的時候顯示出來那麼我們想讓他從側面進入那麼更改淡入淡出動畫換成移動動畫即可

原始碼

  1. @Override

  2. public boolean animateAdd(final ViewHolder holder) {

  3. resetAnimation(holder);

  4. ViewCompat.setAlpha(holder.itemView, 0);

  5. mPendingAdditions.add(holder);

  6. return true;

  7. }

  8. void animateAddImpl(final ViewHolder holder) {

  9. final View view = holder.itemView;

  10. final ViewPropertyAnimatorCompat animation = ViewCompat.animate(view);

  11. mAddAnimations.add(holder);

  12. animation.alpha(1).setDuration(getAddDuration()).

  13. setListener(new VpaListenerAdapter() {

  14. @Override

  15. public void onAnimationStart(View view) {

  16. dispatchAddStarting(holder);

  17. }

  18. @Override

  19. public void onAnimationCancel(View view) {

  20. ViewCompat.setAlpha(view, 1);

  21. }

  22. @Override

  23. public void onAnimationEnd(View view) {

  24. animation.setListener(null);

  25. dispatchAddFinished(holder);

  26. mAddAnimations.remove(holder);

  27. dispatchFinishedWhenDone();

  28. }

  29. }).start();

  30. }

更改後的程式碼

  1. @Override

  2. public boolean animateAdd(final ViewHolder holder) {

  3. resetAnimation(holder);

  4. //ViewCompat.setAlpha(holder.itemView, 0);

  5. ViewCompat.setTranslationX(holder.itemView,-holder.itemView.getWidth());

  6. mPendingAdditions.add(holder);

  7. return true;

  8. }

  9. void animateAddImpl(final ViewHolder holder) {

  10. final View view = holder.itemView;

  11. final ViewPropertyAnimatorCompat animation = ViewCompat.animate(view);

  12. mAddAnimations.add(holder);

  13. //animation.alpha(1).setDuration(getAddDuration()).

  14. animation.translationX(0).setDuration(getAddDuration()).

  15. setListener(new VpaListenerAdapter() {

  16. @Override

  17. public void onAnimationStart(View view) {

  18. dispatchAddStarting(holder);

  19. }

  20. @Override

  21. public void onAnimationCancel(View view) {

  22. ViewCompat.setAlpha(view, 1);

  23. }

  24. @Override

  25. public void onAnimationEnd(View view) {

  26. animation.setListener(null);

  27. dispatchAddFinished(holder);

  28. mAddAnimations.remove(holder);

  29. dispatchFinishedWhenDone();

  30. }

  31. }).start();

  32. }

在點選事件中設定動畫和其時間即可

  1. myItemAnimator = new MyItemAnimator();

  2. myItemAnimator.setAddDuration(2000);

  3. myRecyclerVIew.setItemAnimator(myItemAnimator);

d.移動動畫,所謂的移動動畫就是當你刪除或者新增的時候其他條目的動畫,我們可以將其設定成翻轉的效果

效果圖如下

原始碼

  1. @Override

  2. public boolean animateMove(final ViewHolder holder, int fromX, int fromY,

  3. int toX, int toY) {

  4. final View view = holder.itemView;

  5. fromX += ViewCompat.getTranslationX(holder.itemView);

  6. fromY += ViewCompat.getTranslationY(holder.itemView);

  7. resetAnimation(holder);

  8. int deltaX = toX - fromX;

  9. int deltaY = toY - fromY;

  10. if (deltaX == 0 && deltaY == 0) {

  11. dispatchMoveFinished(holder);

  12. return false;

  13. }

  14. if (deltaX != 0) {

  15. ViewCompat.setTranslationX(view, -deltaX);

  16. }

  17. if (deltaY != 0) {

  18. ViewCompat.setTranslationY(view, -deltaY);

  19. }

  20. mPendingMoves.add(new MoveInfo(holder, fromX, fromY, toX, toY));

  21. return true;

  22. }

  23. void animateMoveImpl(final ViewHolder holder, int fromX, int fromY, int toX, int toY) {

  24. final View view = holder.itemView;

  25. final int deltaX = toX - fromX;

  26. final int deltaY = toY - fromY;

  27. if (deltaX != 0) {

  28. ViewCompat.animate(view).translationX(0);

  29. }

  30. if (deltaY != 0) {

  31. ViewCompat.animate(view).translationY(0);

  32. }

  33. // TODO: make EndActions end listeners instead, since end actions aren't called when

  34. // vpas are canceled (and can't end them. why?)

  35. // need listener functionality in VPACompat for this. Ick.

  36. final ViewPropertyAnimatorCompat animation = ViewCompat.animate(view);

  37. mMoveAnimations.add(holder);

  38. animation.setDuration(getMoveDuration()).setListener(new VpaListenerAdapter() {

  39. @Override

  40. public void onAnimationStart(View view) {

  41. dispatchMoveStarting(holder);

  42. }

  43. @Override

  44. public void onAnimationCancel(View view) {

  45. if (deltaX != 0) {

  46. ViewCompat.setTranslationX(view, 0);

  47. }

  48. if (deltaY != 0) {

  49. ViewCompat.setTranslationY(view, 0);

  50. }

  51. }

  52. @Override

  53. public void onAnimationEnd(View view) {

  54. animation.setListener(null);

  55. dispatchMoveFinished(holder);

  56. mMoveAnimations.remove(holder);

  57. dispatchFinishedWhenDone();

  58. }

  59. }).start();

  60. }

在animateMoveImpl中新增我們的翻轉動畫

animation.rotationXBy(180);

因為我們是翻轉180度那麼需要在後面進行重置

在AnimationEnd後重置

ViewCompat.setRotationX(view,0);

更改後的所有程式碼

  1. void animateMoveImpl(final ViewHolder holder, int fromX, int fromY, int toX, int toY) {

  2. final View view = holder.itemView;

  3. final int deltaX = toX - fromX;

  4. final int deltaY = toY - fromY;

  5. if (deltaX != 0) {

  6. ViewCompat.animate(view).translationX(0);

  7. }

  8. if (deltaY != 0) {

  9. ViewCompat.animate(view).translationY(0);

  10. }

  11. // TODO: make EndActions end listeners instead, since end actions aren't called when

  12. // vpas are canceled (and can't end them. why?)

  13. // need listener functionality in VPACompat for this. Ick.

  14. final ViewPropertyAnimatorCompat animation = ViewCompat.animate(view);

  15. animation.rotationXBy(180);

  16. mMoveAnimations.add(holder);

  17. animation.setDuration(getMoveDuration()).setListener(new VpaListenerAdapter() {

  18. @Override

  19. public void onAnimationStart(View view) {

  20. dispatchMoveStarting(holder);

  21. }

  22. @Override

  23. public void onAnimationCancel(View view) {

  24. if (deltaX != 0) {

  25. ViewCompat.setTranslationX(view, 0);

  26. }

  27. if (deltaY != 0) {

  28. ViewCompat.setTranslationY(view, 0);

  29. }

  30. }

  31. @Override

  32. public void onAnimationEnd(View view) {

  33. animation.setListener(null);

  34. ViewCompat.setRotationX(view,0);

  35. dispatchMoveFinished(holder);

  36. mMoveAnimations.remove(holder);

  37. dispatchFinishedWhenDone();

  38. }

  39. }).start();

  40. }

e.改變動畫,就是移除就得得到新的,而原始碼是淡出舊的顯示新的那麼進行適當更改就行了

效果圖如下:

原始碼

  1. @Override

  2. public boolean animateChange(ViewHolder oldHolder, ViewHolder newHolder,

  3. int fromX, int fromY, int toX, int toY) {

  4. if (oldHolder == newHolder) {

  5. // Don't know how to run change animations when the same view holder is re-used.

  6. // run a move animation to handle position changes.

  7. return animateMove(oldHolder, fromX, fromY, toX, toY);

  8. }

  9. final float prevTranslationX = ViewCompat.getTranslationX(oldHolder.itemView);

  10. final float prevTranslationY = ViewCompat.getTranslationY(oldHolder.itemView);

  11. final float prevAlpha = ViewCompat.getAlpha(oldHolder.itemView);

  12. resetAnimation(oldHolder);

  13. int deltaX = (int) (toX - fromX - prevTranslationX);

  14. int deltaY = (int) (toY - fromY - prevTranslationY);

  15. // recover prev translation state after ending animation

  16. ViewCompat.setTranslationX(oldHolder.itemView, prevTranslationX);

  17. ViewCompat.setTranslationY(oldHolder.itemView, prevTranslationY);

  18. ViewCompat.setAlpha(oldHolder.itemView, prevAlpha);

  19. if (newHolder != null) {

  20. // carry over translation values

  21. resetAnimation(newHolder);

  22. ViewCompat.setTranslationX(newHolder.itemView, -deltaX);

  23. ViewCompat.setTranslationY(newHolder.itemView, -deltaY);

  24. ViewCompat.setAlpha(newHolder.itemView, 0);

  25. }

  26. mPendingChanges.add(new ChangeInfo(oldHolder, newHolder, fromX, fromY, toX, toY));

  27. return true;

  28. }

  29. void animateChangeImpl(final ChangeInfo changeInfo) {

  30. final ViewHolder holder = changeInfo.oldHolder;

  31. final View view = holder == null ? null : holder.itemView;

  32. final ViewHolder newHolder = changeInfo.newHolder;

  33. final View newView = newHolder != null ? newHolder.itemView : null;

  34. if (view != null) {

  35. final ViewPropertyAnimatorCompat oldViewAnim = ViewCompat.animate(view).setDuration(

  36. getChangeDuration());

  37. mChangeAnimations.add(changeInfo.oldHolder);

  38. oldViewAnim.translationX(changeInfo.toX - changeInfo.fromX);

  39. oldViewAnim.translationY(changeInfo.toY - changeInfo.fromY);

  40. oldViewAnim.alpha(0).setListener(new VpaListenerAdapter() {

  41. @Override

  42. public void onAnimationStart(View view) {

  43. dispatchChangeStarting(changeInfo.oldHolder, true);

  44. }

  45. @Override

  46. public void onAnimationEnd(View view) {

  47. oldViewAnim.setListener(null);

  48. ViewCompat.setAlpha(view, 1);

  49. ViewCompat.setTranslationX(view, 0);

  50. ViewCompat.setTranslationY(view, 0);

  51. dispatchChangeFinished(changeInfo.oldHolder, true);

  52. mChangeAnimations.remove(changeInfo.oldHolder);

  53. dispatchFinishedWhenDone();

  54. }

  55. }).start();

  56. }

更改後的程式碼

  1. @Override

  2. public boolean animateChange(ViewHolder oldHolder, ViewHolder newHolder,

  3. int fromX, int fromY, int toX, int toY) {

  4. if (oldHolder == newHolder) {

  5. // Don't know how to run change animations when the same view holder is re-used.

  6. // run a move animation to handle position changes.

  7. return animateMove(oldHolder, fromX, fromY, toX, toY);

  8. }

  9. final float prevTranslationX = ViewCompat.getTranslationX(oldHolder.itemView);

  10. final float prevTranslationY = ViewCompat.getTranslationY(oldHolder.itemView);

  11. final float prevAlpha = ViewCompat.getAlpha(oldHolder.itemView);

  12. resetAnimation(oldHolder);

  13. int deltaX = (int) (toX - fromX - prevTranslationX);

  14. int deltaY = (int) (toY - fromY - prevTranslationY);

  15. // recover prev translation state after ending animation

  16. ViewCompat.setTranslationX(oldHolder.itemView, prevTranslationX);

  17. ViewCompat.setTranslationY(oldHolder.itemView, prevTranslationY);

  18. ViewCompat.setAlpha(oldHolder.itemView, prevAlpha);

  19. if (newHolder != null) {

  20. // carry over translation values

  21. resetAnimation(newHolder);

  22. ViewCompat.setTranslationX(newHolder.itemView, -deltaX);

  23. ViewCompat.setTranslationY(newHolder.itemView, -deltaY);

  24. //ViewCompat.setAlpha(newHolder.itemView, 0);

  25. //新的移除視線

  26. ViewCompat.setTranslationX(newHolder.itemView,-newHolder.itemView.getWidth());

  27. }

  28. mPendingChanges.add(new ChangeInfo(oldHolder, newHolder, fromX, fromY, toX, toY));

  29. return true;

  30. }

  31. void animateChangeImpl(final ChangeInfo changeInfo) {

  32. final ViewHolder holder = changeInfo.oldHolder;

  33. final View view = holder == null ? null : holder.itemView;

  34. final ViewHolder newHolder = changeInfo.newHolder;

  35. final View newView = newHolder != null ? newHolder.itemView : null;

  36. if (view != null) {

  37. final ViewPropertyAnimatorCompat oldViewAnim = ViewCompat.animate(view).setDuration(

  38. getChangeDuration());

  39. mChangeAnimations.add(changeInfo.oldHolder);

  40. oldViewAnim.translationX(changeInfo.toX - changeInfo.fromX);

  41. oldViewAnim.translationY(changeInfo.toY - changeInfo.fromY);

  42. //oldViewAnim.alpha(0).setListener(new VpaListenerAdapter() {

  43. //老的移除

  44. oldViewAnim.translationX(view.getWidth()).setListener(new VpaListenerAdapter() {

  45. @Override

  46. public void onAnimationStart(View view) {

  47. dispatchChangeStarting(changeInfo.oldHolder, true);

  48. }

  49. @Override

  50. public void onAnimationEnd(View view) {

  51. oldViewAnim.setListener(null);

  52. ViewCompat.setAlpha(view, 1);

  53. ViewCompat.setTranslationX(view, 0);

  54. ViewCompat.setTranslationY(view, 0);

  55. dispatchChangeFinished(changeInfo.oldHolder, true);

  56. mChangeAnimations.remove(changeInfo.oldHolder);

  57. dispatchFinishedWhenDone();

  58. }

  59. }).start();

  60. }

  61. if (newView != null) {

  62. final ViewPropertyAnimatorCompat newViewAnimation = ViewCompat.animate(newView);

  63. mChangeAnimations.add(changeInfo.newHolder);

  64. newViewAnimation.translationX(0).translationY(0).setDuration(getChangeDuration()).

  65. alpha(1).setListener(new VpaListenerAdapter() {

  66. @Override

  67. public void onAnimationStart(View view) {

  68. dispatchChangeStarting(changeInfo.newHolder, false);

  69. }

  70. @Override

  71. public void onAnimationEnd(View view) {

  72. newViewAnimation.setListener(null);

  73. ViewCompat.setAlpha(newView, 1);

  74. ViewCompat.setTranslationX(newView, 0);

  75. ViewCompat.setTranslationY(newView, 0);

  76. dispatchChangeFinished(changeInfo.newHolder, false);

  77. mChangeAnimations.remove(changeInfo.newHolder);

  78. dispatchFinishedWhenDone();

  79. }

  80. }).start();

  81. }

  82. }

原始碼:原始碼連結