web-dev-qa-db-fra.com

Comment animer Recyclerview sur le défilement comme Google plus/Google kiosque?

Comment puis-je animer la RecyclerView lorsque les éléments apparaissent pour la première fois et également lorsque l'utilisateur fait défiler, exactement comme cela fonctionne pour l'application Google Plus ou l'application Google News Stand.

De plus, j'ai lu quelque part que RecyclerView ne prend pas directement en charge l'animation lorsque l'utilisateur fait défiler; si cela est vrai, est-il possible de le faire?

androidscrollandroid-animationandroid-recyclerview
29
T_C

Je l'ai fait de cette façon. Peut aider quelqu'un. Je ne sais pas si c'est la meilleure façon de le faire mais cela fonctionne bien pour moi.

UPDATE: Pour résoudre le problème du défilement rapide, substituez la méthode onViewDetachedFromWindow de l'adaptateur et appelez clearAnimation sur la vue animée (dans ce cas, holder.itemView.clearAnimation()).

@Override
public void onViewDetachedFromWindow(ViewHolder holder) {
    super.onViewDetachedFromWindow(holder);
    holder.itemView.clearAnimation();
}

up_from_bottom.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:Android="http://schemas.Android.com/apk/res/Android"
 Android:shareInterpolator="@Android:anim/decelerate_interpolator">
<translate
    Android:fromXDelta="0%" Android:toXDelta="0%"
    Android:fromYDelta="100%" Android:toYDelta="0%"
    Android:duration="400" />
</set>

down_from_top.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:Android="http://schemas.Android.com/apk/res/Android"
 Android:shareInterpolator="@Android:anim/decelerate_interpolator">
<translate
    Android:fromXDelta="0%" Android:toXDelta="0%"
    Android:fromYDelta="-100%" Android:toYDelta="0%"
    Android:duration="400" />
</set>

Et enfin, mettez ce code dans onBindViewHolder de recyclerView. Créez un champ appelé lastPosition et initialisez-le à -1.

Animation animation = AnimationUtils.loadAnimation(context,
            (position > lastPosition) ? R.anim.up_from_bottom
                    : R.anim.down_from_top);
    holder.itemView.startAnimation(animation);
    lastPosition = position;
73
Vineet Ashtekar

Utilisez ItemAnimator personnalisé avec une animation "glisser vers le haut" pour l'action Add ... .. comme ceci - https://github.com/wasabeef/recyclerview-animators

5
SergeyA

Pour down_from_top.xml, cela devrait être 

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:Android="http://schemas.Android.com/apk/res/Android"
 Android:shareInterpolator="@Android:anim/decelerate_interpolator">
<translate
    Android:fromXDelta="0%" Android:toXDelta="0%"
    Android:fromYDelta="-100%" Android:toYDelta="0%"
    Android:duration="400" />
</set>
2
Arade

https://github.com/wasabeef/recyclerview-animators

Dans mon code est quelque chose comme ceci:

import jp.wasabeef.recyclerview.animators.adapters.AlphaInAnimationAdapter;

....

public function populate() {
   // Get your recicleview
   rv = (RecyclerView)findViewById(R.id.rv);
   rv.setHasFixedSize(true);

   // Populate your cursor with your own method...
   Cursor myRecycleItems= null;
   myRecycleItems= mDbHelper.getItems();

   //create your 
   itemsAdapter= new ItemsAdapter(myRecycleItems, getApplicationContext());


   //Finnaly apply your adapter to RV with AlphaInAnimationAdapter:
   rv.setAdapter(new AlphaInAnimationAdapter(itemsAdapter));

}

Vous devez ajouter des dépendances à votre diplôme

dependencies {
  // jCenter
  ...... 
  your curent dependencies 
  ....
  compile 'jp.wasabeef:recyclerview-animators:2.0.0'
}

Lisez le formulaire doc https://github.com/wasabeef/recyclerview-animators pour l'installer.

1
catalin87

Sans aucune bibliothèque extérieure dans RecycleView.Adapter, la méthode onBindViewHolder utilise une animation comme dans l'exemple:

       if (position>lastAnimatedPosition) {


        //set init transitionY to animate from it
        holder.itemView.setTranslationY(holder.itemView.getHeight());

        //animate to orginal position
        holder.itemView.animate().translationYBy(-  holder.itemView.getHeight()).start();


        lastAnimatedPosition=position;
    }

Le code ci-dessus s'animera à partir du bas de chaque ligne de la liste. L'animation ne sera effectuée qu'une fois, mais onBindViewHolder s'exécute en défilement. Le premier défilement de la liste s'effectue alors avec un effet d'animation.

Il est très important d’initialiser la vue au début de l’animation. Par exemple, j’ai défini:

  holder.itemView.setTranslationY( + Y change);

puis l'animation retourne à la position initiale:

 holder.itemView.animate().translationYBy(- Y change).start();

Si vous avez besoin d’alpha, procédez comme suit:

 holder.itemView.setAlpha(0);
 holder.itemView.animate().apha(1).start();
0
Maciej Sikora