Geteilt Element und Kreis offenbare

Question

Ich mag eine Animation ähnlich wie machen, was wir im Play Store finden: https://www.youtube.com/watch?v=B5hBViIzw5Y

Ich weiß schon, wie zwischen den Aktivitäten gemeinsames Element haben und wie Kreis offenbart zu machen, aber ich Ich bemühe mich, alles in Ordnung zu bringen!

Hier ist, wo ich bisher bin, ist der Effekt nicht so schlimm, aber nach der kreisförmigen Enthüllung (um das Element zu verbergen) gibt es ein wenig Zeit, bevor es die Absicht beginnt.

Mein Artikel:

<?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> 

und meine Funktion alles starten:

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

     } 
    }); 
} 

Wenn jemand weiß, wie diese Animation zu vereinfachen, die so hilfreich wären. Danke vielmals.

Answer 1

Für alle, die diese Art von Animation machen möchten, habe ich einen article über diesen genauen Übergang gefunden.

Am Ende dieses Artikels gibt es das Projektarchiv, das mir sehr geholfen hat, damit es funktioniert.