E-posta yazma özelliği, animasyonla ilgili yaygın kullanım alanlarının yönetilmesi için yerleşik composable'lar ve değiştiriciler içerir.
Yerleşik animasyonlu composable'lar
AnimatedVisibility ile görünümü ve ortadan kayboluşunu canlandırın
AnimatedVisibility composable, içeriğinin görünümünü ve kaybolmasını canlandırır.
var visible by remember {
mutableStateOf(true)
}
// Animated visibility will eventually remove the item from the composition once the animation has finished.
AnimatedVisibility(visible) {
// your composable here
// ...
}
İçerik varsayılan olarak şeffaflaşarak ve genişleyerek görünür, solarak ve küçülerek kaybolur. Geçiş, EnterTransition ve ExitTransition belirtilerek özelleştirilebilir.
var visible by remember { mutableStateOf(true) }
val density = LocalDensity.current
AnimatedVisibility(
visible = visible,
enter = slideInVertically {
// Slide in from 40 dp from the top.
with(density) { -40.dp.roundToPx() }
} + expandVertically(
// Expand from the top.
expandFrom = Alignment.Top
) + fadeIn(
// Fade in with the initial alpha of 0.3f.
initialAlpha = 0.3f
),
exit = slideOutVertically() + shrinkVertically() + fadeOut()
) {
Text("Hello", Modifier.fillMaxWidth().height(200.dp))
}
Yukarıdaki örnekte görebileceğiniz gibi, birden fazla EnterTransition veya ExitTransition nesnesini bir + operatörüyle birleştirebilirsiniz ve her biri, davranışını özelleştirmek için isteğe bağlı parametreleri kabul eder. Daha fazla bilgi için referanslara göz atın.
EnterTransition ve ExitTransition örnekleri
AnimatedVisibility, MutableTransitionState alan bir varyant da sunuyor. Böylece, AnimatedVisibility öğesi bileşim ağacına eklenir eklenmez bir animasyonu tetikleyebilirsiniz. Animasyon durumunu gözlemlemek için de faydalıdır.
// Create a MutableTransitionState<Boolean> for the AnimatedVisibility.
val state = remember {
MutableTransitionState(false).apply {
// Start the animation immediately.
targetState = true
}
}
Column {
AnimatedVisibility(visibleState = state) {
Text(text = "Hello, world!")
}
// Use the MutableTransitionState to know the current animation state
// of the AnimatedVisibility.
Text(
text = when {
state.isIdle && state.currentState -> "Visible"
!state.isIdle && state.currentState -> "Disappearing"
state.isIdle && !state.currentState -> "Invisible"
else -> "Appearing"
}
)
}
Çocukların giriş ve çıkışını canlandırma
AnimatedVisibility kapsamındaki içerik (doğrudan veya dolaylı alt öğeler), animateEnterExit değiştiricisini kullanarak her biri için farklı animasyon davranışları belirtebilir. Bu alt öğelerin her biri için görsel efekt, AnimatedVisibility composable'ında belirtilen animasyonlar ile alt çocuğun kendi giriş/çıkış animasyonlarının kombinasyonudur.
var visible by remember { mutableStateOf(true) }
AnimatedVisibility(
visible = visible,
enter = fadeIn(),
exit = fadeOut()
) {
// Fade in/out the background and the foreground.
Box(Modifier.fillMaxSize().background(Color.DarkGray)) {
Box(
Modifier
.align(Alignment.Center)
.animateEnterExit(
// Slide in/out the inner box.
enter = slideInVertically(),
exit = slideOutVertically()
)
.sizeIn(minWidth = 256.dp, minHeight = 64.dp)
.background(Color.Red)
) {
// Content of the notification…
}
}
}
Bazı durumlarda, çocukların animateEnterExit tarihine kadar her birinin kendi farklı animasyonlarını
olabilmesi için AnimatedVisibility animasyon
uygulamamasını isteyebilirsiniz. Bunun için AnimatedVisibility composable'da EnterTransition.None ve ExitTransition.None öğelerini belirtin.
Özel animasyon ekle
Yerleşik giriş ve çıkış animasyonlarının ötesine özel animasyon efektleri eklemek istiyorsanız AnimatedVisibility için içerik lambdasının içindeki transition özelliği aracılığıyla temel Transition örneğine erişin. Geçiş örneğine eklenen tüm animasyon durumları, AnimatedVisibility öğesinin giriş ve çıkış animasyonlarıyla eş zamanlı olarak çalışır. AnimatedVisibility, içeriğini kaldırmadan önce Transition içindeki tüm animasyonların tamamlanmasını bekler.
Transition bağımsız olarak oluşturulan (animate*AsState kullanılarak gibi) çıkış animasyonları için AnimatedVisibility bunları dikkate alamaz ve bu nedenle tamamlanmadan önce composable içeriğini kaldırabilir.
var visible by remember { mutableStateOf(true) }
AnimatedVisibility(
visible = visible,
enter = fadeIn(),
exit = fadeOut()
) { // this: AnimatedVisibilityScope
// Use AnimatedVisibilityScope#transition to add a custom animation
// to the AnimatedVisibility.
val background by transition.animateColor(label = "color") { state ->
if (state == EnterExitState.Visible) Color.Blue else Color.Gray
}
Box(modifier = Modifier.size(128.dp).background(background))
}
Transition ile ilgili ayrıntılar için updateTransition bölümüne bakın.
AnimatedContent ile hedef duruma göre animasyon
AnimatedContent composable, hedef duruma göre değişiklik gösterirken içeriğini canlandırır.
Row {
var count by remember { mutableStateOf(0) }
Button(onClick = { count++ }) {
Text("Add")
}
AnimatedContent(targetState = count) { targetCount ->
// Make sure to use `targetCount`, not `count`.
Text(text = "Count: $targetCount")
}
}
Her zaman lambda parametresini kullanmanız ve içeriğe yansıtmanız gerektiğini unutmayın. API bu değeri, gösterilmekte olan içeriği tanımlamak için anahtar olarak kullanır.
Varsayılan olarak, ilk içerik şeffaflaştırılır, ardından hedef içerik belirir (bu davranışa şeffaflaşma adı verilir). transitionSpec parametresine bir ContentTransform nesnesi belirterek bu animasyon davranışını özelleştirebilirsiniz. with infix işlevini kullanarak, EnterTransition ile ExitTransition değerlerini birleştirerek ContentTransform oluşturabilirsiniz. SizeTransform özelliğini using infix işlevine ekleyerek ContentTransform öğesine uygulayabilirsiniz.
AnimatedContent(
targetState = count,
transitionSpec = {
// Compare the incoming number with the previous number.
if (targetState > initialState) {
// If the target number is larger, it slides up and fades in
// while the initial (smaller) number slides up and fades out.
slideInVertically { height -> height } + fadeIn() with
slideOutVertically { height -> -height } + fadeOut()
} else {
// If the target number is smaller, it slides down and fades in
// while the initial number slides down and fades out.
slideInVertically { height -> -height } + fadeIn() with
slideOutVertically { height -> height } + fadeOut()
}.using(
// Disable clipping since the faded slide-in/out should
// be displayed out of bounds.
SizeTransform(clip = false)
)
}
) { targetCount ->
Text(text = "$targetCount")
}
EnterTransition hedef içeriğin nasıl görünmesi gerektiğini, ExitTransition ise ilk içeriğin nasıl görünmesi gerektiğini tanımlar. AnimatedVisibility için kullanılabilen tüm EnterTransition ve ExitTransition işlevlerine ek olarak AnimatedContent, slideIntoContainer ve slideOutOfContainer özelliklerini de sunar.
Bunlar, slayt mesafesini başlangıç içeriğinin boyutlarına ve AnimatedContent içeriğinin hedef içeriğine göre hesaplayan slideInHorizontally/Vertically ve slideOutHorizontally/Vertically için kullanışlı alternatiflerdir.
SizeTransform, boyutun başlangıç içeriği ve hedef içerikler arasında nasıl animasyonunun gerektiğini tanımlar. Animasyonu oluştururken hem başlangıç boyutuna hem de hedef boyuta erişebilirsiniz. SizeTransform, içeriğin animasyonlar sırasında bileşen boyutuna göre kırpılıp kırpılmayacağını da kontrol eder.
var expanded by remember { mutableStateOf(false) }
Surface(
color = MaterialTheme.colorScheme.primary,
onClick = { expanded = !expanded }
) {
AnimatedContent(
targetState = expanded,
transitionSpec = {
fadeIn(animationSpec = tween(150, 150)) with
fadeOut(animationSpec = tween(150)) using
SizeTransform { initialSize, targetSize ->
if (targetState) {
keyframes {
// Expand horizontally first.
IntSize(targetSize.width, initialSize.height) at 150
durationMillis = 300
}
} else {
keyframes {
// Shrink vertically first.
IntSize(initialSize.width, targetSize.height) at 150
durationMillis = 300
}
}
}
}
) { targetExpanded ->
if (targetExpanded) {
Expanded()
} else {
ContentIcon()
}
}
}
Alt giriş ve çıkış geçişlerini canlandır
AnimatedVisibility öğesinde olduğu gibi animateEnterExit değiştiricisi de AnimatedContent içeriğinin lambdasının içinde bulunur. Doğrudan veya dolaylı alt öğelerin her birine ayrı ayrı EnterAnimation ve ExitAnimation uygulamak için bunu kullanın.
Özel animasyon ekle
AnimatedVisibility alanında olduğu gibi, transition alanı da AnimatedContent içerik lambdasının içinde bulunur. AnimatedContent geçişiyle eş zamanlı olarak çalışan özel bir animasyon efekti oluşturmak için bunu kullanın. Ayrıntılar için updateTransition bölümüne bakın.
Crossfade ile iki düzen arasında animasyon uygulayın
Crossfade, çapraz geçiş animasyonu ile iki düzen arasında animasyon yapar. current parametresine geçirilen değer değiştirildiğinde içerik, çapraz geçiş animasyonuyla değiştirilir.
var currentPage by remember { mutableStateOf("A") }
Crossfade(targetState = currentPage) { screen ->
when (screen) {
"A" -> Text("Page A")
"B" -> Text("Page B")
}
}
Yerleşik animasyon değiştiricileri
animateContentSize ile composable boyut değişikliklerine animasyon ekleme
animateContentSize değiştiricisi, boyut değişikliğini canlandırır.
var expanded by remember { mutableStateOf(false) }
Box(
modifier = Modifier
.background(colorBlue)
.animateContentSize()
.height(if (expanded) 400.dp else 200.dp)
.fillMaxWidth()
.clickable(
interactionSource = remember { MutableInteractionSource() },
indication = null
) {
expanded = !expanded
}
) {
}
Liste öğesi animasyonları
Bir geç liste veya ızgarada öğelerin yeniden sıralanmasına animasyon eklemek istiyorsanız Geç düzen öğesi animasyonu dokümanlarına göz atın.
Sizin için önerilenler
- Not: Bağlantı metni JavaScript kapalıyken görüntülenir
- Değere dayalı animasyonlar
- Oluşturma bölümünde animasyonlar
- Animasyon araçları desteği {:#tooling}