Kreisförmige Revel Animation umkehren

Question

Ich möchte eine einfache Animation machen, die ich versuche zu beschreiben. Am ersten gibt es diesen kleinen Kreis in der Mitte des Bildschirms, dann, wenn Sie ihn drücken, zeigt die kreisförmige Animation einen rechteckigen Knopf. Ich weiß nicht, ob ich es so gut wie möglich haben, aber hier ist es

circle.xml

<?xml version="1.0" encoding="utf-8"?> 
<shape xmlns:android="http://schemas.android.com/apk/res/android" 
    android:shape="oval"> 

    <solid android:color="@color/circle_color"></solid> 

    <size 
     android:width="50dp" 
     android:height="50dp"/> 
</shape> 

-Layout für mein Fragment

<?xml version="1.0" encoding="utf-8"?> 
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:app="http://schemas.android.com/apk/res-auto" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:id="@+id/fragments_container"> 

    <Button 
     android:id="@+id/my_button" 
     android:layout_width="200dp" 
     android:layout_height="100dp" 
     android:layout_gravity="center" 
     android:background="@color/buttons_color" 
     android:visibility="invisible" 
     /> 

    <ImageView 
     android:id="@+id/circle_image" 
     android:layout_gravity="center" 
     android:layout_width="50dp" 
     android:layout_height="50dp" 
     app:srcCompat="@drawable/circle" /> 

</FrameLayout> 

Dann in meinem Fragment

@Override 
public void onActivityCreated(@Nullable Bundle savedInstanceState) { 
    super.onActivityCreated(savedInstanceState); 

    activity = (MainActivity) getActivity(); 
    final View fragments_container = activity.findViewById(R.id.fragments_container); 

    final Button button = (Button) activity.findViewById(R.id.my_button); 
    final ImageView image = (ImageView) activity.findViewById(R.id.circle_image); 



    image.setOnClickListener(new ImageView.OnClickListener(){ 
     @Override 
     public void onClick(View v) { 
      Animator animator = ViewAnimationUtils.createCircularReveal(fragments_container, 
        image.getLeft() + image.getWidth()/2, 
        image.getTop() + image.getHeight()/2, 
        0, 
        button.getWidth()); 

      image.setVisibility(View.INVISIBLE); 
      button.setVisibility(View.VISIBLE); 
      animator.start(); 
     } 
    }); 
} 

Bis jetzt funktioniert alles gut. Als nächstes möchte ich eine umgekehrte kreisförmige Enthüllungsanimation machen - im Grunde die gleiche Animation, die ich gerade erstellt habe, gerade umgekehrt, so dass ich am Ende meinen kleinen Kreis und Knopf hätte verschwinden lassen.

Kann jemand mir ein paar Tipps geben, wie könnte ich es tun?

Answer 1

Ich habe versucht, etwas zu lösen Ihr Problem hoffe, es hilft Ihnen.

// hier ist die reveveShow-Methode und Sie können die Animationsdauer entsprechend Ihrer Anforderung ändern.

@RequiresApi(api = Build.VERSION_CODES.LOLLIPOP) 
    private void revealShow(View view, boolean isExpand) { 

     int w = view.getWidth(); 
     int h = view.getHeight(); 

     int endRadius = (int) Math.hypot(w, h); 

     int cx = (int) (image.getX() + (image.getWidth()/2)); 
     int cy = (int) (image.getY() + (image.getHeight()/2)); 


     if (isExpand) { 
      Animator revealAnimator = ViewAnimationUtils.createCircularReveal(fragments_container, cx, cy, 0, endRadius); 

      image.setVisibility(View.INVISIBLE); 
      button.setVisibility(View.VISIBLE); 
      revealAnimator.setDuration(500); 
      revealAnimator.start(); 

     } else { 

      Animator anim = 
        ViewAnimationUtils.createCircularReveal(fragments_container, cx, cy, endRadius, image.getWidth()/2); 

      anim.addListener(new AnimatorListenerAdapter() { 
       @Override 
       public void onAnimationEnd(Animator animation) { 
        super.onAnimationEnd(animation); 
        image.setVisibility(View.VISIBLE); 
        button.setVisibility(View.INVISIBLE); 
       } 
      }); 
      anim.setDuration(500); 
      anim.start(); 
     } 
    }