同じアクティビティ内のRecyclerViewアイテムとCollapsingToolbarの間の共有要素アニメーション

Question

私のアプリケーションでは、RecyclerViewアダプタで表示されるアイテムのリストがあります。アイテムをクリックすると、同じActivity内の新しいFragmentが開始されました。

活動のレイアウト：

<android.support.design.widget.CoordinatorLayout> 

    <android.support.design.widget.AppBarLayout> 

     <android.support.design.widget.CollapsingToolbarLayout> 

      <ImageView 
       android:id="@+id/image" 
       android:transitionName="image" ... /> 

      <android.support.v7.widget.Toolbar ... /> 

     </android.support.design.widget.CollapsingToolbarLayout> 

     <android.support.design.widget.TabLayout ... /> 

    </android.support.design.widget.AppBarLayout> 

    <FrameLayout... /> 

</android.support.design.widget.CoordinatorLayout> 

アイテムのレイアウト：

<RelativeLayout > 

    <ImageView 
     android:id="@id/itemImage" 
     android:transitionName="image" /> 

    <LinearLayout> 

     <TextView ... /> 

     <TextView ... /> 

    </LinearLayout> 

</RelativeLayout> 

今、新しいフラグメントがある場合は、このような私のアイテムと私の活動を見て（簡体字）のレイアウト商品のクリックで始まり、商品画像のアニメーションをCollapsingToolbarLayoutのImageViewに追加したいと思います。私はShareElementアニメーションについてthe articleを読んでいますが、これは実際のShareElementアニメーションではないため、ここでは機能しません。ターゲットImageViewは新しいフラグメントに含まれていません。私は新しいアクティビティを開始する必要はありません（私はターゲットImageViewを新しいFragmentに表示するだけです）。では、このようなアニメーションを作成するにはどうすればいいですか？

Answer 1

したがって、あるレイアウトから別のレイアウトにビューをアニメーション化しようとしています。

これは、ViewOverlays APIを使用して実現できると思います。そのAPIに関する詳細な回答はhereです。 docsから

 

    final ViewGroup container = (ViewGroup) findViewById(R.id.content); 
    container.getOverlay().add(imageView); 
    ... 
 

：

今、あなたのケースでは、あなたがになってしまいますが、あなたがルートレイアウトのViewGroupOverlayにごImageViewを追加したいです

の場合ビューに親がある場合、そのビューはその親からオーバーレイに追加される前に削除されます。

したがって、getOverlay().add(imageView)を実行すると、そのビューはその親から削除されます。これで、アニメーションを作成してimageViewを最終的な目的地に移動することができます。

 

    final ViewGroup container = (ViewGroup) findViewById(R.id.content); 
    container.getOverlay().add(imageView); 

    // animate imageView by any API, e.g. ViewPropertyHolder 
    imageView.animate() 
      .x(finalX) 
      .y(finalY) 
      .setDuration(duration) 
      .setInterpolator(interpolator) 
      .withEndAction(() -> { 
       // crucial point, remove the overlay 
       container.getOverlay().remove(imageView); 

       // add this `imageView` to the destination layout 
       destLayout.addView(imageView); 
      }) 
 

Here'sあなたが実装しようとしている同様の機能：