Для управления анимацией при появлении и исчезновении вложенных компонентов в AnimatedVisibility применяются параметры enter и exit. Этим параметрам передается одна из функций, которые создают эффект анимации. В частности, это следующие функции:
expandHorizontally(): содержимое отображается с использованием метода горизонтального отсечения. Позволяет указать, какая часть контента изначально отображается до начала анимации.
expandVertically(): содержимое отображается с использованием техники вертикального отсечения. Позволяет указать, какая часть контента изначально отображается до начала анимации.
expandIn(): содержимое отображается с использованием методов горизонтального и вертикального отсечения. Позволяет указать, какая часть контента изначально отображается до начала анимации.
fadeIn(): постепенно делает прозрачное содержимое непрозрачным. Начальная прозрачность может быть объявлена с использованием значения с плавающей запятой от 0 до 1.0.
Значение по умолчанию - 0.
fadeOut(): постепенно делает непрозрачное содержимое прозрачным (невидимым). Целевая прозрачность перед исчезновением содержимого может быть объявлена с использованием значения с плавающей запятой от 0 до 1.0. Значение по умолчанию - 0.
scaleIn(): содержимое постепенно увеличивается. По умолчанию содержимое начинается с нулевого размера и расширяется до полного размера, хотя это значение по умолчанию можно изменить, указав начальное значение масштаба как плавающее значение от 0 до 1.0.
scaleOut(): содержимое постепенно уменьшается и в конце полностью исчезает. По умолчанию целевой масштаб равен 0, но его можно настроить с использованием плавающего значения от 0 до 1.0.
shrinkHorizontally(): компонент постепенно сживается по горизонтали, пока польностью не исчезнет.
shrinkVertically(): компонент постепенно сживается по вертикали, пока польностью не исчезнет.
shrinkOut(): ккомпонент постепенно сживается по горизонтали и вертикали, пока польностью не исчезнет.
slideInHorizontally(): содержимое перемещается в область обзора вдоль горизонтальной оси
slideInVertically(): содержимое перемещается в область обзора вдоль вертикальной оси.
slideIn(): содержимое появляется в области обзора под настраиваемым углом, определяемым через начальное значение смещения.
slideOut(): содержимое исчезает из поля зрения под настраиваемым углом, определяемым через начальное значение смещения.
slideOutHorizontally(): содержимое выходит из области обзора вдоль горизонтальной оси.
slideOutVertically(): содержимое выходит из поля зрения вдоль вертикальной оси
Например, применм пару из них:
package com.example.helloapp
import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.animation.AnimatedVisibility
import androidx.compose.animation.fadeIn
import androidx.compose.animation.slideOutVertically
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.material3.Button
import androidx.compose.material3.Text
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent{
val boxVisible = remember { mutableStateOf(true) }
Column(Modifier.padding(20.dp), horizontalAlignment = Alignment.CenterHorizontally) {
AnimatedVisibility(
visible = boxVisible.value,
Modifier.padding(40.dp),
enter = fadeIn(),
exit = slideOutVertically()) {
Box(Modifier.size(200.dp).background(Color.DarkGray))
}
Row(Modifier.fillMaxWidth(),horizontalArrangement = Arrangement.SpaceEvenly) {
Button({boxVisible.value = true}, enabled = !boxVisible.value){ Text("Show", fontSize = 28.sp)}
Button({boxVisible.value = false}, enabled = boxVisible.value){ Text("Hide", fontSize = 28.sp)}
}
}
}
}
}
В данном случае при появлении компонент Box будет постепенно отображаться, пока не станет полностью непрозрачным (видимым). А при исчезновении он будет склользить по вертикали вверх, как бы уходя из поля зрения:
enter = fadeIn(), exit = slideOutVertically()
Стоит отметить, что с помощью операции сложения мы можем комбинировать несколько функций:
AnimatedVisibility(
visible = boxVisible,
enter = fadeIn() + expandHorizontally(),
exit = slideOutVertically()
) {
Для настройки анимации вышеуказанные функции имеют параметр animationSpec, который представляет интерфейс AnimationSpec. Так, для установки времени и сглаживания анимации в AnimatedVisibility может использоваться рассмотренная в одной из прошлых тем функция tween(). Например:
package com.example.helloapp
import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.animation.AnimatedVisibility
import androidx.compose.animation.core.tween
import androidx.compose.animation.fadeIn
import androidx.compose.animation.slideOutVertically
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.material3.Button
import androidx.compose.material3.Text
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent{
val boxVisible = remember { mutableStateOf(true) }
Column(Modifier.padding(20.dp), horizontalAlignment = Alignment.CenterHorizontally) {
AnimatedVisibility(
visible = boxVisible.value,
Modifier.padding(40.dp),
enter = fadeIn(animationSpec = tween(durationMillis = 5000)),
exit = slideOutVertically()) {
Box(Modifier.size(200.dp).background(Color.DarkGray))
}
Row(Modifier.fillMaxWidth(),horizontalArrangement = Arrangement.SpaceEvenly) {
Button({boxVisible.value = true}, enabled = !boxVisible.value){ Text("Show", fontSize = 28.sp)}
Button({boxVisible.value = false}, enabled = boxVisible.value){ Text("Hide", fontSize = 28.sp)}
}
}
}
}
}
В данном случае для анимации появления на экране применяется функция fadeIn()
enter = fadeIn(animationSpec = tween(durationMillis = 5000)),
То есть появление компонента на экране будет занимать 5000 миллисекунд.
Аналогичным образом можно настраивать и другие функции, например:
import androidx.compose.animation.core.LinearOutSlowInEasing import androidx.compose.animation.slideInHorizontally ................................... enter = slideInHorizontally(tween(durationMillis = 5000, easing = LinearOutSlowInEasing)),
В данном случае компонент будет появляется области обзора, скользя вдоль горизонтальной оси в течение 5 секунд.
Или
import androidx.compose.animation.shrinkVertically
import androidx.compose.animation.slideInVertically
............................................
AnimatedVisibility(
visible = boxVisible.value,
Modifier.padding(40.dp),
enter =slideInVertically(tween(durationMillis = 5000, easing = LinearOutSlowInEasing)),
exit = shrinkVertically(tween(durationMillis = 5000, easing = LinearOutSlowInEasing))) {
Box(Modifier.size(200.dp).background(Color.DarkGray))
}
В данном случае компонент будет постепенно появляться в течение 5 секунд, выдвигаясь из-за вертикальной границы. И будет ужиматься вдоль вертикальной оси в течение 5 секунд.
Также для установки специафикации анимации можно использовать и другие функции, которые возвращают объект AnimationSpec. Например, используем функцию repeatable(), чтобы повторить анимацию 10 раз:
import androidx.compose.animation.core.RepeatMode
import androidx.compose.animation.core.repeatable
......................................
AnimatedVisibility(
visible = boxVisible.value,
Modifier.padding(40.dp),
enter =fadeIn(animationSpec =
repeatable(10,
animation = tween(durationMillis = 2000),
repeatMode = RepeatMode.Reverse)
),
exit = fadeOut()) {
Box(Modifier.size(200.dp).background(Color.DarkGray))
}