Animasyon kullanarak işlem başlatma

Compose yöntemini deneyin

Jetpack Compose, Android için önerilen kullanıcı arayüzü araç setidir. Compose'da animasyonlarla nasıl çalışacağınızı öğrenin.

Compose'da farklı içerik türleri arasında animasyon oluşturma →

Materyal Tasarım uygulamalarındaki etkinlik geçişleri, ortak öğeler arasındaki hareket ve dönüşümler aracılığıyla farklı durumlar arasında görsel bağlantılar sağlar. Giriş ve çıkış geçişleri ile etkinlikler arasındaki paylaşılan öğelerin geçişleri için özel animasyonlar belirleyebilirsiniz.

• Bir giriş geçişi, bir etkinlikteki görünümlerin sahneye nasıl gireceğini belirler. Örneğin, explode giriş geçişinde görünümler sahneye dışarıdan girer ve içeriye doğru uçarak ekranın ortasına gelir.
• Bir çıkış geçişi, bir etkinlikteki görünümlerin sahneden nasıl çıkacağını belirler. Örneğin, explode çıkış geçişinde görünümler sahneden merkezin uzağına doğru çıkar.
• Paylaşılan öğeler geçişi, iki etkinlik arasında paylaşılan görünümlerin bu etkinlikler arasında nasıl geçiş yapacağını belirler. Örneğin, iki etkinlikte farklı konumlarda ve boyutlarda aynı resim varsa changeImageTransform paylaşılan öğe geçişi, resmi bu etkinlikler arasında sorunsuz bir şekilde çevirir ve ölçeklendirir.

Android aşağıdaki giriş ve çıkış geçişlerini destekler:

• explode: Görüntüleri sahnenin merkezine doğru veya merkezden uzağa taşır.
• slide: Görüntüleri sahnenin kenarlarından birine veya dışına doğru hareket ettirir.
• fade: Opaklığını değiştirerek sahneye görünüm ekler veya görünümü kaldırır.

Visibility sınıfını genişleten tüm geçişler, giriş veya çıkış geçişi olarak desteklenir. Daha fazla bilgi için Transition sınıfının API referansına bakın.

Android, aşağıdaki paylaşılan öğe geçişlerini de destekler:

• changeBounds: Hedef görünümlerin düzen sınırlarında yapılan değişiklikleri canlandırır.
• changeClipBounds: Hedef görünümlerin klip sınırlarında yapılan değişiklikleri animasyonla gösterir.
• changeTransform: Hedef görünümlerin ölçeğindeki ve dönüşündeki değişiklikleri canlandırır.
• changeImageTransform: Hedef resimlerin boyut ve ölçeğindeki değişiklikleri canlandırır.

Uygulamanızda etkinlik geçişlerini etkinleştirdiğinizde, giren ve çıkan etkinlikler arasında varsayılan çapraz geçiş geçişi etkinleşir.

Şekil 2. Bir paylaşılan öğe içeren sahne geçişi.

Paylaşılan öğeleri kullanarak etkinlikler arasında animasyon oluşturan örnek kod için ActivitySceneTransitionBasic'e bakın.

Sistem sürümünü kontrol etme

Etkinlik geçişi API'leri Android 5.0 (API 21) ve sonraki sürümlerde kullanılabilir. Android'in önceki sürümleriyle uyumluluğu korumak için bu özelliklerin API'lerini çağırmadan önce çalışma zamanında sistemi version kontrol edin:

// Check if we're running on Android 5.0 or higher
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
    // Apply activity transition
} else {
    // Swap without transition
}

// Check if we're running on Android 5.0 or higher
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
    // Apply activity transition
} else {
    // Swap without transition
}

Özel geçişler belirtme

Öncelikle, Material temasından devralınan bir stil tanımlarken android:windowActivityTransitions özelliğiyle pencere içeriği geçişlerini etkinleştirin. Ayrıca stil tanımınızda giriş, çıkış ve paylaşılan öğe geçişlerini de belirtebilirsiniz:

<style name="BaseAppTheme" parent="android:Theme.Material">
  <!-- enable window content transitions -->
  <item name="android:windowActivityTransitions">true</item>

  <!-- specify enter and exit transitions -->
  <item name="android:windowEnterTransition">@transition/explode</item>
  <item name="android:windowExitTransition">@transition/explode</item>

  <!-- specify shared element transitions -->
  <item name="android:windowSharedElementEnterTransition">
    @transition/change_image_transform</item>
  <item name="android:windowSharedElementExitTransition">
    @transition/change_image_transform</item>
</style>

Bu örnekteki change_image_transform geçişi şu şekilde tanımlanır:

<!-- res/transition/change_image_transform.xml -->
<!-- (see also Shared Transitions below) -->
<transitionSet xmlns:android="http://schemas.android.com/apk/res/android">
  <changeImageTransform/>
</transitionSet>

changeImageTransform öğesi, ChangeImageTransform sınıfına karşılık gelir. Daha fazla bilgi için Transition ile ilgili API referansına bakın.

Bunun yerine kodunuzda pencere içeriği geçişlerini etkinleştirmek için Window.requestFeature() işlevini çağırın:

// Inside your activity (if you did not enable transitions in your theme)
with(window) {
    requestFeature(Window.FEATURE_ACTIVITY_TRANSITIONS)

    // Set an exit transition
    exitTransition = Explode()
}

// Inside your activity (if you did not enable transitions in your theme)
getWindow().requestFeature(Window.FEATURE_ACTIVITY_TRANSITIONS);

// Set an exit transition
getWindow().setExitTransition(new Explode());

Kodunuzda geçişleri belirtmek için bu işlevleri bir Transition nesnesiyle çağırın:

• Window.setEnterTransition()
• Window.setExitTransition()
• Window.setSharedElementEnterTransition()
• Window.setSharedElementExitTransition()

setExitTransition() ve setSharedElementExitTransition() işlevleri, çağırma etkinliğinin çıkış geçişini tanımlar. setEnterTransition() ve setSharedElementEnterTransition() işlevleri, çağrılan etkinlik için giriş geçişini tanımlar.

Geçişin tam etkisini elde etmek için hem arayan hem de aranan etkinliklerde pencere içeriği geçişlerini etkinleştirmeniz gerekir. Aksi takdirde, arama etkinliği çıkış geçişini başlatır ancak daha sonra ölçek veya solma gibi pencere geçişlerini görürsünüz.

Giriş geçişini mümkün olan en kısa sürede başlatmak için çağrılan etkinlikte Window.setAllowEnterTransitionOverlap() işlevini kullanın. Bu sayede daha çarpıcı giriş geçişleri yapabilirsiniz.

Geçişleri kullanarak etkinlik başlatma

Geçişleri etkinleştirir ve bir etkinlik için çıkış geçişi ayarlarsanız geçiş, başka bir etkinlik başlattığınızda aşağıdaki gibi etkinleşir:

startActivity(intent,
              ActivityOptions.makeSceneTransitionAnimation(this).toBundle())

startActivity(intent,
              ActivityOptions.makeSceneTransitionAnimation(this).toBundle());

İkinci etkinlik için giriş geçişi ayarlarsanız bu geçiş de etkinlik başladığında etkinleşir. Başka bir etkinliğe başladığınızda geçişleri devre dışı bırakmak için null seçenek paketi sağlayın.

Paylaşılan bir öğeyle etkinlik başlatma

Ortak öğeye sahip iki etkinlik arasında ekran geçişi animasyonu oluşturmak için aşağıdakileri yapın:

1. Temanızda pencere içeriği geçişlerini etkinleştirin.
2. Stilinizde paylaşılan öğe geçişi belirtin.
3. Geçişinizi bir XML kaynağı olarak tanımlayın.
4. android:transitionName özelliğiyle her iki düzendeki paylaşılan öğelere ortak bir ad atayın.
5. ActivityOptions.makeSceneTransitionAnimation() işlevini kullanın.

// Get the element that receives the click event
val imgContainerView = findViewById<View>(R.id.img_container)

// Get the common element for the transition in this activity
val androidRobotView = findViewById<View>(R.id.image_small)

// Define a click listener
imgContainerView.setOnClickListener( {
    val intent = Intent(this, Activity2::class.java)
    // Create the transition animation - the images in the layouts
    // of both activities are defined with android:transitionName="robot"
    val options = ActivityOptions
            .makeSceneTransitionAnimation(this, androidRobotView, "robot")
    // Start the new activity
    startActivity(intent, options.toBundle())
})

// Get the element that receives the click event
final View imgContainerView = findViewById(R.id.img_container);

// Get the common element for the transition in this activity
final View androidRobotView = findViewById(R.id.image_small);

// Define a click listener
imgContainerView.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View view) {
        Intent intent = new Intent(this, Activity2.class);
        // Create the transition animation - the images in the layouts
        // of both activities are defined with android:transitionName="robot"
        ActivityOptions options = ActivityOptions
            .makeSceneTransitionAnimation(this, androidRobotView, "robot");
        // Start the new activity
        startActivity(intent, options.toBundle());
    }
});

Kodunuzda oluşturduğunuz paylaşılan dinamik görünümler için, her iki etkinlikte de ortak bir öğe adı belirtmek üzere View.setTransitionName() işlevini kullanın.

İkinci etkinliği tamamladığınızda sahne geçişi animasyonunu tersine çevirmek için Activity.finish() yerine Activity.finishAfterTransition() işlevini çağırın.

Birden fazla paylaşılan öğeyle etkinlik başlatma

Birden fazla ortak öğeye sahip iki etkinlik arasında sahne geçişi animasyonu oluşturmak için ortak öğeleri her iki düzende de android:transitionName özelliğiyle tanımlayın veya her iki etkinlikte de View.setTransitionName() işlevini kullanın ve aşağıdaki gibi bir ActivityOptions nesnesi oluşturun:

// Rename the Pair class from the Android framework to avoid a name clash
import android.util.Pair as UtilPair
...
val options = ActivityOptions.makeSceneTransitionAnimation(this,
        UtilPair.create(view1, "agreedName1"),
        UtilPair.create(view2, "agreedName2"))

ActivityOptions options = ActivityOptions.makeSceneTransitionAnimation(this,
        Pair.create(view1, "agreedName1"),
        Pair.create(view2, "agreedName2"));