Animate RecyclerView items one by one

2019-03-30 18:19发布

问题:

I'm trying to animate my RecyclerView items in my app. I tried using this code in my adapter:

    public override void OnBindViewHolder(RecyclerView.ViewHolder holder, int position)
    {
        myHolder = holder as MyView;
        if (position > mCurrentPosition)
        {
            int currentAnim = Android.Resource.Animation.SlideInLeft;
            SetAnimation(holder.ItemView, currentAnim);
            mCurrentPosition = position;
        }

    }

    private void SetAnimation(View view, int currentAnim)
    {

        Animation anim = AnimationUtils.LoadAnimation(mContext, currentAnim);
        anim.SetInterpolator(mContext, Android.Resource.Interpolator.Bounce);
        view.StartAnimation(anim);
    }

However, because all of my items appear together when the view is created, and not added when the user clicks a button, for example, all of the items animate together.

I want the items to animate one after the other, in the order of their position.
How is this possible to do?

回答1:

How about this:

public override void OnBindViewHolder(RecyclerView.ViewHolder holder, int position)
{
    myHolder = holder as MyView;
    if (position > mCurrentPosition)
    {
        Handler h = new Handler();
        int currentAnim = Android.Resource.Animation.SlideInLeft;
        Action myAction = () => 
        {
            SetAnimation(holder.ItemView, currentAnim);
        };

        h.PostDelayed(myAction, 1000);


        mCurrentPosition = position;
    }

}

Update: if you want to animate all items in order, you should put logic code out side an adapter.
For example, in activity, after set adapter for RecyleView

   List<YourObject> data; // your data list for RecycleView

   // CALL this code after set adapter for RecycleView
   Handler h = new Handler();
   int currentAnim = Android.Resource.Animation.SlideInLeft;
   Action myAction = () => 
   {     
      // assume you use LinearLayoutManager  for RecyecleView
        View itemView = linearLayoutManager.findViewByPosition(0);
        StartAnimation(itemView, 0);
   };

   h.PostDelayed(myAction, 1000);


   private void StartAnimation(View view, int position)
    {

        Animation anim = AnimationUtils.LoadAnimation(mContext, currentAnim);
        anim.SetInterpolator(mContext, Android.Resource.Interpolator.Bounce);
        view.StartAnimation(anim);
        anim.AnimationEnd += (sender, e) =>
        {
            // animate next item

            ++position;
            if (position < data.size()) // data is your array list
            {

                // assume you use LinearLayoutManager  for RecyecleView
                View itemView = linearLayoutManager.findViewByPosition(position);
                if (itemView != null)
                {
                    StartAnimation(itemView, position);
                }
            }
        }
    }


回答2:

This might not be the answer, but it might help. I think you should set a delay between your animations.

new Handler().postDelayed(new Runnable()
{
   @Override
   public void run()
   {
     // your code that you want to delay here
   }
}, 1000/* 1000ms = 1sec delay */);


回答3:

You need to add delay time to your animation and increment the delay every item bind.

int delayAnimate = 300; //global variable

@Override
public void onBindViewHolder(final MyViewHolder holder, int position) {
    //set view to INVISIBLE before animate
    holder.viewAnimate.setVisibility(View.INVISIBLE);
    setAnimation(holder.ll_root);
}

private void setAnimation(final View view) {
    Handler handler = new Handler();
    handler.postDelayed(new Runnable() {
        public void run() {
            Animation animation = AnimationUtils.loadAnimation(mContext, android.R.anim.slide_in_left);
            if(view!=null){
                view.startAnimation(animation);
                view.setVisibility(View.VISIBLE);
            }
        }
    }, delayAnimate);
    delayAnimate+=300;
}


回答4:

override fun onBindViewHolder(holder: ViewHolder, position: Int) {
    Handler().postDelayed({
        // animate here
    }, DURATION * position)
}

DURATION * position helps to animate recyclerview items one by one.
DURATION is best when set between 50-75.