web-dev-qa-db-ja.com

Google plus / Googleニューススタンドのようなスクロールでリサイクラービューをアニメーション化する方法は？

GoogleプラスアプリやGoogleニューススタンドアプリの動作と同様に、アイテムが初めて表示され、ユーザーがスクロールするときにRecyclerViewをアニメーション化するにはどうすればよいですか。

また、ユーザーがスクロールしたときにRecyclerViewはアニメーションを直接サポートしないことをどこかで読みました。これが本当なら、まだできる方法はありますか？

androidscrollandroid-animationandroid-recyclerview
33
T_C

私はこのようにしました。誰かを助けるかもしれない。それが最善の方法かどうかはわかりませんが、私にとってはうまくいきます。

PDATE：高速スクロールの動作を修正するには、アダプターのonViewDetachedFromWindowメソッドをオーバーライドし、アニメーションビューでclearAnimationを呼び出します（この場合、holder.itemView.clearAnimation() ）。このような：

 @Override
public void onViewDetachedFromWindow(@NonNull 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>

そして最後に、このコードをonBindViewHolderのrecyclerViewに配置します。 lastPositionというフィールドを作成し、-1に初期化します。

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

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>
2
Arade

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

私のコードには次のようなものがあります：

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

}

グラドルに依存関係を追加する必要があります

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

Doc form https://github.com/wasabeef/recyclerview-animators を読んでインストールしてください。

2
catalin87

RecycleView.Adapter on method onBindViewHolderに外部ライブラリがない場合、例のようにアニメーションを使用します。

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

上記のコードは、リスト内のすべての行を下からアニメーション化します。アニメーションは1回だけ実行されますが、onBindViewHolderはスクロール時に実行されるため、リストの最初のスクロールにはアニメーション効果が使用されます。

非常に重要なのは、ビューを初期化してアニメーションを開始することです。したがって、例では次のように設定します。

  holder.itemView.setTranslationY( + Y change);

その後、アニメーションは元の位置に戻ります。

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

アルファが必要な場合は、次のようにしてください：

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