对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