วิธีสร้างรายการ RecyclerView ให้เคลื่อนไหวเมื่อปรากฏ

ฉันจะทำให้รายการ RecyclerView เคลื่อนไหวมีการแสดงผลได้อย่างไร

แอนิเมชั่นรายการเริ่มต้นจะเคลื่อนไหวเมื่อมีการเพิ่มหรือลบข้อมูลหลังจากตั้งค่าข้อมูลผู้รีไซเคิลแล้วเท่านั้น ฉันเป็นแอปพลิเคชั่นที่กำลังพัฒนาใหม่และไม่มีเงื่อนงำที่จะเริ่ม

ความคิดใด ๆ วิธีการบรรลุเป้าหมายนี้?

ทำง่ายด้วย XML เท่านั้น

เยี่ยมชม Gist Link

ความละเอียด / 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%" />

ความละเอียด / Anim / item_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>

ใช้ในเลย์เอาต์และ recylcerview เช่น:

<android.support.v7.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" />

แก้ไข:

ตามเอกสาร ItemAnimator :

คลาสนี้กำหนดภาพเคลื่อนไหวที่เกิดขึ้นกับรายการเมื่อมีการเปลี่ยนแปลงกับอะแดปเตอร์

ดังนั้นหากคุณเพิ่มรายการของคุณทีละรายการRecyclerViewและรีเฟรชมุมมองในแต่ละการวนซ้ำฉันไม่คิดว่าItemAnimatorจะเป็นคำตอบสำหรับความต้องการของคุณ

นี่คือวิธีที่คุณสามารถทำให้RecyclerViewรายการเคลื่อนไหวปรากฏขึ้นเมื่อใช้ CustomAdapter:

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>

สำหรับข้อมูลเพิ่มเติมเกี่ยว CustomAdapters และRecyclerViewอ้างถึงนี้การฝึกอบรมในเอกสารอย่างเป็นทางการ

ปัญหาในการเลื่อนอย่างรวดเร็ว

การใช้วิธีนี้อาจทำให้เกิดปัญหากับการเลื่อนอย่างรวดเร็ว มุมมองสามารถนำมาใช้ใหม่ได้ในขณะที่มีการเคลื่อนไหว เพื่อหลีกเลี่ยงที่แนะนำให้ล้างภาพเคลื่อนไหวเมื่อถอดออก

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

บน CustomViewHolder:

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

คำตอบเก่า:

ดูที่repo ของ Gabriele Mariottiฉันค่อนข้างมั่นใจว่าคุณจะพบสิ่งที่คุณต้องการ เขาจัดเตรียม ItemAnimators ง่าย ๆ สำหรับ RecyclerView เช่น SlideInItemAnimator หรือ SlideScaleItemAnimator

ฉันเคลื่อนไหวใน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เพื่อให้ aninmation ทำงานเพียงครั้งเดียว

ในคำอื่น ๆ 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

คุณไม่จำเป็นต้องใช้ห้องสมุดเต็มรูปแบบนั่นก็เพียงพอแล้ว ถ้าคุณใช้คลาสอะแดปเตอร์ของคุณให้เป็นอนิเมเตอร์เช่นนี้:

@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);
}

คุณจะเห็นรายการที่ปรากฏจากด้านล่างขณะที่พวกเขาเลื่อนและหลีกเลี่ยงปัญหาเกี่ยวกับการเลื่อนอย่างรวดเร็ว

รายการภาพเคลื่อนไหวใน recyclerview เมื่อถูกผูกเข้ากับอะแดปเตอร์อาจไม่ใช่ความคิดที่ดีที่สุดเพราะอาจทำให้รายการใน recyclerview เคลื่อนไหวได้ด้วยความเร็วที่แตกต่างกัน ในกรณีของฉันสิ่งของที่จุดสิ้นสุดของ recyclerview จะเคลื่อนไหวไปยังตำแหน่งของพวกมันเร็วกว่าและที่ด้านบนสุดเนื่องจากที่ด้านบนมีการเดินทางไกลกว่าดังนั้นมันจึงดูไม่เป็นระเบียบ

รหัสเดิมที่ฉันใช้ในการทำให้ภาพแต่ละรายการใน recyclerview ดูได้ที่นี่:

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:ตอนนี้เขียนตรรกะสำหรับ startIntroAnimation ():

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();
}

ทางเลือกที่ฉันต้องการ:

ฉันอยากทำให้ภาพรวมทั้งหมดของ recyclerview แทนที่จะเป็นรายการภายใน recyclerview

ขั้นตอนที่ 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();
}

นี่จะทำให้ภาพ recyclerview ทั้งหมดของคุณเคลื่อนไหวได้จากด้านล่างของหน้าจอ

สร้างวิธีนี้ในอะแดปเตอร์มุมมองรีไซเคิลของคุณ

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

และในที่สุดก็เพิ่มรหัสบรรทัดนี้ในBindViewHolder

setZoomInAnimation(holder.itemView);

ในปี 2019 ฉันขอแนะนำให้ใส่ภาพเคลื่อนไหวของรายการทั้งหมดลงใน ItemAnimator

เริ่มต้นด้วยการประกาศตัวเคลื่อนไหวในมุมมองรีไซเคิล:

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และย้าย

จุดสำคัญอย่างหนึ่งก็คือการเรียกแอนิเมชั่น - ดิสแพตเชอร์ที่ถูกต้องภายในพวกเขา

เพียงขยายอะแดปเตอร์ของคุณตามด้านล่าง

public class RankingAdapter extends AnimatedRecyclerView<RankingAdapter.ViewHolder> 

และเพิ่มเมธอดพิเศษให้กับ onBindViewHolder

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

เป็นวิธีการสร้างอแด็ปเตอร์เคลื่อนไหวโดยอัตโนมัติเช่น "Basheer 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;
        }
    }

}

ฉันคิดว่าจะดีกว่าที่จะใช้มันเช่นนี้: (ในอะแดปเตอร์ RecyclerView แทนที่เพียงหนึ่งวิธี)

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

    setBindAnimation(holder)
}

ถ้าคุณต้องการทุกภาพเคลื่อนไหวที่แนบมามีใน RV