RecyclerView 항목이 나타날 때 해당 항목을 애니메이션화하는 방법

RecyclerView 항목이 나타날 때 해당 항목을 애니메이션화하는 방법

RecyclerView Items(리사이클러 보기 항목)이 나타날 때 어떻게 애니메이션을 만들 수 있습니까?

기본 항목 애니메이터는 리사이클러 데이터가 설정된 후 데이터가 추가되거나 제거될 때만 애니메이터를 생성합니다.

이것은 어떻게 이루어질 수 있습니까?

편집:

항목 애니메이터 ator에 따르면:

이 클래스는 어댑터를 변경할 때 항목에서 발생하는 애니메이션을 정의합니다.

따라서 당신의 물건들을 하나씩 당신의 물건에 추가하지 않는 한.RecyclerView그리고 매번 반복할 때마다 뷰를 새로 고친다고는 생각하지 않습니다.ItemAnimator당신의 필요에 대한 해결책입니다.

여기에 당신이 어떻게 애니메이션을 만들 수 있는지가 있습니다.RecyclerViewCustom Adapter를 사용하여 나타나는 항목:

public class CustomAdapter extends RecyclerView.Adapter<CustomAdapter.ViewHolder>
{
    private Context context;

    // The items to display in your RecyclerView
    private ArrayList<String> items;
    // Allows to remember the last item shown on screen
    private int lastPosition = -1;

    public static class ViewHolder extends RecyclerView.ViewHolder
    {
        TextView text;
        // You need to retrieve the container (ie the root ViewGroup from your custom_item_layout)
        // It's the view that will be animated
        FrameLayout container;

        public ViewHolder(View itemView)
        {
            super(itemView);
            container = (FrameLayout) itemView.findViewById(R.id.item_layout_container);
            text = (TextView) itemView.findViewById(R.id.item_layout_text);
        }
    }

    public CustomAdapter(ArrayList<String> items, Context context)
    {
        this.items = items;
        this.context = context;
    }

    @Override
    public CustomAdapter.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType)
    {
        View v = LayoutInflater.from(parent.getContext()).inflate(R.layout.custom_item_layout, parent, false);
        return new ViewHolder(v);
    }

    @Override
    public void onBindViewHolder(ViewHolder holder, int position)
    {
        holder.text.setText(items.get(position));

        // Here you apply the animation when the view is bound
        setAnimation(holder.itemView, position);
    }

    /**
     * Here is the key method to apply the animation
     */
    private void setAnimation(View viewToAnimate, int position)
    {
        // If the bound view wasn't previously displayed on screen, it's animated
        if (position > lastPosition)
        {
            Animation animation = AnimationUtils.loadAnimation(context, android.R.anim.slide_in_left);
            viewToAnimate.startAnimation(animation);
            lastPosition = position;
        }
    }
}

그리고 custom_item_layout은 다음과 같습니다.

<FrameLayout
    android:id="@+id/item_layout_container"
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <TextView
        android:id="@+id/item_layout_text"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceListItemSmall"
        android:gravity="center_vertical"
        android:minHeight="?android:attr/listPreferredItemHeightSmall"/>

</FrameLayout>

사용자 지정 및 사용자 지정 어댑터에 은 RecyclerView, 공식 문서에 대한 이 교육을 참조합니다.

빠른 스크롤의 문제

이 방법을 사용하면 빠른 스크롤에 문제가 발생할 수 있습니다.애니메이션이 진행되는 동안 보기를 재사용할 수 있습니다.이를 방지하려면 분리 시 애니메이션을 지우는 것이 좋습니다.

    @Override
    public void onViewDetachedFromWindow(final RecyclerView.ViewHolder holder)
    {
        ((CustomViewHolder)holder).clearAnimation();
    }

사용자 정의 보기소지자:

    public void clearAnimation()
    {
        mRootLayout.clearAnimation();
    }

이전 답변:

가브리엘레 마리오티의 레포를 보세요. 필요한 것을 찾을 수 있을 겁니다.SlideInItem Animator 또는 SlideScaleItem Animator와 같은 간단한 Recycler View용 Item Animator를 제공합니다.

XML로만 단순화

지스트 방문 링크

res/anim/layout_animation.xml

<?xml version="1.0" encoding="utf-8"?>
    <layoutAnimation xmlns:android="http://schemas.android.com/apk/res/android"
        android:animation="@anim/item_animation_fall_down"
        android:animationOrder="normal"
        android:delay="15%" />

res/anim/항목_ animation_fall_down.xml

<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="500">

    <translate
        android:fromYDelta="-20%"
        android:toYDelta="0"
        android:interpolator="@android:anim/decelerate_interpolator"
        />

    <alpha
        android:fromAlpha="0"
        android:toAlpha="1"
        android:interpolator="@android:anim/decelerate_interpolator"
        />

    <scale
        android:fromXScale="105%"
        android:fromYScale="105%"
        android:toXScale="100%"
        android:toYScale="100%"
        android:pivotX="50%"
        android:pivotY="50%"
        android:interpolator="@android:anim/decelerate_interpolator"
        />

</set>

다음과 같이 레이아웃 및 리사이클 뷰에 사용합니다.

<androidx.recyclerview.widget.RecyclerView
    android:id="@+id/recycler_view"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layoutAnimation="@anim/layout_animation"
    app:layout_behavior="@string/appbar_scrolling_view_behavior" />

나는 희미해져 가는 것을 애니메이션으로 만들었습니다.Recyclerview아래 코드와 같이 처음 등장할 때의 아이템.아마도 이것은 누군가에게 유용할 것입니다.

private final static int FADE_DURATION = 1000; //FADE_DURATION in milliseconds

@Override
public void onBindViewHolder(ViewHolder holder, int position) {

    holder.getTextView().setText("some text");

    // Set the view to fade in
    setFadeAnimation(holder.itemView);            
}

private void setFadeAnimation(View view) {
    AlphaAnimation anim = new AlphaAnimation(0.0f, 1.0f);
    anim.setDuration(FADE_DURATION);
    view.startAnimation(anim);
}

교체할 수도 있습니다.setFadeAnimation()다음과 같이setScaleAnimation()항목을 한 점에서 축척하여 항목의 모양을 애니메이션화하려면:

private void setScaleAnimation(View view) {
    ScaleAnimation anim = new ScaleAnimation(0.0f, 1.0f, 0.0f, 1.0f, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
    anim.setDuration(FADE_DURATION);
    view.startAnimation(anim);
}

위의 코드는 스크롤할 때까지 몇 가지 사마귀가 있습니다.RecyclerView아이템은 항상 퇴색하거나 축소됩니다.만약 당신이 당신이 코드를 추가할 수 있다면 단지 애니메이션이 발생하도록 허용할 수 있습니다.RecyclerView먼저 생성됩니다(예: 생성 시 시스템 시간을 가져오고 첫 번째 FADE_DURATION 밀리초 동안만 애니메이션을 허용합니다).

pbm의 답변으로 애니메이션을 만들었지만 거의 없었습니다.modification애니메이션을 한 번만 방영하게 하다

환언하면Animation appear with you scroll down only

private int lastPosition = -1;

private void setAnimation(View viewToAnimate, int position) {
    // If the bound view wasn't previously displayed on screen, it's animated
    if (position > lastPosition) {
        ScaleAnimation anim = new ScaleAnimation(0.0f, 1.0f, 0.0f, 1.0f, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
        anim.setDuration(new Random().nextInt(501));//to make duration random number between [0,501)
        viewToAnimate.startAnimation(anim);
        lastPosition = position;
    }
}

그리고 안에onBindViewHolder함수를 호출합니다.

@Override
public void onBindViewHolder(ViewHolder holder, int position) {

holder.getTextView().setText("some text");

// call Animation function
setAnimation(holder.itemView, position);            
}

추가할 수 있습니다.android:layoutAnimation="@anim/rv_item_animation"에 귀속시키다RecyclerView다음과 같이:

<android.support.v7.widget.RecyclerView
    android:layout_width="match_parent"
    android:layout_height="match_parent"                                        
    android:layoutAnimation="@anim/layout_animation_fall_down"
    />

여기 훌륭한 기사 감사합니다: https://proandroiddev.com/enter-animation-using-recyclerview-and-layoutanimation-part-1-list-75a874a5d213

시작하기 좋은 방법은 다음과 같습니다. https://github.com/wasabeef/recyclerview-animators/blob/master/animators/src/main/java/jp/wasabeef/recyclerview/adapters/AnimationAdapter.java

도서관 전체도 필요 없어요, 그 수업이면 충분해요.그런 다음 Adapter 클래스를 구현하면 다음과 같은 애니메이터가 제공됩니다.

@Override
protected Animator[] getAnimators(View view) {
    return new Animator[]{
            ObjectAnimator.ofFloat(view, "translationY", view.getMeasuredHeight(), 0)
    };
}

@Override
public long getItemId(final int position) {
    return getWrappedAdapter().getItemId(position);
}

스크롤할 때 아래에서 나타나는 항목을 볼 수 있으므로 빠른 스크롤 문제도 피할 수 있습니다.

어댑터에서 바인딩된 재활용 보기의 항목을 애니메이션화하는 것은 재활용 보기의 항목을 다른 속도로 애니메이션화할 수 있으므로 가장 좋은 방법은 아닐 수 있습니다.저 같은 경우는 재활용품 보기 끝에 있는 물건이 맨 위에 있는 물건보다 더 빨리 제자리에 도착해서 맨 위에 있는 물건이 더 이동해야 해서 어수선해 보입니다.

각 항목을 재활용 보기로 애니메이션화하는 데 사용한 원본 코드는 다음과 같습니다.

http://frogermcs.github.io/Instagram-with-Material-Design-concept-is-getting-real/

하지만 링크가 끊길 경우를 대비해서 코드를 복사해서 붙여넣겠습니다.

1단계: 애니메이션이 한 번만 실행되도록 onCreate 메서드 내부에 설정합니다.

if (savedInstanceState == null) {
    pendingIntroAnimation = true;
}

2단계: 애니메이션을 시작할 방법에 이 코드를 입력해야 합니다.

if (pendingIntroAnimation) {
    pendingIntroAnimation = false;
    startIntroAnimation();
}

링크에서 작성자는 도구 모음 아이콘을 애니메이션화하고 있으므로 이 방법 안에 입력합니다.

@Override
public boolean onCreateOptionsMenu(Menu menu) {
    getMenuInflater().inflate(R.menu.menu_main, menu);
    inboxMenuItem = menu.findItem(R.id.action_inbox);
    inboxMenuItem.setActionView(R.layout.menu_item_view);
    if (pendingIntroAnimation) {
        pendingIntroAnimation = false;
        startIntroAnimation();
    }
    return true;
}

3단계: 이제 시작에 대한 논리를 작성합니다.인트로 애니메이션():

private static final int ANIM_DURATION_TOOLBAR = 300;

private void startIntroAnimation() {
    btnCreate.setTranslationY(2 * getResources().getDimensionPixelOffset(R.dimen.btn_fab_size));

    int actionbarSize = Utils.dpToPx(56);
    toolbar.setTranslationY(-actionbarSize);
    ivLogo.setTranslationY(-actionbarSize);
    inboxMenuItem.getActionView().setTranslationY(-actionbarSize);

    toolbar.animate()
            .translationY(0)
            .setDuration(ANIM_DURATION_TOOLBAR)
            .setStartDelay(300);
    ivLogo.animate()
            .translationY(0)
            .setDuration(ANIM_DURATION_TOOLBAR)
            .setStartDelay(400);
    inboxMenuItem.getActionView().animate()
            .translationY(0)
            .setDuration(ANIM_DURATION_TOOLBAR)
            .setStartDelay(500)
            .setListener(new AnimatorListenerAdapter() {
                @Override
                public void onAnimationEnd(Animator animation) {
                    startContentAnimation();
                }
            })
            .start();
}

내가 선호하는 대안:

저는 리사이클 뷰 안에 있는 아이템 대신 리사이클 뷰 전체를 애니메이션으로 만들고 싶습니다.

1단계와 2단계는 동일하게 유지됩니다.

3단계에서, 당신의 API 호출이 당신의 데이터와 함께 돌아오는 즉시, 나는 애니메이션을 시작할 것입니다.

private void startIntroAnimation() {
    recyclerview.setTranslationY(latestPostRecyclerview.getHeight());
    recyclerview.setAlpha(0f);
    recyclerview.animate()
            .translationY(0)
            .setDuration(400)
            .alpha(1f)
            .setInterpolator(new AccelerateDecelerateInterpolator())
            .start();
}

이렇게 하면 화면 아래쪽에서 화면이 날아오르게 전체 재활용 보기를 애니메이션화할 수 있습니다.

이 메서드를 재활용 보기 어댑터에 만듭니다.

private void setZoomInAnimation(View view) {
        Animation zoomIn = AnimationUtils.loadAnimation(context, R.anim.zoomin);// animation file 
        view.startAnimation(zoomIn);
    }

그리고 마지막으로 BindView에 이 코드 라인을 추가합니다.홀더

setZoomInAnimation(holder.itemView);

2019년에는 모든 아이템 애니메이션을 아이템 애니메이터에 넣을 것을 제안합니다.

먼저 리사이클러 보기에서 애니메이터 선언부터 시작하겠습니다.

with(view.recycler_view) {
adapter = Adapter()
itemAnimator = CustomAnimator()
}

그러면 사용자 지정 애니메이터를 선언합니다.

class CustomAnimator() : DefaultItemAnimator() {

     override fun animateAppearance(
       holder: RecyclerView.ViewHolder,
       preInfo: ItemHolderInfo?,
       postInfo: ItemHolderInfo): Boolean{} // declare  what happens when a item appears on the recycler view

     override fun animatePersistence(
       holder: RecyclerView.ViewHolder,
       preInfo: ItemHolderInfo,
       postInfo: ItemHolderInfo): Boolean {} // declare animation for items that persist in a recycler view even when the items change

}

위에 있는 것들과 비슷한 것이 실종을 위한 것입니다.animateDisappearance, 추가로animateAdd, 변변히animateChange그리고 이동animateMove.

한 가지 중요한 점은 그 안에 있는 올바른 애니메이션 디스패처를 호출하는 것입니다.

이렇게 사용하는 것이 더 나을 것 같습니다. (RecycleerView 어댑터에서는 한 가지 방법만 재정의함)

override fun onViewAttachedToWindow(holder: ViewHolder) {
    super.onViewAttachedToWindow(holder)

    setBindAnimation(holder)
}

RV에 있는 모든 첨부 애니메이션을 원하는 경우.

아래와 같이 어댑터를 확장하기만 하면 됩니다.

public class RankingAdapter extends AnimatedRecyclerView<RankingAdapter.ViewHolder> 

BindView에 수퍼 메소드를 추가합니다.홀더

@Override
    public void onBindViewHolder(ViewHolder holder, final int position) {
        super.onBindViewHolder(holder, position);

"Bassheer AL-MOMANI"와 같은 애니메이션 어댑터를 만드는 방법을 자동화합니다.

import android.support.v7.widget.RecyclerView;
import android.view.View;
import android.view.ViewGroup;
import android.view.animation.Animation;
import android.view.animation.ScaleAnimation;

import java.util.Random;

/**
 * Created by eliaszkubala on 24.02.2017.
 */
public class AnimatedRecyclerView<T extends RecyclerView.ViewHolder> extends RecyclerView.Adapter<T> {


    @Override
    public T onCreateViewHolder(ViewGroup parent, int viewType) {
        return null;
    }

    @Override
    public void onBindViewHolder(T holder, int position) {
        setAnimation(holder.itemView, position);
    }

    @Override
    public int getItemCount() {
        return 0;
    }

    protected int mLastPosition = -1;

    protected void setAnimation(View viewToAnimate, int position) {
        if (position > mLastPosition) {
            ScaleAnimation anim = new ScaleAnimation(0.0f, 1.0f, 0.0f, 1.0f, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
            anim.setDuration(new Random().nextInt(501));//to make duration random number between [0,501)
            viewToAnimate.startAnimation(anim);
            mLastPosition = position;
        }
    }

}

언급URL : https://stackoverflow.com/questions/26724964/how-to-animate-recyclerview-items-when-they-appear