Animasyon kullanarak işlem başlatma

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

1. Şekil. Paylaşılan öğelere sahip bir geçiş.

  • Enter geçişi, bir etkinlikteki görüntülemelerin sahneye nasıl girdiğini belirler. Örneğin, explode giriş geçişinde, görünümler sahneye dışarıdan girer ve ekranın ortasına doğru içe doğru uçur.
  • Çıkış geçişi, bir etkinlikteki görüntülemelerin sahneden nasıl çıktığını belirler. Örneğin, explode çıkış geçişinde görünümler, sahneden merkezden dışarı çı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ş yaptığını belirler. Örneğin, iki etkinlik farklı konumlarda ve boyutlarda aynı resme sahipse changeImageTransform paylaşılan öğe geçişi bu etkinlikler arasında resmi çevirir ve ölçeklendirir.

Android, şu giriş ve çıkış geçişlerini destekler:

  • explode: Görünümleri sahnenin merkezinden içine veya dışına taşır.
  • slide: Görüntülemeleri sahnenin kenarlarından birinin içine veya dışına taşır.
  • fade: Bir görünümün opaklığını değiştirerek sahneye ekler veya görünümden kaldırır.

Visibility sınıfını genişleten 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, şu paylaşılan öğe geçişlerini de destekler:

  • changeBounds: Hedef görünümlerin düzen sınırlarındaki değişiklikleri canlandırır.
  • changeClipBounds: Hedef görünümlerin klip sınırlarındaki değişikliklerin animasyonunu gösterir.
  • changeTransform: Hedef görünümlerin ölçek ve rotasyonundaki değişiklikleri canlandırır.
  • changeImageTransform: Hedef resimlerin boyutu ve ölçeğindeki değişiklikleri canlandırır.

Uygulamanızda etkinlik geçişlerini etkinleştirdiğinizde, giriş ve çıkış etkinlikleri arasındaki varsayılan çapraz geçişli geçiş etkinleşir.

2. Şekil. Paylaşılan tek bir öğeye sahip 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 amacıyla aşağıdaki özelliklerden herhangi biri için API'leri çağırmadan önce çalışma zamanında version sistemini kontrol edin:

Kotlin

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

Java

// 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, Materyal temasından devralan bir stil tanımlarken android:windowActivityTransitions özelliğiyle pencere içeriği geçişlerini etkinleştirin. Stil tanımınızda girme, çı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 örnekte change_image_transform geçişi aşağıdaki ş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 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:

Kotlin

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

Java

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

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

Bir geçişten tam olarak yararlanmak için hem arama hem de çağrılan etkinliklerde pencere içeriği geçişlerini etkinleştirmeniz gerekir. Aksi takdirde, çağrı etkinliği çıkış geçişini başlatır ancak ardından ölçeklendirme veya şeffaflaşma gibi pencere geçişlerini görürsünüz.

Giriş geçişini en kısa sürede başlatmak için çağrılan etkinlikte Window.setAllowEnterTransitionOverlap() işlevini kullanın. Bu sayede daha dramatik giriş geçişlerine sahip olabilirsiniz.

Geçişleri kullanarak etkinlik başlatma

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

Kotlin

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

Java

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

İkinci etkinlik için bir giriş geçişi ayarlarsanız bu geçiş etkinlik başladığında da etkinleştirilir. Başka bir etkinlik başlattığınızda geçişleri devre dışı bırakmak için bir null seçenekleri paketi sağlayın.

Paylaşılan öğeyle etkinlik başlatma

Paylaşılan öğeye sahip iki etkinlik arasında ekran geçişi animasyonu yapmak için aşağıdakileri yapın:

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

Kotlin

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

Java

// 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 bitirdiğinizde sahne geçişi animasyonunu tersine çevirmek için Activity.finish() yerine Activity.finishAfterTransition() işlevini çağırın.

Birden çok paylaşılan öğeyle etkinlik başlatma

Birden fazla paylaşılan öğeye sahip iki etkinlik arasında sahne geçişi animasyonu yapmak için, paylaşılan öğ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 ActivityOptions nesnesini aşağıdaki gibi oluşturun:

Kotlin

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

Java

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