Animasyonları özelleştir

Animasyon API'lerinin çoğu, genellikle ekran görüntülerini özelleştirmek için parametreleri kabul eder. gösterir.

Animasyonları AnimationSpec parametresiyle özelleştirme

Animasyon API'lerinin çoğu, geliştiricilerin animasyon özelliklerini belirli bir isteğe bağlı AnimationSpec parametresidir.

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ı türde anahtar kelimeler oluşturmak için farklı AnimationSpec animasyon ekler.

spring ile fiziğe dayalı animasyon oluşturun

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

dampingRatio, ilkbaharı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 doğru ne kadar hızlı hareket etmesi gerektiğini tanımlar. İlgili içeriği oluşturmak için kullanılan Spring.StiffnessMedium varsayılan değerdir.

Şekil 2. Farklı yay sertliğini ayarlama

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

spring, kesintileri süreye göre daha sorunsuz bir şekilde yönetebilir AnimationSpec türleridir çünkü bu, aynı zamanda hızın sürekliliğini hedef değer değişikliklerinin gösterilmesini sağlayın. Varsayılan olarak spring kullanılır animate*AsState ve gibi birçok animasyon API'si tarafından AnimationSpec updateTransition.

Ö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, belirtilen değer üzerinde başlangıç ve bitiş değerleri arasında animasyon kullanıyor Yumuşak geçiş eğrisi kullanarak durationMillis. 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, farklı konumlarda belirtilen anlık görüntü değerlerine göre animasyon gösterir zaman damgalarını temsil eder. Herhangi bir zamanda, animasyon değeri, iki animasyon karesi değeri arasında ara değer olarak ayarlanır. Bunların her biri için animasyon karelerinde bulunuyorsa yumuşak geçiş, interpolasyon eğrisini belirlemek için belirtilebilir.

Değerlerin 0 ms.de ve süre zamanında belirtilmesi isteğe bağlıdır. CANNOT TRANSLATE bu değerleri belirtmezler, varsayılan olarak animasyon karelerini tıklayın.

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, süreye dayalı bir animasyon (tween veya keyframes gibi) çalıştırır sayısı belirtilen yineleme sayısına ulaşana kadar artmaya devam eder. Hedeflerinize ulaşmadan önce Animasyonun şu tarihe kadar tekrarlanıp tekrarlanmayacağını belirten repeatMode parametresi baştan (RepeatMode.Restart) veya sondan başlayarak (RepeatMode.Reverse).

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 tekrarlanır iterasyonlar ile yürütüldüğü anlamına gelir.

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

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

snap ile değeri hemen sonlandırın

snap, değeri hemenAnimationSpec bitiş değeri. Başlangıcını geciktirmek için delayMillis belirtebilirsiniz animasyon ekler.

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) kullanımı Animasyonun kesirini ayarlamak için Easing tuşuna basın. Bu, animasyon değerinin sabit hızda hareket etmek yerine hızlandırıp yavaşlayın. Kesir, 0 (başlangıç) ve 1,0 (bitiş) arasındaki bir değer, animasyon ekler.

Yumuşatma, aslında 0 ile 1,0 arasında bir kesir değeri alan ve kayan nokta döndürür. Döndürülen değer, değeri temsil eden sınırın dışında olabilir atlatmak 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. Daha fazla bilgi için Hız - Materyal Tasarım bölümüne bakın senaryonuza bağlı olarak hangi Yumuşak Geçişin kullanılacağı ile ilgili bilgiler.

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

ziyaret edin.

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

Compose animasyon API'lerinin çoğu Float, Color, Dp ve diğer temel verileri destekler animasyon değerleri olarak kullanabilirsiniz, ancak bazen dahil olmak üzere diğer veri türlerini de görebilirsiniz. Animasyon sırasında, değeri AnimationVector olarak gösterilir. Değer, AnimationVector ve TwoWayConverter bunları eşit şekilde işleyebilir. Örneğin, Int Tek bir kayan değere sahip AnimationVector1D olarak gösterilir. Int için TwoWayConverter şuna benzer:

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

Color, temelde kırmızı, yeşil, mavi ve alfa olmak üzere 4 değerden oluşan bir kümedir. Color, 4 kayan noktalı değer içeren bir AnimationVector4D değerine dönüştürülür. İçinde bu şekilde, animasyonlarda kullanılan her veri türü AnimationVector1D, AnimationVector2D, AnimationVector3D veya AnimationVector4D boyuta bağlıdır. Bu sayede farklı canlandırılacak nesnenin bileşenlerinin her biri kendine özgü hız takibidir. Temel veri türleri için yerleşik dönüştürücülere erişilebilir Color.VectorConverter veya Dp.VectorConverter gibi dönüştürücüler kullanarak.

Animasyon değeri olarak yeni bir veri türü için destek eklemek istediğinizde kendi TwoWayConverter öğenizi oluşturun ve API'ye sağlayın. Örneğin, özel veri türünüzü aşağıdaki gibi canlandırmak için animateValueAsState öğesini 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:

• Color.VectorConverter
• Dp.VectorConverter
• Offset.VectorConverter
• Int.VectorConverter
• Float.VectorConverter
• IntSize.VectorConverter

ziyaret edin.

Sizin için önerilenler

• Not: JavaScript kapalıyken bağlantı metni gösterilir
• Değere dayalı animasyonlar
• Yinelemeli kod geliştirme {:#iterative-code-dev }
• Compose'da animasyonlar

ziyaret edin.