Özel geçiş animasyonu oluşturma

Compose yöntemini deneyin

Jetpack Compose, Android için önerilen kullanıcı arayüzü araç setidir. Compose'da nasıl animasyon ekleyeceğinizi öğrenin.

Compose'da geçişle birden fazla özellik ekleme →

Özel geçiş, yerleşik geçiş sınıflarında bulunmayan bir animasyon oluşturmanıza olanak tanır. Örneğin, yeni ekranda alanların devre dışı olduğunu belirtmek için metin ve giriş alanlarının ön plan rengini griye çeviren özel bir geçiş tanımlayabilirsiniz. Bu tür değişiklikler, kullanıcıların devre dışı bıraktığınız alanları görmesine yardımcı olur.

Yerleşik geçiş türlerinden biri gibi özel bir geçiş, hem başlangıç hem de bitiş sahnelerinin alt görünümlerine animasyonlar uygular. Ancak yerleşik geçiş türlerinin aksine, özellik değerlerini yakalayan ve animasyonlar oluşturan kodu sağlamanız gerekir. Animasyonunuz için hedef görünümlerin bir alt kümesini de tanımlayabilirsiniz.

Bu sayfada, özel geçişler oluşturmak için özellik değerlerini yakalama ve animasyon oluşturma hakkında bilgi verilmektedir.

Transition sınıfını genişletme

Özel bir geçiş oluşturmak için projenize Transition sınıfını genişleten bir sınıf ekleyin ve aşağıdaki snippet'te gösterilen işlevleri geçersiz kılın:

class CustomTransition : Transition() {

    override fun captureStartValues(transitionValues: TransitionValues) {}

    override fun captureEndValues(transitionValues: TransitionValues) {}

    override fun createAnimator(
        sceneRoot: ViewGroup,
        startValues: TransitionValues?,
        endValues: TransitionValues?
    ): Animator? {}

}

public class CustomTransition extends Transition {

    @Override
    public void captureStartValues(TransitionValues values) {}

    @Override
    public void captureEndValues(TransitionValues values) {}

    @Override
    public Animator createAnimator(ViewGroup sceneRoot,
                                   TransitionValues startValues,
                                   TransitionValues endValues) {}
}

Aşağıdaki bölümlerde bu işlevlerin nasıl geçersiz kılınacağı açıklanmaktadır.

Görünüm özelliği değerlerini yakalama

Geçiş animasyonları, Mülk animasyonuna genel bakış bölümünde açıklanan mülk animasyonu sistemini kullanır. Özellik animasyonları, bir görünüm özelliğini belirli bir süre boyunca başlangıç değerinden bitiş değerine değiştirir. Bu nedenle, animasyonu oluşturmak için çerçevenin özelliğin hem başlangıç hem de bitiş değerine sahip olması gerekir.

Ancak bir özellik animasyonu genellikle görünümün tüm özellik değerlerinin yalnızca küçük bir alt kümesini gerektirir. Örneğin, renk animasyonu için renk özelliği değerleri, hareket animasyonu için ise konum özelliği değerleri gerekir. Animasyon için gereken özellik değerleri geçişe özgü olduğundan geçişler çerçevesi, geçişe her özellik değerini sağlamaz. Bunun yerine, çerçeve yalnızca ihtiyaç duyduğu mülk değerlerini yakalamaya ve bunları çerçevede depolamaya olanak tanıyan geri çağırma işlevlerini çağırır.

Başlangıç değerlerini yakalama

Başlangıç görünümü değerlerini çerçeveye iletmek için captureStartValues(transitionValues) işlevini uygulayın. Çerçeve, başlangıç sahnesindeki her görünüm için bu işlevi çağırır. İşlev bağımsız değişkeni, görünüme referans içeren bir TransitionValues nesnesi ve istediğiniz görünüm değerlerini depolayabileceğiniz bir Map örneğidir. Uygulamanızda bu özellik değerlerini alın ve haritada depolayarak çerçeveye geri iletin.

Bir özellik değerinin anahtarının diğer TransitionValues anahtarlarıyla çakışmadığından emin olmak için aşağıdaki adlandırma şemasını kullanın:

package_name:transition_name:property_name

Aşağıdaki snippet'te captureStartValues() işlevinin uygulanması gösterilmektedir:

class CustomTransition : Transition() {

    // Define a key for storing a property value in
    // TransitionValues.values with the syntax
    // package_name:transition_class:property_name to avoid collisions
    private val PROPNAME_BACKGROUND = "com.example.android.customtransition:CustomTransition:background"

    override fun captureStartValues(transitionValues: TransitionValues) {
        // Call the convenience method captureValues
        captureValues(transitionValues)
    }

    // For the view in transitionValues.view, get the values you
    // want and put them in transitionValues.values
    private fun captureValues(transitionValues: TransitionValues) {
        // Get a reference to the view
        val view = transitionValues.view
        // Store its background property in the values map
        transitionValues.values[PROPNAME_BACKGROUND] = view.background
    }

    ...

}

public class CustomTransition extends Transition {

    // Define a key for storing a property value in
    // TransitionValues.values with the syntax
    // package_name:transition_class:property_name to avoid collisions
    private static final String PROPNAME_BACKGROUND =
            "com.example.android.customtransition:CustomTransition:background";

    @Override
    public void captureStartValues(TransitionValues transitionValues) {
        // Call the convenience method captureValues
        captureValues(transitionValues);
    }


    // For the view in transitionValues.view, get the values you
    // want and put them in transitionValues.values
    private void captureValues(TransitionValues transitionValues) {
        // Get a reference to the view
        View view = transitionValues.view;
        // Store its background property in the values map
        transitionValues.values.put(PROPNAME_BACKGROUND, view.getBackground());
    }
    ...
}

Bitiş değerlerini yakalama

Çerçeve, bitiş sahnesindeki her hedef görünüm için captureEndValues(TransitionValues) işlevini bir kez çağırır. Diğer tüm açılardan captureEndValues(), captureStartValues() ile aynı şekilde çalışır.

Aşağıdaki kod snippet'inde captureEndValues() işlevinin uygulanması gösterilmektedir:

override fun captureEndValues(transitionValues: TransitionValues) {
    captureValues(transitionValues)
}

@Override
public void captureEndValues(TransitionValues transitionValues) {
    captureValues(transitionValues);
}

Bu örnekte, hem captureStartValues() hem de captureEndValues() işlevleri, değerleri almak ve depolamak için captureValues() işlevini çağırır. captureValues() ile alınan görünüm özelliği aynıdır ancak başlangıç ve bitiş sahnelerinde farklı değerlere sahiptir. Çerçeve, bir görünümün başlangıç ve bitiş durumları için ayrı haritalar tutar.

Özel animasyon oluşturma

Bir görünümdeki değişiklikleri başlangıç sahnesindeki durumu ile bitiş sahnesindeki durumu arasında canlandırmak için createAnimator() işlevini geçersiz kılarak bir animatör sağlayın. Çerçeve bu işlevi çağırdığında sahne kök görünümünü ve yakaladığınız başlangıç ve bitiş değerlerini içeren TransitionValues nesnelerini iletir.

Çerçevenin createAnimator() işlevini çağırma sayısı, başlangıç ve bitiş sahneleri arasında meydana gelen değişikliklere bağlıdır.

Örneğin, özel geçiş olarak uygulanan bir karartma veya açılma animasyonunu ele alalım. Başlangıç sahnesinde beş hedef varsa, bitiş sahnesinde bu hedeflerden ikisi kaldırılmışsa ve bitiş sahnesinde başlangıç sahnesindeki üç hedef ile yeni bir hedef varsa çerçeve createAnimator() işlevini altı kez çağırır. Üç çağrı, her iki sahne nesnesinde kalan hedeflerin yavaşça gözden kaybolmasını ve yavaşça görünmesini sağlar. İki çağrı daha, son sahneden kaldırılan hedeflerin silinme animasyonunu yapar. One call, bitiş sahnesinde yeni hedefin görünmesini animasyonla sağlar.

Hem başlangıç hem de bitiş sahnelerinde bulunan hedef görünümler için çerçeve, hem startValues hem de endValues bağımsız değişkenleri için bir TransitionValues nesnesi sağlar. Yalnızca başlangıç veya bitiş sahnesinde bulunan hedef görünümler için çerçeve, ilgili bağımsız değişken için bir TransitionValues nesnesi, diğeri için ise null sağlar.

Özel bir geçiş oluştururken createAnimator(ViewGroup, TransitionValues, TransitionValues) işlevini uygulamak için, Animator nesnesi oluşturmak ve bunu çerçeveye döndürmek üzere yakaladığınız görünüm özelliği değerlerini kullanın. Örnek uygulama için CustomTransition örneğindeki ChangeColor sınıfına bakın. Özellik animatörleri hakkında daha fazla bilgi için Özellik animasyonu başlıklı makaleyi inceleyin.

Özel geçiş uygulama

Özel geçişler, yerleşik geçişlerle aynı şekilde çalışır. Geçiş uygulama başlıklı makalede açıklandığı gibi, geçiş yöneticisini kullanarak özel bir geçiş uygulayabilirsiniz.