Animasyonları özelleştir

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

AnimationSpec parametresiyle animasyonları özelleştirme

Çoğu animasyon API'si, geliştiricilerin isteğe bağlı bir AnimationSpec parametresiyle animasyon özelliklerini özelleştirmesine 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),
    label = "alpha"
)

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

spring ile fizik kurallarına dayalı animasyon oluşturma

spring, başlangıç ve bitiş değerleri arasında fizik tabanlı bir animasyon oluşturur. İki parametre alır: dampingRatio ve stiffness.

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

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

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

Şekil 2. Farklı yay sertliği ayarlama.

val value by animateFloatAsState(
    targetValue = 1f,
    animationSpec = spring(
        dampingRatio = Spring.DampingRatioHighBouncy,
        stiffness = Spring.StiffnessMedium
    ),
    label = "spring spec"
)

spring, animasyonlar sırasında hedef değer değiştiğinde hızın sürekliliğini garanti ettiği için kesintileri süreye dayalı AnimationSpec türlerine göre daha sorunsuz bir şekilde yönetebilir. spring, animate*AsState ve updateTransition gibi birçok animasyon API'si tarafından varsayılan AnimationSpec olarak kullanılır.

Örneğin, kullanıcı dokunuşuyla yönlendirilen aşağıdaki animasyona spring yapılandırması uygularsak animasyonu devam ederken kesintiye uğrattığını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 ayarlama ve animasyonu kesintiye uğratma

tween ile yumuşatma eğrisi kullanarak başlangıç ve bitiş değerleri arasında animasyon oluşturun

tween, bir yumuşatma eğrisi kullanarak belirtilen durationMillis boyunca başlangıç ve bitiş değerleri arasında animasyon oluşturur. tween, iki değer arasında olduğu için "arasında" kelimesinin kısaltmasıdır.

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

val value by animateFloatAsState(
    targetValue = 1f,
    animationSpec = tween(
        durationMillis = 300,
        delayMillis = 50,
        easing = LinearOutSlowInEasing
    ),
    label = "tween delay"
)

Daha fazla bilgi için Yumuşak geçiş bölümüne bakın.

keyframes ile belirli zamanlarda belirli değerlere animasyon ekleme

keyframes, animasyon süresi boyunca farklı zaman damgalarında belirtilen anlık görüntü değerlerine göre animasyon oluşturur. Animasyon değeri, herhangi bir zamanda iki kare değeri arasında enterpolasyonla hesaplanır. Bu karelerin her biri için, interpolasyon eğrisini belirlemek üzere yumuşatma belirtilebilir.

0 ms ve süre değerlerini belirtmek 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 using LinearOutSlowInEasing // for 0-15 ms
        0.2f at 15 using FastOutLinearInEasing // for 15-75 ms
        0.4f at 75 // ms
        0.4f at 225 // ms
    },
    label = "keyframe"
)

keyframesWithSplines ile animasyon kareleri arasında sorunsuz animasyonlar oluşturun

Değerler arasında geçiş yaparken düzgün bir eğriyi takip eden bir animasyon oluşturmak için keyframes animasyon özellikleri yerine keyframesWithSplines kullanabilirsiniz.

val offset by animateOffsetAsState(
    targetValue = Offset(300f, 300f),
    animationSpec = keyframesWithSpline {
        durationMillis = 6000
        Offset(0f, 0f) at 0
        Offset(150f, 200f) atFraction 0.5f
        Offset(0f, 100f) atFraction 0.7f
    }
)

Spline tabanlı kareler, özellikle ekrandaki öğelerin 2D hareketi için kullanışlıdır.

Aşağıdaki videolarda, bir dairenin izlemesi gereken aynı x, y koordinatları verildiğinde keyframes ve keyframesWithSpline arasındaki farklar gösterilmektedir.

keyframes keyframesWithSplines

Gördüğünüz gibi, spline tabanlı kareler, öğeler arasında yumuşak bir animasyon oluşturmak için bezier eğrileri kullandığından noktalar arasında daha yumuşak geçişler sunar. Bu spesifikasyon, hazır animasyonlar için kullanışlıdır. Ancak kullanıcı tarafından yönlendirilen noktalarla çalışıyorsanız noktalar arasında benzer bir yumuşaklık elde etmek için yayları kullanmak daha iyidir çünkü yaylar kesintiye uğratılabilir.

repeatable ile animasyonu tekrarlama

repeatable, süreye dayalı bir animasyonu (ör. tween veya keyframes) belirtilen yineleme sayısına ulaşana kadar tekrar tekrar çalıştırır. Animasyonun baştan (RepeatMode.Restart) mı yoksa sondan (RepeatMode.Reverse) mı 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
    ),
    label = "repeatable spec"
)

infiniteRepeatable ile animasyonu sonsuz kez tekrarlama

infiniteRepeatable, repeatable gibidir ancak sonsuz sayıda tekrarlanır.

val value by animateFloatAsState(
    targetValue = 1f,
    animationSpec = infiniteRepeatable(
        animation = tween(durationMillis = 300),
        repeatMode = RepeatMode.Reverse
    ),
    label = "infinite repeatable"
)

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

snap ile hemen bitiş değerine geçme

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

val value by animateFloatAsState(
    targetValue = 1f,
    animationSpec = snap(delayMillis = 50),
    label = "snap spec"
)

Özel bir yumuşatma işlevi ayarlama

Süreye dayalı AnimationSpec işlemleri (ör. tween veya keyframes), bir animasyonun kesrini ayarlamak için Easing kullanır. Bu sayede animasyon değeri, sabit bir hızda hareket etmek yerine hızlanıp yavaşlayabilir. Kesir, animasyondaki mevcut 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 kayan sayı döndüren bir işlevdir. Döndürülen değer, aşımı veya yetersizliği temsil etmek için sınırın dışında olabilir. Aşağıdaki kodda olduğu gibi özel bir yumuşatma oluşturulabilir.

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

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

Compose, çoğu kullanım alanını kapsayan birkaç yerleşik Easing işlevi sunar. Senaryonuza bağlı olarak hangi yumuşatmanın 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
  • Daha fazla göster

Özel veri türlerini AnimationVector türüne ve türünden dönüştürerek animasyonlu hale getirme

Çoğu Compose animasyon API'si, animasyon değerleri olarak varsayılan şekilde Float, Color, Dp ve diğer temel veri türlerini destekler ancak bazen özel veri türleriniz de dahil olmak üzere diğer veri türlerini canlandırmanız gerekir. Animasyon sırasında, animasyonlu değerler AnimationVector olarak temsil edilir. Değer, temel animasyon sisteminin değerleri tek tip olarak işleyebilmesi için AnimationVector değerine ve karşılık gelen bir TwoWayConverter ile tersine dönüştürülür. Örneğin, Int, tek bir kayan değer içeren bir AnimationVector1D olarak temsil edilir. Int için TwoWayConverter şu şekilde görünür:

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

Color aslında kırmızı, yeşil, mavi ve alfa olmak üzere 4 değerden oluşan bir kümedir. Bu nedenle Color, 4 kayan değer içeren bir AnimationVector4D değerine dönüştürülür. Bu şekilde, animasyonlarda kullanılan her veri türü, boyutuna bağlı olarak AnimationVector1D, AnimationVector2D, AnimationVector3D veya AnimationVector4D değerine dönüştürülür. Bu sayede nesnenin farklı bileşenleri, her biri kendi hız takibiyle bağımsız olarak animasyonlu hale getirilebilir. 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.

Yeni bir veri türü için animasyonlu değer olarak destek eklemek istediğinizde kendi TwoWayConverter öğenizi oluşturup API'ye sağlayabilirsiniz. Örneğin, özel veri türünüzü şu şekilde 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)
            }
        ),
        label = "size"
    )
}

Aşağıdaki listede bazı yerleşik VectorConverterlar yer almaktadır:

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