RecyclerView 入场动画-仿百度外卖

作者: FrankFan | 来源:发表于2017-01-19 08:39 被阅读230次

    前言

    最初是用 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();
    
        }
    
    }
    

    源码

    recyclerview_entrance

    相关文章

      网友评论

        本文标题:RecyclerView 入场动画-仿百度外卖

        本文链接:https://www.haomeiwen.com/subject/qumvbttx.html