Ansicht mit einer Animation ein- oder ausblenden

Funktion „Schreiben“ ausprobieren
Jetpack Compose ist das empfohlene UI-Toolkit für Android. Hier erfahren Sie, wie Sie Animationen in Compose verwenden.

Während Ihre Anwendung verwendet wird, werden neue Informationen auf dem Bildschirm angezeigt und alte Informationen entfernt. Es kann irritierend sein, zu ändern, was auf dem Bildschirm angezeigt wird, und Nutzer können neue Inhalte übersehen. Animationen verlangsamen die Änderungen und ziehen durch Bewegung die Aufmerksamkeit der Nutzer auf sich, sodass die Aktualisierungen offensichtlicher sind.

Es gibt drei gängige Animationen, mit denen Sie eine Ansicht ein- oder ausblenden können: Animationen einblenden, Überblenden und Cardflip-Animationen.

Überblenden-Animation erstellen

Bei einer Animation überblendende Farben (auch als Auflösen bezeichnet) wird ein View oder ViewGroup schrittweise ausgeblendet, während ein anderes wieder eingeblendet wird. Diese Animation ist nützlich, wenn Sie Inhalte oder Ansichten in Ihrer App wechseln möchten. Für die hier gezeigte Überblendungsanimation wird ViewPropertyAnimator verwendet, das für Android 3.1 (API-Ebene 12) und höher verfügbar ist.

Hier ein Beispiel für eine Überblendung von einer Fortschrittsanzeige zu Textinhalt:

Abbildung 1. Animation überblenden.

Ansichten erstellen

Erstellen Sie die beiden Ansichten, die Sie überblenden möchten. Im folgenden Beispiel werden eine Fortschrittsanzeige und eine scrollbare Textansicht erstellt:

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/content"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <TextView style="?android:textAppearanceMedium"
            android:lineSpacingMultiplier="1.2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="@string/lorem_ipsum"
            android:padding="16dp" />

    </ScrollView>

    <ProgressBar android:id="@+id/loading_spinner"
        style="?android:progressBarStyleLarge"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center" />

</FrameLayout>

Überblenden-Animation einrichten

So richten Sie die Überblendungsanimation ein:

  1. Erstellen Sie Membervariablen für die Ansichten, die Sie überblenden möchten. Sie benötigen diese Verweise später, wenn Sie die Ansichten während der Animation ändern.
  2. Legen Sie die Sichtbarkeit der Ansicht, die eingeblendet wird, auf GONE fest. Dadurch wird verhindert, dass die Ansicht Layouträume verwendet und bei Layoutberechnungen weggelassen wird, wodurch die Verarbeitung beschleunigt wird.
  3. Speichern Sie das Systemattribut config_shortAnimTime in einer Mitgliedsvariable im Cache. Diese Eigenschaft definiert eine standardmäßige "kurze" Dauer für die Animation. Diese Dauer ist ideal für subtile Animationen oder Animationen, die häufig auftreten. config_longAnimTime und config_mediumAnimTime sind ebenfalls verfügbar.

Hier ist ein Beispiel, bei dem das Layout aus dem vorherigen Code-Snippet als Aktivitätsinhaltsansicht verwendet wird:

Kotlin

class CrossfadeActivity : Activity() {

    private lateinit var contentView: View
    private lateinit var loadingView: View
    private var shortAnimationDuration: Int = 0
    ...
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_crossfade)

        contentView = findViewById(R.id.content)
        loadingView = findViewById(R.id.loading_spinner)

        // Initially hide the content view.
        contentView.visibility = View.GONE

        // Retrieve and cache the system's default "short" animation time.
        shortAnimationDuration = resources.getInteger(android.R.integer.config_shortAnimTime)
    }
    ...
}

Java

public class CrossfadeActivity extends Activity {

    private View contentView;
    private View loadingView;
    private int shortAnimationDuration;
    ...
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_crossfade);

        contentView = findViewById(R.id.content);
        loadingView = findViewById(R.id.loading_spinner);

        // Initially hide the content view.
        contentView.setVisibility(View.GONE);

        // Retrieve and cache the system's default "short" animation time.
        shortAnimationDuration = getResources().getInteger(
                android.R.integer.config_shortAnimTime);
    }
    ...
}

Ansichten überblenden

Wenn die Ansichten korrekt eingerichtet sind, können Sie sie folgendermaßen überblenden:

  1. Legen Sie für die eingeblendete Ansicht den Alphawert auf 0 und die Sichtbarkeit von der anfänglichen Einstellung von GONE auf VISIBLE fest. Dadurch wird die Ansicht sichtbar, aber transparent.
  2. Animieren Sie für die eingeblendete Ansicht den Alphawert von 0 bis 1. Animieren Sie für die ausgeblendete Ansicht den Alphawert von 1 bis 0.
  3. Mit onAnimationEnd() in einem Animator.AnimatorListener legen Sie die Sichtbarkeit der ausblendenden Ansicht auf GONE fest. Auch wenn der Alphawert 0 ist, verhindert das Festlegen der Sichtbarkeit der Ansicht auf GONE, dass die Ansicht den Layoutbereich verwendet und ihn bei Layoutberechnungen auslässt, wodurch die Verarbeitung beschleunigt wird.

Die folgende Methode zeigt ein Beispiel dafür:

Kotlin

class CrossfadeActivity : Activity() {

    private lateinit var contentView: View
    private lateinit var loadingView: View
    private var shortAnimationDuration: Int = 0
    ...
    private fun crossfade() {
        contentView.apply {
            // Set the content view to 0% opacity but visible, so that it is
            // visible but fully transparent during the animation.
            alpha = 0f
            visibility = View.VISIBLE

            // Animate the content view to 100% opacity and clear any animation
            // listener set on the view.
            animate()
                    .alpha(1f)
                    .setDuration(shortAnimationDuration.toLong())
                    .setListener(null)
        }
        // Animate the loading view to 0% opacity. After the animation ends,
        // set its visibility to GONE as an optimization step so it doesn't
        // participate in layout passes.
        loadingView.animate()
                .alpha(0f)
                .setDuration(shortAnimationDuration.toLong())
                .setListener(object : AnimatorListenerAdapter() {
                    override fun onAnimationEnd(animation: Animator) {
                        loadingView.visibility = View.GONE
                    }
                })
    }
}

Java

public class CrossfadeActivity extends Activity {

    private View contentView;
    private View loadingView;
    private int shortAnimationDuration;
    ...
    private void crossfade() {

        // Set the content view to 0% opacity but visible, so that it is
        // visible but fully transparent during the animation.
        contentView.setAlpha(0f);
        contentView.setVisibility(View.VISIBLE);

        // Animate the content view to 100% opacity and clear any animation
        // listener set on the view.
        contentView.animate()
                .alpha(1f)
                .setDuration(shortAnimationDuration)
                .setListener(null);

        // Animate the loading view to 0% opacity. After the animation ends,
        // set its visibility to GONE as an optimization step so it doesn't
        // participate in layout passes.
        loadingView.animate()
                .alpha(0f)
                .setDuration(shortAnimationDuration)
                .setListener(new AnimatorListenerAdapter() {
                    @Override
                    public void onAnimationEnd(Animator animation) {
                        loadingView.setVisibility(View.GONE);
                    }
                });
    }
}

Eine Karte umdrehen-Animation erstellen

Beim Umblättern von Karten wird eine Animation angezeigt, in der das Umdrehen einer Karte nachgeahmt wird. In der hier gezeigten Animation zum Umblättern der Karte wird FragmentTransaction verwendet.

So sieht ein Kartenwechsel aus:

Abbildung 2. Animation um Karten umdrehen.

Animator-Objekte erstellen

Für die Animation beim Umblättern der Karte benötigst du vier Animatoren. Zwei Animatoren werden verwendet, wenn die Vorderseite der Karte nach links und außen animiert und von links nach innen und links animiert wird. Die anderen beiden Animatoren werden verwendet, wenn die Rückseite der Karte von rechts ein- und auseinander bzw. nach rechts animiert wird.

card_flip_left_in.xml

<set xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- Before rotating, immediately set the alpha to 0. -->
    <objectAnimator
        android:valueFrom="1.0"
        android:valueTo="0.0"
        android:propertyName="alpha"
        android:duration="0" />

    <!-- Rotate. -->
    <objectAnimator
        android:valueFrom="-180"
        android:valueTo="0"
        android:propertyName="rotationY"
        android:interpolator="@android:interpolator/accelerate_decelerate"
        android:duration="@integer/card_flip_time_full" />

    <!-- Halfway through the rotation, set the alpha to 1. See startOffset. -->
    <objectAnimator
        android:valueFrom="0.0"
        android:valueTo="1.0"
        android:propertyName="alpha"
        android:startOffset="@integer/card_flip_time_half"
        android:duration="1" />
</set>

card_flip_left_out.xml

<set xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- Rotate. -->
    <objectAnimator
        android:valueFrom="0"
        android:valueTo="180"
        android:propertyName="rotationY"
        android:interpolator="@android:interpolator/accelerate_decelerate"
        android:duration="@integer/card_flip_time_full" />

    <!-- Halfway through the rotation, set the alpha to 0. See startOffset. -->
    <objectAnimator
        android:valueFrom="1.0"
        android:valueTo="0.0"
        android:propertyName="alpha"
        android:startOffset="@integer/card_flip_time_half"
        android:duration="1" />
</set>

card_flip_right_in.xml

<set xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- Before rotating, immediately set the alpha to 0. -->
    <objectAnimator
        android:valueFrom="1.0"
        android:valueTo="0.0"
        android:propertyName="alpha"
        android:duration="0" />

    <!-- Rotate. -->
    <objectAnimator
        android:valueFrom="180"
        android:valueTo="0"
        android:propertyName="rotationY"
        android:interpolator="@android:interpolator/accelerate_decelerate"
        android:duration="@integer/card_flip_time_full" />

    <!-- Halfway through the rotation, set the alpha to 1. See startOffset. -->
    <objectAnimator
        android:valueFrom="0.0"
        android:valueTo="1.0"
        android:propertyName="alpha"
        android:startOffset="@integer/card_flip_time_half"
        android:duration="1" />
</set>

card_flip_right_out.xml

<set xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- Rotate. -->
    <objectAnimator
        android:valueFrom="0"
        android:valueTo="-180"
        android:propertyName="rotationY"
        android:interpolator="@android:interpolator/accelerate_decelerate"
        android:duration="@integer/card_flip_time_full" />

    <!-- Halfway through the rotation, set the alpha to 0. See startOffset. -->
    <objectAnimator
        android:valueFrom="1.0"
        android:valueTo="0.0"
        android:propertyName="alpha"
        android:startOffset="@integer/card_flip_time_half"
        android:duration="1" />
</set>

Ansichten erstellen

Jede Seite der Karte ist ein separates Layout, das beliebige Inhalte enthalten kann, z. B. zwei Textansichten, zwei Bilder oder eine beliebige Kombination von Ansichten, zwischen denen gewechselt werden kann. Verwenden Sie die beiden Layouts in den Fragmenten, die Sie später animieren. Mit dem folgenden Layout wird eine Seite einer Karte erstellt, auf der Text angezeigt wird:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:background="#a6c"
    android:padding="16dp"
    android:gravity="bottom">

    <TextView android:id="@android:id/text1"
        style="?android:textAppearanceLarge"
        android:textStyle="bold"
        android:textColor="#fff"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/card_back_title" />

    <TextView style="?android:textAppearanceSmall"
        android:textAllCaps="true"
        android:textColor="#80ffffff"
        android:textStyle="bold"
        android:lineSpacingMultiplier="1.2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/card_back_description" />

</LinearLayout>

Im nächsten Layout wird die andere Seite der Karte erstellt, auf der ein ImageView angezeigt wird:

<ImageView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:src="@drawable/image1"
    android:scaleType="centerCrop"
    android:contentDescription="@string/description_image_1" />

Fragmente erstellen

Erstellen Sie Fragmentklassen für die Vorder- und Rückseite der Karte. Geben Sie in Ihren Fragmentklassen die Layouts zurück, die Sie mit der Methode onCreateView() erstellt haben. Anschließend können Sie Instanzen dieses Fragments in der übergeordneten Aktivität erstellen, in der die Karte angezeigt werden soll.

Das folgende Beispiel zeigt verschachtelte Fragmentklassen innerhalb der übergeordneten Aktivität, in der sie verwendet werden:

Kotlin

class CardFlipActivity : FragmentActivity() {
    ...
    /**

                    *   A fragment representing the front of the card.
     */
    class CardFrontFragment : Fragment() {

    override fun onCreateView(
                inflater: LayoutInflater,
                container: ViewGroup?,
                savedInstanceState: Bundle?
    ): View = inflater.inflate(R.layout.fragment_card_front, container, false)
    }

    /**
    *   A fragment representing the back of the card.
    */
    class CardBackFragment : Fragment() {

    override fun onCreateView(
                inflater: LayoutInflater,
                container: ViewGroup?,
                savedInstanceState: Bundle?
    ): View = inflater.inflate(R.layout.fragment_card_back, container, false)
    }
}

Java

public class CardFlipActivity extends FragmentActivity {
    ...
    /**
    *   A fragment representing the front of the card.
    */
    public class CardFrontFragment extends Fragment {
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                Bundle savedInstanceState) {
            return inflater.inflate(R.layout.fragment_card_front, container, false);
    }
    }

    /**
    *   A fragment representing the back of the card.
    */
    public class CardBackFragment extends Fragment {
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                Bundle savedInstanceState) {
            return inflater.inflate(R.layout.fragment_card_back, container, false);
    }
    }
}

Karte umdrehen

Fragmente in einer übergeordneten Aktivität anzeigen. Dazu erstellen Sie das Layout für Ihre Aktivität. Im folgenden Beispiel wird ein FrameLayout erstellt, dem Sie zur Laufzeit Fragmente hinzufügen können:

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

Legen Sie im Aktivitätscode die Inhaltsansicht auf das von Ihnen erstellte Layout fest. Es empfiehlt sich, beim Erstellen der Aktivität ein Standardfragment anzuzeigen. Die folgende Beispielaktivität zeigt, wie standardmäßig die Vorderseite der Karte angezeigt wird:

Kotlin

class CardFlipActivity : FragmentActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_activity_card_flip)
        if (savedInstanceState == null) {
            supportFragmentManager.beginTransaction()
                    .add(R.id.container, CardFrontFragment())
                    .commit()
        }
    }
    ...
}

Java

public class CardFlipActivity extends FragmentActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_activity_card_flip);

        if (savedInstanceState == null) {
            getSupportFragmentManager()
                    .beginTransaction()
                    .add(R.id.container, new CardFrontFragment())
                    .commit();
        }
    }
    ...
}

Während die Vorderseite der Karte angezeigt wird, kannst du die Rückseite der Karte mit der Flip-Animation zum entsprechenden Zeitpunkt anzeigen. Erstellen Sie eine Methode, um die andere Seite der Karte zu zeigen, die die folgenden Aufgaben erfüllt:

  • Legt die benutzerdefinierten Animationen fest, die Sie für die Fragmentübergänge erstellt haben.
  • Ersetzt das angezeigte Fragment durch ein neues Fragment und animiert dieses Ereignis mit den von Ihnen erstellten benutzerdefinierten Animationen.
  • Fügt das zuvor angezeigte Fragment in den Back-Stack des Fragments ein. Wenn der Nutzer also auf die Schaltfläche „Zurück“ tippt, wird die Karte wieder umgedreht.

Kotlin

class CardFlipActivity : FragmentActivity() {
    ...
    private fun flipCard() {
        if (showingBack) {
            supportFragmentManager.popBackStack()
            return
        }

        // Flip to the back.

        showingBack = true

        // Create and commit a new fragment transaction that adds the fragment
        // for the back of the card, uses custom animations, and is part of the
        // fragment manager's back stack.

        supportFragmentManager.beginTransaction()

                // Replace the default fragment animations with animator
                // resources representing rotations when switching to the back
                // of the card, as well as animator resources representing
                // rotations when flipping back to the front, such as when the
                // system Back button is tapped.
                .setCustomAnimations(
                        R.animator.card_flip_right_in,
                        R.animator.card_flip_right_out,
                        R.animator.card_flip_left_in,
                        R.animator.card_flip_left_out
                )

                // Replace any fragments in the container view with a fragment
                // representing the next page, indicated by the just-incremented
                // currentPage variable.
                .replace(R.id.container, CardBackFragment())

                // Add this transaction to the back stack, letting users press
                // the Back button to get to the front of the card.
                .addToBackStack(null)

                // Commit the transaction.
                .commit()
    }
}

Java

public class CardFlipActivity extends FragmentActivity {
    ...
    private void flipCard() {
        if (showingBack) {
            getSupportFragmentManager().popBackStack();
            return;
        }

        // Flip to the back.

        showingBack = true;

        // Create and commit a new fragment transaction that adds the fragment
        // for the back of the card, uses custom animations, and is part of the
        // fragment manager's back stack.

        getSupportFragmentManager()
                .beginTransaction()

                // Replace the default fragment animations with animator
                // resources representing rotations when switching to the back
                // of the card, as well as animator resources representing
                // rotations when flipping back to the front, such as when the
                // system Back button is pressed.
                .setCustomAnimations(
                        R.animator.card_flip_right_in,
                        R.animator.card_flip_right_out,
                        R.animator.card_flip_left_in,
                        R.animator.card_flip_left_out)

                // Replace any fragments in the container view with a fragment
                // representing the next page, indicated by the just-incremented
                // currentPage variable.
                .replace(R.id.container, new CardBackFragment())

                // Add this transaction to the back stack, letting users press
                // Back to get to the front of the card.
                .addToBackStack(null)

                // Commit the transaction.
                .commit();
    }
}

Eine kreisförmige Enthüllungsanimation erstellen

Diese Animationen sorgen für visuelle Kontinuität, wenn Sie eine Gruppe von UI-Elementen ein- oder ausblenden. Mit der Methode ViewAnimationUtils.createCircularReveal() können Sie einen Kreis zum Ausschneiden animieren, um eine Ansicht ein- oder auszublenden. Diese Animation wird in der Klasse ViewAnimationUtils bereitgestellt, die für Android 5.0 (API-Level 21) und höher verfügbar ist.

Hier ist ein Beispiel, das zeigt, wie eine zuvor unsichtbare Ansicht angezeigt wird:

Kotlin

// A previously invisible view.
val myView: View = findViewById(R.id.my_view)

// Check whether the runtime version is at least Android 5.0.
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
    // Get the center for the clipping circle.
    val cx = myView.width / 2
    val cy = myView.height / 2

    // Get the final radius for the clipping circle.
    val finalRadius = Math.hypot(cx.toDouble(), cy.toDouble()).toFloat()

    // Create the animator for this view. The start radius is 0.
    val anim = ViewAnimationUtils.createCircularReveal(myView, cx, cy, 0f, finalRadius)
    // Make the view visible and start the animation.
    myView.visibility = View.VISIBLE
    anim.start()
} else {
    // Set the view to invisible without a circular reveal animation below
    // Android 5.0.
    myView.visibility = View.INVISIBLE
}

Java

// A previously invisible view.
View myView = findViewById(R.id.my_view);

// Check whether the runtime version is at least Android 5.0.
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
    // Get the center for the clipping circle.
    int cx = myView.getWidth() / 2;
    int cy = myView.getHeight() / 2;

    // Get the final radius for the clipping circle.
    float finalRadius = (float) Math.hypot(cx, cy);

    // Create the animator for this view. The start radius is 0.
    Animator anim = ViewAnimationUtils.createCircularReveal(myView, cx, cy, 0f, finalRadius);

    // Make the view visible and start the animation.
    myView.setVisibility(View.VISIBLE);
    anim.start();
} else {
    // Set the view to invisible without a circular reveal animation below
    // Android 5.0.
    myView.setVisibility(View.INVISIBLE);
}

Die Animation ViewAnimationUtils.createCircularReveal() verwendet fünf Parameter. Der erste Parameter ist die Ansicht, die auf dem Bildschirm aus- oder eingeblendet werden soll. Die nächsten beiden Parameter sind die X- und Y-Koordinaten für die Mitte des Beschneidungskreises. Normalerweise ist dies die Mitte der Ansicht. Sie können aber auch den Punkt verwenden, auf den der Nutzer tippt, damit die Animation an der Stelle beginnt, an der er sie auswählt. Der vierte Parameter ist der Startradius des Beschneidungskreises.

Im vorherigen Beispiel wurde der anfängliche Radius auf null gesetzt, sodass die angezeigte Ansicht durch den Kreis verborgen wird. Der letzte Parameter ist der endgültige Radius des Kreises. Wenn eine Ansicht dargestellt wird, sollte der endgültige Radius größer als die Ansicht sein, damit die Ansicht vor Ende der Animation vollständig sichtbar ist.

So blenden Sie eine zuvor sichtbare Ansicht aus:

Kotlin

// A previously visible view.
val myView: View = findViewById(R.id.my_view)

// Check whether the runtime version is at least Android 5.0.
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
    // Get the center for the clipping circle.
    val cx = myView.width / 2
    val cy = myView.height / 2

    // Get the initial radius for the clipping circle.
    val initialRadius = Math.hypot(cx.toDouble(), cy.toDouble()).toFloat()

    // Create the animation. The final radius is 0.
    val anim = ViewAnimationUtils.createCircularReveal(myView, cx, cy, initialRadius, 0f)

    // Make the view invisible when the animation is done.
    anim.addListener(object : AnimatorListenerAdapter() {

        override fun onAnimationEnd(animation: Animator) {
            super.onAnimationEnd(animation)
            myView.visibility = View.INVISIBLE
        }
    })

    // Start the animation.
    anim.start()
} else {
    // Set the view to visible without a circular reveal animation below
    // Android 5.0.
    myView.visibility = View.VISIBLE
}

Java

// A previously visible view.
final View myView = findViewById(R.id.my_view);

// Check whether the runtime version is at least Android 5.0.
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
    // 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 0.
    Animator anim = ViewAnimationUtils.createCircularReveal(myView, cx, cy, initialRadius, 0f);

    // Make the view invisible when the animation is done.
    anim.addListener(new AnimatorListenerAdapter() {
        @Override
        public void onAnimationEnd(Animator animation) {
            super.onAnimationEnd(animation);
            myView.setVisibility(View.INVISIBLE);
        }
    });

    // Start the animation.
    anim.start();
} else {
    // Set the view to visible without a circular reveal animation below Android
    // 5.0.
    myView.setVisibility(View.VISIBLE);
}

In diesem Fall wird der anfängliche Radius des Beschneidungskreises auf so groß wie die Ansicht festgelegt, sodass die Ansicht vor Beginn der Animation sichtbar ist. Der endgültige Radius wird auf null gesetzt, sodass die Ansicht ausgeblendet wird, wenn die Animation beendet ist. Fügen Sie der Animation einen Listener hinzu, damit die Sichtbarkeit der Ansicht nach Abschluss der Animation auf INVISIBLE gesetzt werden kann.

Weitere Informationen