RecyclerView-活动开始时的SlideIn动画 [英] RecyclerView - SlideIn animation on activity start

问题描述

如何在动画中在回收器视图项上一个接一个地添加幻灯片.就像活动开始一样，回收者"视图的列表项会一一滑入.我正在使用LinearLayoutManager

How can I add a slide in animation on my recycler view items one after the other. Like as the activity starts, the list items of the recycler view slides in one by one. I am using LinearLayoutManager

不是所有的同时滑入.滚动时也不应该滑入.就在创建活动时.

Not all at the same time should slide in. And not even while scrolling. Just at the time of activity creation.

我搜索了但没有找到任何东西.

I searched but didn't find anything.

我想实现这样的目标: https://youtu.be/Q8TXgCzxEnw?t=30s

I want to achieve something like this : https://youtu.be/Q8TXgCzxEnw?t=30s

推荐答案

最后，我找到了解决方案.在下面的代码段中，我将解释如何实现.它很简单，可以在任何现有的工作RecyclerView上完成.我已经在评论中解释了所有内容.

Finally I found a solution. In below snippet I will explain how to implement. It is simple and can be done on any existing working RecyclerView. I have explained everything in comments.

这是onCreate/onCreateView方法(我在Fragment中使用了此方法，可以根据需要进行相应的更改):

Here is the onCreate/onCreateView method (I have used this inside Fragment, You can change accordingly if needed):

RecyclerView recList = (RecyclerView) rootView.findViewById(R.id.event_list);
recList.setHasFixedSize(true);
LinearLayoutmanager llm = new LinearLayoutManager(getActivity().getApplicationContext());
llm.setOrientation(LinearLayoutManager.VERTICAL);
recList.setLayoutManager(llm);

// This is important. Setting recyclerView's alpha to zero.
// Basically this is just to hide recyclerview at start before binding data
// As setVisibility is not working on recycler view object.
recList.setAlpha(0);

// Create the EventAdapter with the result we got
// EventAdapter is my custom adapter class.
// you should set your adapter class
EventAdapter ea = new EventAdapter(eventResultList);

// Binding the Adapter to RecyclerView list to show the data
recList.setAdapter(ea);

// ********************* Animate at start ********************************

new Handler().postDelayed(new Runnable() {
        @Override
        public void run() {

                // This will give me the initial first and last visible element's position.
                // This is required as only this elements needs to be animated
                // Start will be always zero in this case as we are calling in onCreate
                int start = llm.findFirstVisibleItemPosition();
                int end = llm.findLastVisibleItemPosition();

                Log.i("Start: ", start + "");
                Log.i("End: ", end + "");

                // Multiplication factor
                int DELAY = 50;

                // Loop through all visible element
                for (int i = start; i <= end; i++) {
                    Log.i("Animatining: ", i + "");

                    // Get View
                    View v = recList.findViewHolderForAdapterPosition(i).itemView;

                    // Hide that view initially
                    v.setAlpha(0);

                    // Setting animations: slide and alpha 0 to 1
                    PropertyValuesHolder slide = PropertyValuesHolder.ofFloat(View.TRANSLATION_Y, 150, 0);
                    PropertyValuesHolder alpha = PropertyValuesHolder.ofFloat(View.ALPHA, 0, 1);
                    ObjectAnimator a = ObjectAnimator.ofPropertyValuesHolder(v, slide, alpha);
                    a.setDuration(300);

                    // It will set delay. As loop progress it will increment
                    // And it will look like items are appearing one by one.
                    // Not all at a time
                    a.setStartDelay(i * DELAY);

                    a.setInterpolator(new DecelerateInterpolator());

                    a.start();

                }

                // Set Recycler View visible as all visible are now hidden
                // Animation will start, so set it visible
                recList.setAlpha(1);

        }
}, 50);

这是一个很小的没有注释的代码.

This is quite a small code without comments.

有些事情需要解释:

为什么最初要隐藏RecyclerView?

如果最初未隐藏RecyclerView，则在动画开始之前，您会首先注意到闪烁.这样做的原因是，当您设置数据适配器时，它将把它放置在其默认位置，并在循环后开始设置动画.因此，在运行while循环之间，您会发现RecyclerView中的突然闪烁，起初它们都处于初始位置，而不是突然动画.

If RecyclerView is not hidden initially you will notice a blink initially before the animation starts. The reason for it is when you set a data adapter it will position it on its default positions and after the loop it starts animating. So in between while loop is running you will notice sudden blink in the RecyclerView that at first all are at its initial position and than suddenly animating.

因此，先隐藏它，然后再完成循环，然后将所有可见位置动画设置为延迟并开始，我们可以显示RecyclerView.它使滑动看起来很平滑.

So hiding it at first and than after loop completes and all visible positions animations are set with delays and started, we can show the RecyclerView. It makes sliding looks smooth.

用setAlpha(0)隐藏它的原因是setVisibility()函数在RecyclerView对象上不起作用.

The reason for hiding it with setAlpha(0) is as setVisibility() function is not working on the RecyclerView object.

如何只显示可见元素?

LayoutManager类中有一些函数来获取可见元素的位置.在LinearLayoutManager中，使用findFirstVisibleItemPosition()从屏幕上可见的回收者视图数据中获取第一个可见视图的位置.可以使用findLastVisibleItemPosition()重试最后一个可见视图的位置.因此，我们可以从第一个视图循环到最后一个视图，并为将要在屏幕上显示的初始视图设置动画.

There are functions in the LayoutManager class to get the visible elements position. In LinearLayoutManager used findFirstVisibleItemPosition() to get the position of the first visible view from the recycler view data which is visible on screen. And the last visible view's position can be retried with findLastVisibleItemPosition(). So we can loop from the first view to last view and animate the initial views which are going to be on screen at start.

延迟如何起作用?

由于循环将从0(开始)发展到end，因此它将延迟设置为0,50,100,150，..如果DELAY变量设置为50.因此这将使第一个元素开始动画处理，第二个元素之后进行动画处理延迟50毫秒，延迟100毫秒之后的第三个，依此类推.因此，看起来好像它们是一一对应的.并非全部在一起.

As loop will progress from 0(start) to end it will set delay from 0,50,100,150,.. if DELAY variable is set to 50. So this will make first element start animating, second after 50ms delay, third after 100ms delay and so on. So it will look like they are coming in one by one. Not all together.

这篇关于RecyclerView-活动开始时的SlideIn动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！