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) )
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 ) )
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 ) )
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 } )
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 ) )
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 ) )
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) )
Ö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 ) ) // …… }
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() })
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) } ) ) }
Aşağıdaki listede bazı yerleşik VectorConverter
öğeleri bulunmaktadır:
Color.VectorConverter
Dp.VectorConverter
Offset.VectorConverter
Int.VectorConverter
Float.VectorConverter
IntSize.VectorConverter
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