对RecyclerView Item做动画

旧城等待， 2022-07-21 01:21 328阅读 0赞

转载地址：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做动画，刚刚开始研究的时候一些坑  
> 在这里把一些设计思路分享出去  
> 添加动态位移，静态位移，缩放等动画，保证了动画状态的平滑衔接

[![item_animation.gif][]][item_animation.gif]

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的根布局：

<table style="border-collapse:collapse; border-spacing:0px; margin:0px; width:auto; border:none; font-size:14px; table-layout:fixed"> 
 <tbody> 
 <tr style="background-color:rgb(249,249,249)"> 
 <td style="padding:0px; vertical-align:middle; border:none"> <pre style="overflow:auto; font-family:consolas,Menlo,&quot;PingFang SC&quot;,&quot;Microsoft YaHei&quot;,monospace; font-size:13px; margin-top:0px; margin-bottom:0px; padding:1px 20px 1px 1px; color:rgb(102,102,102); line-height:1.6; border:none; text-align:right; background:rgb(45,45,45)">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
</pre> </td> 
 <td style="padding:0px; vertical-align:middle; border:none"> <pre style="overflow:auto; font-family:consolas,Menlo,&quot;PingFang SC&quot;,&quot;Microsoft YaHei&quot;,monospace; font-size:13px; margin-top:0px; margin-bottom:0px; padding:1px; color:rgb(204,204,204); line-height:1.6; border:none; background:rgb(45,45,45)">
 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);
 }
}
</pre> </td> 
 </tr> 
 </tbody> 
</table>

这里，在View树创建完毕之后找到我们需要做动画的子View：

然后，设计4个方法，分别为：动态的打开动画，动态的关闭动画，静态的打开动画，静态的关闭动画。

<table style="border-collapse:collapse; border-spacing:0px; margin:0px; width:auto; border:none; font-size:14px; table-layout:fixed"> 
 <tbody> 
 <tr style="background-color:rgb(249,249,249)"> 
 <td style="padding:0px; vertical-align:middle; border:none"> <pre style="overflow:auto; font-family:consolas,Menlo,&quot;PingFang SC&quot;,&quot;Microsoft YaHei&quot;,monospace; font-size:13px; margin-top:0px; margin-bottom:0px; padding:1px 20px 1px 1px; color:rgb(102,102,102); line-height:1.6; border:none; text-align:right; background:rgb(45,45,45)">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
</pre> </td> 
 <td style="padding:0px; vertical-align:middle; border:none"> <pre style="overflow:auto; font-family:consolas,Menlo,&quot;PingFang SC&quot;,&quot;Microsoft YaHei&quot;,monospace; font-size:13px; margin-top:0px; margin-bottom:0px; padding:1px; color:rgb(204,204,204); line-height:1.6; border:none; background:rgb(45,45,45)">	
@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);
}
</pre> </td> 
 </tr> 
 </tbody> 
</table>

对子View做动画我采取的策略是：使用属性动画，在每一贞动画里获取到对应的值，对子View做相应的动画，例如：动态的打开动画。

onAnimationUpdate方法，显示每一贞动画都会回调一次

这样RecylerView 带有动态动画和静态动画的View就设计好了。

2，在bind方法中使用静态动画，动态动画对外提供方法调用：

可以看到静态动画在bind里调用，打开或者关闭是由mState变量决定的。而动态的滑动需要手动调用，那怎么来使用这些动画呢？

动态动画的使用方法：存储所有创建出来的ViewHolder，统一调用动态动画方法。并设置mState变量值，防止滑动时动画不能平滑衔接.

而外面又是这样调用的：

总体就是：点击按钮 – 变量ViewHolder集合做动态动画，并设置mState变量 – 手机滑动屏幕走bind方法又是根据mState做静态动画

动画从而平滑的衔接起来

再来看一次效果图：

[![item_animation.gif][]][item_animation.gif]

动态动画起先，设置状态值，引导处理正确的静态动画，RecyclerView item的动画处理是不是变简单了。

还有，对item的特殊数据需要在对应的java bean里设置值，在bind方法取值设置到item中去。

分析就到这里了，小程序一枚。

Demo下载：[我的Github][Github]

[item_animation.gif]: https://github.com/ruzhan123/RecyclerViewItemAnimation/raw/master/gif/item_animation.gif
[Github]: https://github.com/ruzhan123/RecyclerViewItemAnimation