Bir görünümü animasyon kullanarak açığa çıkarma veya gizleme

Compose yöntemini deneyin
Jetpack Compose, Android için önerilen kullanıcı arayüzü araç setidir. Compose'da animasyonları nasıl kullanacağınızı öğrenin.
Çapraz geçiş →

Uygulamanız kullanılırken ekranda yeni bilgiler görünür ve eski bilgiler kaldırılır. Ekranda gösterilenlerin anında değiştirilmesi rahatsız edici olabilir ve kullanıcılar, aniden görünen yeni içerikleri kaçırabilir. Animasyonlar, değişiklikleri yavaşlatır ve güncellemelerin daha belirgin olması için hareketle kullanıcının dikkatini çeker.

Bir görünümü göstermek veya gizlemek için kullanabileceğiniz üç yaygın animasyon vardır: açığa çıkarma animasyonları, çapraz geçiş animasyonları ve kart çevirme animasyonları.

Çapraz geçiş animasyonu oluşturma

Karartma olarak da bilinen çapraz geçiş animasyonu, bir View veya ViewGroup öğesini yavaş yavaş karartırken aynı anda başka bir öğeyi yavaş yavaş belirginleştirir. Bu animasyon, uygulamanızda içerik veya görünüm değiştirmek istediğiniz durumlarda kullanışlıdır. Burada gösterilen çapraz geçiş animasyonu, Android 3.1 (API düzeyi 12) ve sonraki sürümlerde kullanılabilen ViewPropertyAnimator kullanır.

Aşağıda, ilerleme göstergesinden metin içeriğine geçiş örneği verilmiştir:

Şekil 1. Bindirme animasyonu.

Görünümleri oluşturma

Çapraz geçiş yapmak istediğiniz iki görünümü oluşturun. Aşağıdaki örnekte bir ilerleme göstergesi ve kaydırılabilir metin görünümü oluşturulmaktadır:

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

Çapraz geçiş animasyonunu ayarlama

Çapraz geçiş animasyonunu ayarlamak için aşağıdakileri yapın:

  1. Çapraz geçiş yapmak istediğiniz görünümler için üye değişkenleri oluşturun. Animasyon sırasında görünümleri değiştirirken bu referanslara ihtiyacınız olur.
  2. Görünürlüğü artırılan görünümün görünürlüğünü GONE olarak ayarlayın. Bu, görünümün düzen alanını kullanmasını önler ve görünümü düzen hesaplamalarından çıkararak işlemeyi hızlandırır.
  3. config_shortAnimTime Sistem özelliğini bir üye değişkeninde önbelleğe alın. Bu özellik, animasyon için standart bir "kısa" süre tanımlar. Bu süre, ince animasyonlar veya sık gerçekleşen animasyonlar için idealdir. config_longAnimTime ve config_mediumAnimTime seçenekleri de mevcuttur.

Önceki kod snippet'indeki düzenin etkinlik içeriği görünümü olarak kullanıldığı bir örneği aşağıda bulabilirsiniz:

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);
    }
    ...
}

Görünümleri bindirme

Görünümler düzgün şekilde ayarlandığında aşağıdaki işlemleri yaparak bunları çapraz geçirin:

  1. Görünür hale gelen görünüm için alfa değerini 0'a, görünürlüğü ise başlangıçtaki GONE ayarından VISIBLE olarak ayarlayın. Bu işlem, görünümü görünür ancak şeffaf hale getirir.
  2. Görünümün alfa değerini 0'dan 1'e kadar animasyonla değiştirin. Solan görünüm için alfa değerini 1'den 0'a kadar canlandırın.
  3. onAnimationEnd() kullanarak Animator.AnimatorListener, solan görünümün görünürlüğünü GONE olarak ayarlayın. Alfa değeri 0 olsa bile görünümün görünürlüğünü GONE olarak ayarlamak görünümün düzen alanını kullanmasını engeller ve düzen hesaplamalarından çıkarır. Bu da işlemeyi hızlandırır.

Aşağıdaki yöntemde bu işlemin nasıl yapılacağına dair bir örnek gösterilmektedir:

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);
                    }
                });
    }
}

Kart çevirme animasyonu oluşturma

Kart çevirme, içeriğin görünümleri arasında geçiş yaparken kartın çevrilmesini taklit eden bir animasyon gösterir. Burada gösterilen kart çevirme animasyonunda FragmentTransaction kullanılır.

Kart çevirme özelliği aşağıdaki gibi görünür:

Şekil 2. Kart çevirme animasyonu.

Animator nesnelerini oluşturma

Kart çevirme animasyonu oluşturmak için dört animatöre ihtiyacınız vardır. İki animatör, kartın ön yüzü sola doğru animasyonla çıktığında ve soldan animasyonla girdiğinde kullanılır. Diğer iki animasyon, kartın arkası sağdan animasyonla geldiğinde ve sağa doğru animasyonla çıktığında kullanılır.

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>

Görünümleri oluşturma

Kartın her iki tarafı, istediğiniz içeriği (ör. iki metin görünümü, iki resim veya aralarında geçiş yapmak için herhangi bir görünüm kombinasyonu) içerebilen ayrı bir düzendir. Daha sonra animasyon ekleyeceğiniz parçalarda iki düzeni kullanın. Aşağıdaki düzen, metin gösteren bir kartın bir tarafını oluşturur:

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

Bir sonraki düzen ise kartın diğer tarafını oluşturur ve ImageView gösterir:

<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" />

Parçaları oluşturma

Kartın ön ve arka yüzü için parça sınıfları oluşturun. Parça sınıflarınızda, onCreateView() yönteminden oluşturduğunuz düzenleri döndürün. Ardından, kartı göstermek istediğiniz üst etkinlikte bu parçanın örneklerini oluşturabilirsiniz.

Aşağıdaki örnekte, bunları kullanan üst etkinlik içindeki iç içe yerleştirilmiş fragment sınıfları gösterilmektedir:

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);
    }
    }
}

Kart çevirme animasyonu

Parçaları bir üst etkinlik içinde görüntüleyin. Bunu yapmak için etkinliğinizin düzenini oluşturun. Aşağıdaki örnek, çalışma zamanında parçalar ekleyebileceğiniz bir FrameLayout oluşturur:

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

Etkinlik kodunda, içerik görünümünü oluşturduğunuz düzene ayarlayın. Etkinlik oluşturulduğunda varsayılan bir parça göstermek iyi bir uygulamadır. Aşağıdaki örnek etkinlikte, kartın ön yüzünün varsayılan olarak nasıl gösterileceği açıklanmaktadır:

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();
        }
    }
    ...
}

Kartın ön yüzü gösterilirken uygun bir zamanda çevirme animasyonuyla arka yüzünü gösterebilirsiniz. Kartın diğer tarafını göstermek için aşağıdaki işlemleri yapan bir yöntem oluşturun:

  • Parça geçişleri için oluşturduğunuz özel animasyonları ayarlar.
  • Gösterilen parçayı yeni bir parçayla değiştirir ve bu etkinliği, oluşturduğunuz özel animasyonlarla canlandırır.
  • Daha önce gösterilen parçayı, parçanın geri yığınına ekler. Böylece kullanıcı Geri düğmesine dokunduğunda kart tekrar çevrilir.

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();
    }
}

Dairesel açılma animasyonu oluşturma

Açığa çıkarma animasyonları, bir grup kullanıcı arayüzü öğesini gösterdiğinizde veya gizlediğinizde kullanıcılara görsel süreklilik sağlar. ViewAnimationUtils.createCircularReveal() Yöntemi, bir görünümü göstermek veya gizlemek için kırpma çemberini animasyonla hareket ettirmenize olanak tanır. Bu animasyon, Android 5.0 (API düzeyi 21) ve sonraki sürümlerde kullanılabilen ViewAnimationUtils sınıfında sağlanır.

Daha önce görünür olmayan bir görünümün nasıl gösterileceğini açıklayan bir örneği aşağıda bulabilirsiniz:

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);
}

ViewAnimationUtils.createCircularReveal() animasyonu beş parametre alır. İlk parametre, ekranda gizlemek veya göstermek istediğiniz görünüm. Sonraki iki parametre, kırpma çemberinin merkezinin X ve Y koordinatlarıdır. Genellikle bu, görünümün merkezidir ancak animasyonun kullanıcının seçtiği yerden başlaması için kullanıcının dokunduğu noktayı da kullanabilirsiniz. Dördüncü parametre, kırpma çemberinin başlangıç yarıçapıdır.

Önceki örnekte, gösterilen görünümün daire tarafından gizlenmesi için başlangıç yarıçapı sıfır olarak ayarlanmıştır. Son parametre, dairenin son yarıçapıdır. Bir görünümü görüntülerken, animasyon bitmeden görünümün tamamen ortaya çıkabilmesi için son yarıçapı görünümden daha büyük yapın.

Daha önce görünür olan bir görünümü gizlemek için aşağıdakileri yapın:

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);
}

Bu durumda, kırpma çemberinin başlangıç yarıçapı, animasyon başlamadan önce görünümün görünür olması için görünüm kadar büyük olacak şekilde ayarlanır. Animasyon bittiğinde görünümün gizlenmesi için son yarıçap sıfır olarak ayarlanır. Animasyona bir dinleyici ekleyerek animasyon tamamlandığında görünümün görünürlüğünün INVISIBLE olarak ayarlanmasını sağlayın.

Ek kaynaklar