RecyclerView 入场动画-仿百度外卖
2017-01-19 本文已影响230人
FrankFan
前言
最初是用 facebook 出的 rebound 做的。rebound 比较老了,几年没有更新,提供的 demo 也不支持 Java8。于是在 http://inloop.github.io/interpolator/ 上又调校了个插值器,效果还算可以,还可以少引用一个库。
效果图
百外卖入场动画我的
基本流程
流程很简单,先找到 RecclerView 的每一个 itemView,在 onCreateViewHolder 时将每一个 itemview.setTranslationX(recyclerview.width),然后启动一个 动画,隔 x 秒向左移动一定的距离。x秒是递增的,可以使 itemview 之间的距离从左往右越来越大。
public class RecyclerViewReboundAnimator {
private static final int INIT_DELAY = 500;
int order = 1;
private int mWidth;
private RecyclerView mRecyclerView;
private boolean mFirstViewInit = true;
private int mLastPosition = -1;
private int mStartDelay;
public RecyclerViewReboundAnimator(RecyclerView recyclerView) {
mRecyclerView = recyclerView;
mWidth = mRecyclerView.getResources().getDisplayMetrics().widthPixels;
mStartDelay = INIT_DELAY;
}
public void onCreateViewHolder(View item, int colum) {
if (mFirstViewInit) {
slideInBottom(item, mStartDelay);
if (order % colum == 0) {
mStartDelay += 50;
order = 1;
} else {
order++;
}
}
}
public void onBindViewHolder(View item, int position) {
if (!mFirstViewInit && position > mLastPosition) {
slideInBottom(item, 0);
mLastPosition = position;
}
}
private void slideInBottom(final View item,
final int delay) {
item.setTranslationX(mWidth);
ValueAnimator valueAnimator = ValueAnimator.ofFloat(0, mWidth);
valueAnimator.setInterpolator(new SpringInterpolator());
valueAnimator.addListener(new Animator.AnimatorListener() {
@Override
public void onAnimationStart(Animator animation) {
}
@Override
public void onAnimationEnd(Animator animation) {
mFirstViewInit = false;
}
@Override
public void onAnimationCancel(Animator animation) {
}
@Override
public void onAnimationRepeat(Animator animation) {
}
});
valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
float val = (mWidth - (float) animation.getAnimatedValue());
item.setTranslationX(val);
}
});
valueAnimator.setDuration(1000);
valueAnimator.setStartDelay(delay);
valueAnimator.start();
}
}