對RecyclerView Item做動畫

原創 scott2017 2020-02-25 01:38


轉載地址：https://ruzhan123.github.io/2016/07/01/2016-07-01-01-%E5%AF%B9RecyclerViewItem%E5%81%9A%E5%8A%A8%E7%94%BB/#rd


對RecyclerView Item做動畫，剛剛開始研究的時候一些坑
在這裏把一些設計思路分享出去
添加動態位移，靜態位移，縮放等動畫，保證了動畫狀態的平滑銜接

RecyclerView，ListView這些具有Item複用性的View，想要對其Item做動畫

需要注意以下幾點：

1，如果要一點擊，讓所有Item做動畫的效果。例如，上圖的編輯和取消，這樣的動態動畫。可以對所有ViewHolder中的View直接做動畫。但是需要在onBindViewHolder方法中對複用的item做靜態動畫，保證動畫狀態的平滑銜接。

2，每一個Item的特有屬性，例如，上圖checkbox的選中狀態，都需要把狀態字段放到對應的Java bean中， 並在onBindViewHolder方法從java bean取出狀態值，設置到view裏。

首先，對一些細節進行分析：

如何設計一個自定義View，來讓他可以自己移動，做動畫起來？

1，首先，創建一個View，他是RecyclerView Item的根佈局：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82


    public class SlideRelativeLayout extends RelativeLayout {
	    public static final String TAG = SlideRelativeLayout.class.getSimpleName();
	    private CheckBox mCheckBox;
	    private RelativeLayout mContentSlide;
	    private int mOffset;

    public SlideRelativeLayout(Context context) {
        super(context);
    }

    public SlideRelativeLayout(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public SlideRelativeLayout(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    @Override
    protected void onFinishInflate() {
        super.onFinishInflate();
        mCheckBox = (CheckBox) findViewById(R.id.item_checkbox);
        mContentSlide = (RelativeLayout) findViewById(R.id.item_content_rl);
        setOffset(35);
    }

    public void setOffset(int offset) {
        mOffset = (int) (getContext().getResources().getDisplayMetrics().density * offset + 0.5f);
    }

    @TargetApi(Build.VERSION_CODES.HONEYCOMB)
    public void openAnimation() {
        ValueAnimator valueAnimator = new ValueAnimator();
        valueAnimator.setIntValues(0, 1);
        valueAnimator.setDuration(300);
        valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @TargetApi(Build.VERSION_CODES.HONEYCOMB_MR1)
            @Override
            public void onAnimationUpdate(ValueAnimator valueAnimator) {
                float fraction = valueAnimator.getAnimatedFraction();
                int endX = (int) (-mOffset * fraction);
                doAnimationSet(endX, fraction);
            }
        });
        valueAnimator.start();
    }

    @TargetApi(Build.VERSION_CODES.HONEYCOMB)
    public void closeAnimation() {
        ValueAnimator valueAnimator = new ValueAnimator();
        valueAnimator.setIntValues(0, 1);
        valueAnimator.setDuration(150);
        valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {

            @TargetApi(Build.VERSION_CODES.HONEYCOMB_MR1)
            @Override
            public void onAnimationUpdate(ValueAnimator valueAnimator) {
                float fraction = valueAnimator.getAnimatedFraction();
                int endX = (int) (-mOffset * (1 - fraction));
                doAnimationSet(endX, (1 - fraction));
            }
        });
        valueAnimator.start();
    }

    @TargetApi(Build.VERSION_CODES.HONEYCOMB)
    private void doAnimationSet(int dx, float fraction) {
        mContentSlide.scrollTo(dx, 0);
        mCheckBox.setScaleX(fraction);
        mCheckBox.setScaleY(fraction);
        mCheckBox.setAlpha(fraction * 255);
    }

    public void open() {
        mContentSlide.scrollTo(-mOffset, 0);
    }

    public void close() {
        mContentSlide.scrollTo(0, 0);
    }
}

這裏，在View樹創建完畢之後找到我們需要做動畫的子View：

1
2
3
4
5
6
7
8


@Override
protected void onFinishInflate() {
    super.onFinishInflate();
    mCheckBox = (CheckBox) findViewById(R.id.item_checkbox);
    mContentSlide = (RelativeLayout) findViewById(R.id.item_content_rl);
    setOffset(35);
}

然後，設計4個方法，分別爲：動態的打開動畫，動態的關閉動畫，靜態的打開動畫，靜態的關閉動畫。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59

	
@TargetApi(Build.VERSION_CODES.HONEYCOMB)
public void openAnimation() {
    ValueAnimator valueAnimator = new ValueAnimator();
    valueAnimator.setIntValues(0, 1);
    valueAnimator.setDuration(300);
    valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
        @TargetApi(Build.VERSION_CODES.HONEYCOMB_MR1)
        @Override
        public void onAnimationUpdate(ValueAnimator valueAnimator) {
            float fraction = valueAnimator.getAnimatedFraction();
            int endX = (int) (-mOffset * fraction);
            doAnimationSet(endX, fraction);
        }
    });
    valueAnimator.start();
}
	
@TargetApi(Build.VERSION_CODES.HONEYCOMB)
public void closeAnimation() {
    ValueAnimator valueAnimator = new ValueAnimator();
    valueAnimator.setIntValues(0, 1);
    valueAnimator.setDuration(150);
    valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
	
        @TargetApi(Build.VERSION_CODES.HONEYCOMB_MR1)
        @Override
        public void onAnimationUpdate(ValueAnimator valueAnimator) {
            float fraction = valueAnimator.getAnimatedFraction();
            int endX = (int) (-mOffset * (1 - fraction));
            doAnimationSet(endX, (1 - fraction));
        }
    });
    valueAnimator.start();
}
	
@TargetApi(Build.VERSION_CODES.HONEYCOMB)
private void doAnimationSet(int dx, float fraction) {
    mContentSlide.scrollTo(dx, 0);
    mCheckBox.setScaleX(fraction);
    mCheckBox.setScaleY(fraction);
    mCheckBox.setAlpha(fraction * 255);
}
	
public void open() {
    mContentSlide.scrollTo(-mOffset, 0);
}
	
public void close() {
    mContentSlide.scrollTo(0, 0);
}

@TargetApi(Build.VERSION_CODES.HONEYCOMB)
private void doAnimationSet(int dx, float fraction) {
    mContentSlide.scrollTo(dx, 0);
    mCheckBox.setScaleX(fraction);
    mCheckBox.setScaleY(fraction);
    mCheckBox.setAlpha(fraction * 255);
}

對子View做動畫我採取的策略是：使用屬性動畫，在每一貞動畫裏獲取到對應的值，對子View做相應的動畫，例如：動態的打開動畫。

onAnimationUpdate方法，顯示每一貞動畫都會回調一次

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26



@TargetApi(Build.VERSION_CODES.HONEYCOMB)
public void openAnimation() {
    ValueAnimator valueAnimator = new ValueAnimator();
    valueAnimator.setIntValues(0, 1);
    valueAnimator.setDuration(300);
    valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
        @TargetApi(Build.VERSION_CODES.HONEYCOMB_MR1)
        @Override
        public void onAnimationUpdate(ValueAnimator valueAnimator) {
            float fraction = valueAnimator.getAnimatedFraction();
            int endX = (int) (-mOffset * fraction);
            doAnimationSet(endX, fraction);
        }
    });
    valueAnimator.start();
}

@TargetApi(Build.VERSION_CODES.HONEYCOMB)
private void doAnimationSet(int dx, float fraction) {
    mContentSlide.scrollTo(dx, 0);
    mCheckBox.setScaleX(fraction);
    mCheckBox.setScaleY(fraction);
    mCheckBox.setAlpha(fraction * 255);
}

這樣RecylerView 帶有動態動畫和靜態動畫的View就設計好了。

2，在bind方法中使用靜態動畫，動態動畫對外提供方法調用：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35


private class SlideViewHolder extends RecyclerView.ViewHolder implements View.OnClickListener {
	
    private SlideRelativeLayout mSlideRelativeLayout;
    private CheckBox mCheckBox;
    private ItemBean mItemBean;
	
    public SlideViewHolder(View itemView) {
        super(itemView);
        mSlideRelativeLayout = (SlideRelativeLayout) itemView.findViewById(R.id.item_root);
        mCheckBox = (CheckBox) itemView.findViewById(R.id.item_checkbox);
        itemView.setOnClickListener(this);
    }
	
    public void bind(ItemBean itemBean) {
        mItemBean = itemBean;
        mCheckBox.setChecked(itemBean.isChecked());
        switch (mState) {
            case NORMAL:
                mSlideRelativeLayout.close();
                break;
	
            case SLIDE:
                mSlideRelativeLayout.open();
                break;
        }
    }
	
    public void openItemAnimation() {
        mSlideRelativeLayout.openAnimation();
    }
	
    public void closeItemAnimation() {
        mSlideRelativeLayout.closeAnimation();
    }

可以看到靜態動畫在bind裏調用，打開或者關閉是由mState變量決定的。而動態的滑動需要手動調用，那怎麼來使用這些動畫呢？

動態動畫的使用方法：存儲所有創建出來的ViewHolder，統一調用動態動畫方法。並設置mState變量值，防止滑動時動畫不能平滑銜接.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

	
private List<SlideViewHolder> mSlideViewHolders = new ArrayList<>();
	
public void openItemAnimation() {
    mState = SLIDE;//
    for (SlideViewHolder holder : mSlideViewHolders) {
        holder.openItemAnimation();
    }
}
	
public void closeItemAnimation() {
    mState = NORMAL;
    for (SlideViewHolder holder : mSlideViewHolders) {
        holder.closeItemAnimation();
    }
}

而外面又是這樣調用的：

1
2
3
4
5
6
7
8
9
10


private void editItems() {
    if ("編輯".equals(mRightTV.getText().toString())) {
        mRightTV.setText("取消");
        mSlideAdapter.openItemAnimation();
    } else if ("取消".equals(mRightTV.getText().toString())) {
        mRightTV.setText("編輯");
        mSlideAdapter.closeItemAnimation();
    }
}

總體就是：點擊按鈕 – 變量ViewHolder集合做動態動畫，並設置mState變量 – 手機滑動屏幕走bind方法又是根據mState做靜態動畫

動畫從而平滑的銜接起來

再來看一次效果圖：

動態動畫起先，設置狀態值，引導處理正確的靜態動畫，RecyclerView item的動畫處理是不是變簡單了。

還有，對item的特殊數據需要在對應的java bean裏設置值，在bind方法取值設置到item中去。

分析就到這裏了，小程序一枚。

Demo下載：我的Github


發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

JetPack 之 Paging3.0 簡單上手指南！

作者：Chsmy 之前有一篇Paging2.x的使用和分析，Paging2.x運行起來的效果無限滑動還挺不錯的，不過代碼寫起來有點麻煩，功能也不是太完善，比如下拉刷新的方法都沒有提供，我們還得自己去調用DataSource#i

River_ly 2020-07-08 09:20:10

《第一行代碼》——RecyclerView詳解

《第一行代碼》——書中整理摘錄 首先，若要使用RecyclerView佈局，我們需要爲其添加依賴庫。 //noinspection GradleCompatible implementation 'com.android.supp

不明不白的老白 2020-07-08 06:28:28

安卓系統之五大布局

安卓系統之五大布局 一、線性佈局 //特點:線性佈局必須要指定子控件的排列方向，要麼是水平（horizontal）排列，要麼是豎直（vertical）排列； android:orientation=”vertica

小枫vip 2020-07-08 04:48:59

如何成爲安卓軟件開發工程師？

學習新技術都很多人來說本身就是一件比較痛苦的事情（因爲學習會改變自己原有的認知，是個自我更新的過程）~ 所以能不能學會學好的前提條件是你是不真真願意去學，你想學adnroid的根本出發點是什麼，這個出發點是否強大到讓自己完成這個

小枫vip 2020-07-08 04:48:59

Android.location.Address類方法獲取GPS定位信息

參考autojs的獲取GPS定位的代碼： function getLocationLoop(){ //判斷是否已經打開GPS模塊 if(locationManager.isProviderEnabled(Location

小锋学长生活大爆炸 2020-07-08 04:26:21

安卓設置窗口全屏

方式1 styles裏增加: <item name="android:windowFullscreen">true</item> <item name="windowNoTitle">true</item> 完整代碼樣例: <s

安卓007 2020-07-08 03:50:33

Recylerview notifyDataSetChanged 界面圖片一閃

Recylerview的item，當數據改變時，我們會調用 notifyDataSetChanged，這個時候列表會刷新，圖片會一閃，爲了使 url 沒變的 ImageView 不重新加載，我們可以用 setHasStableId

CodingForAndroid 2020-07-08 01:28:33

安卓小白開發之學習安卓的點點滴滴—數據庫（3）

1， 真正的數據庫儲存——SQLite數據庫 概述：這是安卓推出的，用於移動端的，輕量級數據庫，用於處理那些數據量大，結構複雜的數據，它比一般的數據庫要簡單的多，甚至不需要設置賬號和密碼，並且運行速度非常快，佔用資源也極少（通常幾百k即可

zy19980116 2020-07-08 00:56:41

Android內容提供器實現導入手機中的全部歌曲

Android想要獲取不同手機內存卡中的內容，要使用內容提供器。 下面介紹我所做的一個可以播放音樂，並且可以導入手機中所有音頻的demo。 首先講一下思路： 活動中開啓線程，實例化內容提供器對象ContentResolver，實例化cus

zy19980116 2020-07-08 00:56:41

Android 集成 google 登錄並獲取 性別等隱私信息

前言 公司做海外產品的，集成的是 google 賬號登錄，賬號信息、郵箱等這些不涉及隱私的按 google 的正常登錄流程可以輕鬆實現 。但是一旦需要獲取涉及隱私的信息就比較麻煩，文檔也不是十分清晰，非常難找，很多坑。 googl

MarinaTsang 2020-07-07 23:22:51

Android爲方法數超過 64K 的應用啓用 MultiDex

爲什麼Android對應用的總方法數（包括應用自身及其引用的庫包含的方法數）會有64K的限制呢？在計算機科學領域內，術語千（簡稱 K）表示 1024（即 2^10）。由於 65536 等於 64 X 1024，因此這一限制稱爲“6

WongKyunban 2020-07-07 23:12:13

安卓插件安裝

當我們android studio 的插件下載很慢，或者打不開的時候，嘗試使用手動安裝 步驟一：閱讀插件作用文檔，應記錄其版本號 步驟二： 在插件下載地址https://plugins.jetbrains.com/裏找到對應版本

14期-陈海明 2020-07-07 19:38:40

U3D調用AndroidStudio3.5（附測試工程）

使用版本： Unity：2018.2.10f AS：3.5 最近由於需要接公司原生的java SDK，所以打算用U3D調用sdk、然後監聽sdk回調的方法，麻煩的地方在於sdk部分需要在AS中去做。查找了不少帖子，終於找到了以這篇博客。

鹿野素材屋 2020-07-07 15:42:35

《步驟化》 做一個整數比較器

如題，做一個能比較3個整數大小的小程序；要求輸入3個整數，點擊按鈕，顯示出最大的那個數； 編譯工具:android Studio 3.5.1 步驟開始： 1.新建一個項目 2.activity_main主佈局代碼 <?xml ve

何泽权 2020-07-07 14:49:50

《步驟化》 做一個簡單的分數識別器

**前言** 一個簡單入門的

何泽权 2020-07-07 14:49:50