共有要素と円形私たちはPlayストアで見つけることができるものと同様のアニメーションを作りたい

を明らかに：https://www.youtube.com/watch?v=B5hBViIzw5Y 共有要素と円形私たちはPlayストアで見つけることができるものと同様のアニメーションを作りたい

私はすでに円形を明らかにする活動や方法の間で要素を共有している方法を知っているが、Iすべてを順番にやり遂げるのに苦労している！

これまでのところ、効果はそれほど悪くはありませんが、（項目を非表示にする）循環表示の後、意図を開始する少し時間があります。

マイアイテム：

<?xml version="1.0" encoding="utf-8"?> 
<android.support.v7.widget.CardView 
    xmlns:card_view="http://schemas.android.com/apk/res-auto" 
    xmlns:android="http://schemas.android.com/apk/res/android" 
    android:id="@+id/card_item" 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" 
    card_view:cardUseCompatPadding="true" 
    card_view:cardCornerRadius="2dp"> 

    <RelativeLayout 
     android:id="@+id/secondary_back" 
     android:layout_width="match_parent" 
     android:layout_height="200dp" 
     android:background="@color/colorPrimary" 
     android:visibility="gone"> 

    </RelativeLayout> 

    <RelativeLayout 
     android:layout_width="match_parent" 
     android:layout_height="200dp" 
     android:visibility="visible"> 

     <LinearLayout 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:layout_centerHorizontal="true" 
      android:layout_centerVertical="true"> 

      <de.hdodenhof.circleimageview.CircleImageView 
       xmlns:app="http://schemas.android.com/apk/res-auto" 
       android:id="@+id/shared_element" 
       android:transitionName="shared" 
       android:layout_width="60dp" 
       android:layout_height="60dp" 
       android:src="@drawable/shared_color" 
       android:visibility="gone"/> 

     </LinearLayout> 

    </RelativeLayout> 

    <RelativeLayout 
     android:id="@+id/primary_back" 
     android:layout_width="match_parent" 
     android:layout_height="200dp" 
     android:background="@drawable/ripple_background_rounded"> 

     <LinearLayout 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:layout_centerHorizontal="true" 
      android:layout_marginTop="16dp"> 

      <de.hdodenhof.circleimageview.CircleImageView 
       xmlns:app="http://schemas.android.com/apk/res-auto" 
       android:id="@+id/card_image" 
       android:layout_width="85dp" 
       android:layout_height="85dp" 
       app:civ_border_width="3dp" 
       app:civ_border_color="@color/colorPrimary"/> 

     </LinearLayout> 

     <TextView 
      android:id="@+id/card_text" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:textSize="24sp" 
      android:textColor="@android:color/black" 
      android:paddingStart="16dp" 
      android:paddingEnd="16dp" 
      android:paddingTop="24dp" 
      android:paddingBottom="24dp" 
      android:layout_alignParentBottom="true"/> 
    </RelativeLayout> 

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

と私の機能はすべてを起動するには：

private void launchAnimation(View v, final int position) { 
    // previously visible view 
    final View myView = v.findViewById(R.id.primary_back); 

    final View background = v.findViewById(R.id.secondary_back); 

    // my shared element 
    final CircleImageView sharedElement = (CircleImageView) v.findViewById(R.id.shared_element); 

    // get the center for the clipping circle 
    int cx = myView.getWidth()/2; 
    int cy = myView.getHeight()/2; 

    // get the initial radius for the clipping circle 
    float initialRadius = (float) Math.hypot(cx, cy); 

    // create the animation (the final radius is zero) 
    final Animator anim = 
      ViewAnimationUtils.createCircularReveal(background, cx, cy, initialRadius, 0); 

    // fade in background 
    final Animation fadeIn = new AlphaAnimation(0, 1); 
    fadeIn.setInterpolator(new DecelerateInterpolator()); //add this 
    fadeIn.setDuration(200); 

    final Animation fadeOut = new AlphaAnimation(1, 0); 
    fadeOut.setInterpolator(new AccelerateInterpolator()); //and this 
    fadeOut.setDuration(200); 

    // make the view invisible when the animation is done 
    anim.addListener(new AnimatorListenerAdapter() { 
     @Override 
     public void onAnimationStart(Animator animation) { 
      super.onAnimationStart(animation); 
     } 

     @Override 
     public void onAnimationEnd(Animator animation) { 
      super.onAnimationEnd(animation); 
      background.setVisibility(View.GONE); 

      Intent intent = new Intent(context, ResultActivity.class); 
      // Pass data object in the bundle and populate details activity. 
      intent.putExtra(ResultActivity.EXTRA_POSITION, position); 
      ActivityOptionsCompat options = ActivityOptionsCompat. 
        makeSceneTransitionAnimation(activity, sharedElement, "shared"); 
      activity.startActivity(intent, options.toBundle()); 
     } 
    }); 

    background.setVisibility(View.VISIBLE); 
    background.startAnimation(fadeIn); 
    myView.startAnimation(fadeOut); 

    fadeIn.setAnimationListener(new Animation.AnimationListener() { 
     @Override 
     public void onAnimationStart(Animation animation) { 
      anim.start(); 
     } 

     @Override 
     public void onAnimationEnd(Animation animation) { 
      myView.setVisibility(View.GONE); 
      sharedElement.setVisibility(View.VISIBLE); 
     } 

     @Override 
     public void onAnimationRepeat(Animation animation) { 

     } 
    }); 
}

誰かがとても参考になる。このアニメーションを簡素化する方法を知っていれば。どうもありがとう。

出典

2016-05-28 SocialSupaCrew