Animasyonları özelleştir

Animasyon API'lerinin çoğu, davranışlarını özelleştirmek için genellikle parametreleri kabul eder.

Animasyonları AnimationSpec parametresiyle özelleştirme

Animasyon API'lerinin çoğu, geliştiricilerin animasyon spesifikasyonlarını isteğe bağlı bir AnimationSpec parametresiyle özelleştirmelerine olanak tanır.

val alpha: Float by animateFloatAsState(
    targetValue = if (enabled) 1f else 0.5f,
    // Configure the animation duration and easing.
    animationSpec = tween(durationMillis = 300, easing = FastOutSlowInEasing)
)
AnimationSnippets.kt

Farklı animasyon türleri oluşturmak için farklı AnimationSpec türleri vardır.

spring ile fiziğe dayalı animasyon oluşturun

spring, başlangıç ve bitiş değerleri arasında fiziğe dayalı bir animasyon oluşturur. 2 parametre alır: dampingRatio ve stiffness.

dampingRatio, ilkbaharın ne kadar esnek olması gerektiğini tanımlar. Varsayılan değer Spring.DampingRatioNoBouncy değeridir.

Şekil 1. Farklı yay sönümleme oranları ayarlama.

stiffness, yayın bitiş değerine doğru ne kadar hızlı hareket etmesi gerektiğini tanımlar. Varsayılan değer Spring.StiffnessMedium değeridir.

Şekil 2. Farklı yay sertliğini ayarlama

val value by animateFloatAsState(
    targetValue = 1f,
    animationSpec = spring(
        dampingRatio = Spring.DampingRatioHighBouncy,
        stiffness = Spring.StiffnessMedium
    )
)
AnimationSnippets.kt

spring, animasyonlar arasında hedef değer değiştiğinde hızın devamlılığını garanti ettiği için süreye dayalı AnimationSpec türlerine kıyasla kesintileri daha sorunsuz bir şekilde işleyebilir. spring, animate*AsState ve updateTransition gibi birçok animasyon API'si tarafından varsayılanAnimationSpec olarak kullanılır.

Örneğin, kullanıcı dokunmasıyla tetiklenen aşağıdaki animasyona bir spring yapılandırması uygularsak, ilerlemesi sırasında animasyonu kesintiye uğrattığımızda tween kullanımının spring kullanımı kadar sorunsuz yanıt vermediğini görebilirsiniz.

Şekil 3. Animasyon için tween ve spring özelliklerini ayarlamak ve işlemi kesintiye uğratmak.

Başlangıç ve bitiş değerleri arasında tween ile yumuşak geçiş eğrisiyle animasyon uygulayın

tween, bir yumuşak geçiş eğrisi kullanarak belirtilen durationMillis üzerinde başlangıç ve bitiş değerleri arasında animasyon oluşturur. tween, iki değer arasında olduğundan, arasındaki kelimenin kısaltmasıdır.

Animasyonun başlangıcını ertelemek için delayMillis öğesini de belirtebilirsiniz.

val value by animateFloatAsState(
    targetValue = 1f,
    animationSpec = tween(
        durationMillis = 300,
        delayMillis = 50,
        easing = LinearOutSlowInEasing
    )
)
AnimationSnippets.kt

Daha fazla bilgi için Yumuşak Geçiş konusuna bakın.

keyframes ile belirli zamanlamalarda belirli değerlere animasyon uygulayın

keyframes, animasyon süresi boyunca farklı zaman damgalarında belirtilen anlık görüntü değerlerine göre animasyon gösterir. Herhangi bir zamanda, animasyon değeri iki animasyon karesi değeri arasında hesaplanır. Bu animasyon karelerinin her biri için interpolasyon eğrisini belirlemek amacıyla yumuşak geçiş belirtilebilir.

Değerlerin 0 ms.de ve süre zamanında belirtilmesi isteğe bağlıdır. Bu değerleri belirtmezseniz varsayılan olarak animasyonun başlangıç ve bitiş değerleri kullanılır.

val value by animateFloatAsState(
    targetValue = 1f,
    animationSpec = keyframes {
        durationMillis = 375
        0.0f at 0 with LinearOutSlowInEasing // for 0-15 ms
        0.2f at 15 with FastOutLinearInEasing // for 15-75 ms
        0.4f at 75 // ms
        0.4f at 225 // ms
    }
)
AnimationSnippets.kt

Animasyonu repeatable ile tekrarla

repeatable, belirtilen yineleme sayısına ulaşana kadar süreye dayalı bir animasyon (tween veya keyframes gibi) tekrar çalıştırır. Animasyonun baştan (RepeatMode.Restart) mı yoksa sonundan mı (RepeatMode.Reverse) başlayarak tekrarlanacağını belirtmek için repeatMode parametresini iletebilirsiniz.

val value by animateFloatAsState(
    targetValue = 1f,
    animationSpec = repeatable(
        iterations = 3,
        animation = tween(durationMillis = 300),
        repeatMode = RepeatMode.Reverse
    )
)
AnimationSnippets.kt

Animasyonu infiniteRepeatable ile süresiz olarak tekrarla

infiniteRepeatable, repeatable gibidir ancak sonsuz sayıda yineleme için tekrar eder.

val value by animateFloatAsState(
    targetValue = 1f,
    animationSpec = infiniteRepeatable(
        animation = tween(durationMillis = 300),
        repeatMode = RepeatMode.Reverse
    )
)
AnimationSnippets.kt

ComposeTestRule kullanan testlerde, infiniteRepeatable kullanan animasyonlar çalıştırılmaz. Bileşen, her animasyonlu değerin başlangıç değeri kullanılarak oluşturulur.

snap ile değeri hemen sonlandırın

snap, değeri hemen bitiş değerine geçiren özel bir AnimationSpec öğesidir. Animasyonun başlamasını geciktirmek için delayMillis değerini belirtebilirsiniz.

val value by animateFloatAsState(
    targetValue = 1f,
    animationSpec = snap(delayMillis = 50)
)
AnimationSnippets.kt

Özel yumuşatma işlevi ayarlama

Süreye dayalı AnimationSpec işlemleri (tween veya keyframes gibi), animasyonun oranını ayarlamak için Easing değerini kullanır. Bu, animasyon değerinin sabit bir hızda hareket etmek yerine hızlanıp yavaşlamasına olanak tanır. Kesir, animasyondaki geçerli noktayı gösteren 0 (başlangıç) ile 1,0 (bitiş) arasında bir değerdir.

Yumuşak geçiş, aslında 0 ile 1,0 arasında bir kesir değeri alan ve hareketli değer döndüren bir işlevdir. Döndürülen değer, aşırı veya az çekimi temsil edecek şekilde sınırın dışında olabilir. Aşağıdaki kod gibi özel bir Yumuşak Geçiş oluşturulabilir.

val CustomEasing = Easing { fraction -> fraction * fraction }

@Composable
fun EasingUsage() {
    val value by animateFloatAsState(
        targetValue = 1f,
        animationSpec = tween(
            durationMillis = 300,
            easing = CustomEasing
        )
    )
    // ……
}
AnimationSnippets.kt

Compose, çoğu kullanım alanını kapsayan çeşitli yerleşik Easing işlevleri sağlar. Senaryonuza bağlı olarak hangi Yumuşak Geçişin kullanılacağı hakkında daha fazla bilgi için Hız - Materyal Tasarım bölümüne bakın.

  • FastOutSlowInEasing
  • LinearOutSlowInEasing
  • FastOutLinearEasing
  • LinearEasing
  • CubicBezierEasing
  • Diğerlerini göster

AnimationVector ile dönüşüm gerçekleştirerek özel veri türlerini canlandırın

Çoğu Compose animasyon API'si animasyon değeri olarak Float, Color, Dp ve diğer temel veri türlerini destekler. Ancak bazen özel verileriniz de dahil olmak üzere diğer veri türlerini canlandırmanız gerekir. Animasyon sırasında, animasyon değerleri AnimationVector olarak gösterilir. Temel animasyon sisteminin bunları eşit şekilde işleyebilmesi için değer, karşılık gelen TwoWayConverter ile AnimationVector biçimine dönüştürülür. Örneğin Int, tek bir kayan noktalı değere sahip bir AnimationVector1D olarak temsil edilir. Int için TwoWayConverter şuna benzer:

val IntToVector: TwoWayConverter<Int, AnimationVector1D> =
    TwoWayConverter({ AnimationVector1D(it.toFloat()) }, { it.value.toInt() })
AnimationSnippets.kt

Color esasen kırmızı, yeşil, mavi ve alfa olmak üzere 4 değerden oluşan bir gruptur. Bu nedenle Color, 4 kayan noktalı değer içeren bir AnimationVector4D değerine dönüştürülür. Bu şekilde, animasyonlarda kullanılan her veri türü, boyutlarına bağlı olarak AnimationVector1D, AnimationVector2D, AnimationVector3D veya AnimationVector4D biçimine dönüştürülür. Bu, nesnenin farklı bileşenlerinin, her birinin kendi hız izlemesine sahip bağımsız animasyonlar yapmasına olanak tanır. Temel veri türleri için yerleşik dönüştürücülere, Color.VectorConverter veya Dp.VectorConverter gibi dönüştürücüler kullanılarak erişilebilir.

Animasyon değeri olarak yeni bir veri türü için destek eklemek istediğinizde kendi TwoWayConverter öğenizi oluşturup API'ye sağlayabilirsiniz. Örneğin, özel veri türünüzü aşağıdaki gibi canlandırmak için animateValueAsState kullanabilirsiniz:

data class MySize(val width: Dp, val height: Dp)

@Composable
fun MyAnimation(targetSize: MySize) {
    val animSize: MySize by animateValueAsState(
        targetSize,
        TwoWayConverter(
            convertToVector = { size: MySize ->
                // Extract a float value from each of the `Dp` fields.
                AnimationVector2D(size.width.value, size.height.value)
            },
            convertFromVector = { vector: AnimationVector2D ->
                MySize(vector.v1.dp, vector.v2.dp)
            }
        )
    )
}
AnimationSnippets.kt

Aşağıdaki listede bazı yerleşik VectorConverter öğeleri bulunmaktadır:

Önceki
Animasyonlu vektör resimler
Sonraki
Animasyonları test etme