Анимация на основе значений

Анимируйте отдельное значение с помощью animate*AsState

Функции animate*AsState — это простейшие API анимации в Compose для анимации одного значения. Вы указываете только целевое значение (или конечное значение), и API запускает анимацию от текущего значения до указанного.

Ниже приведён пример анимации альфа-канала с использованием этого API. Просто обернув целевое значение в animateFloatAsState , мы получаем значение альфа-канала, которое теперь является значением анимации в диапазоне между заданными значениями (в данном случае 1f или 0.5f ).

var enabled by remember { mutableStateOf(true) }

val animatedAlpha: Float by animateFloatAsState(if (enabled) 1f else 0.5f, label = "alpha")
Box(
    Modifier
        .fillMaxSize()
        .graphicsLayer { alpha = animatedAlpha }
        .background(Color.Red)
)
AnimationSnippets.kt

Обратите внимание, что вам не нужно создавать экземпляр какого-либо класса анимации или обрабатывать прерывания. На внутреннем уровне объект анимации (а именно, экземпляр Animatable ) будет создан и запомнен в точке вызова с первым целевым значением в качестве его начального. С этого момента, каждый раз, когда вы указываете этому компонуемому объекту другое целевое значение, анимация автоматически запускается в направлении этого значения. Если анимация уже выполняется, она начинается с текущего значения (и скорости) и движется в направлении целевого значения. Во время анимации этот компонуемый объект перекомпоновывается и возвращает обновлённое значение анимации в каждом кадре.

Compose изначально предоставляет функции animate*AsState для Float , Color , Dp , Size , Offset , Rect , Int , IntOffset и IntSize . Вы можете легко добавить поддержку других типов данных, предоставив TwoWayConverter для animateValueAsState , принимающий универсальный тип.

Вы можете настроить параметры анимации, указав AnimationSpec . Подробнее см. в AnimationSpec .

Анимируйте несколько свойств одновременно с помощью перехода

Transition управляет одной или несколькими анимациями как своими дочерними элементами и запускает их одновременно между несколькими состояниями.

Состояния могут иметь любой тип данных. Во многих случаях можно использовать пользовательский тип enum для обеспечения типобезопасности, как в этом примере:

enum class BoxState {
    Collapsed,
    Expanded
}
AnimationSnippets.kt

updateTransition создает и запоминает экземпляр Transition и обновляет его состояние.

var currentState by remember { mutableStateOf(BoxState.Collapsed) }
val transition = updateTransition(currentState, label = "box state")
AnimationSnippets.kt

Затем вы можете использовать одну из функций расширения animate* для определения дочерней анимации в этом переходе. Укажите целевые значения для каждого из состояний. Эти функции animate* возвращают значение анимации, которое обновляется в каждом кадре анимации при обновлении состояния перехода с помощью updateTransition .

val rect by transition.animateRect(label = "rectangle") { state ->
    when (state) {
        BoxState.Collapsed -> Rect(0f, 0f, 100f, 100f)
        BoxState.Expanded -> Rect(100f, 100f, 300f, 300f)
    }
}
val borderWidth by transition.animateDp(label = "border width") { state ->
    when (state) {
        BoxState.Collapsed -> 1.dp
        BoxState.Expanded -> 0.dp
    }
}
AnimationSnippets.kt

При желании можно передать параметр transitionSpec , чтобы указать разные AnimationSpec для каждой комбинации изменений переходного состояния. Подробнее см. в AnimationSpec .

val color by transition.animateColor(
    transitionSpec = {
        when {
            BoxState.Expanded isTransitioningTo BoxState.Collapsed ->
                spring(stiffness = 50f)

            else ->
                tween(durationMillis = 500)
        }
    }, label = "color"
) { state ->
    when (state) {
        BoxState.Collapsed -> MaterialTheme.colorScheme.primary
        BoxState.Expanded -> MaterialTheme.colorScheme.background
    }
}
AnimationSnippets.kt

После достижения целевого состояния переходом, Transition.currentState будет совпадать с значением Transition.targetState . Это можно использовать как сигнал о завершении перехода.

Иногда нам требуется, чтобы начальное состояние отличалось от первого целевого. Для этого можно использовать updateTransition с MutableTransitionState . Например, это позволяет запустить анимацию сразу после начала композиции кода.

// Start in collapsed state and immediately animate to expanded
var currentState = remember { MutableTransitionState(BoxState.Collapsed) }
currentState.targetState = BoxState.Expanded
val transition = rememberTransition(currentState, label = "box state")
// ……
AnimationSnippets.kt

Для более сложного перехода, включающего несколько компонуемых функций, можно использовать createChildTransition для создания дочернего перехода. Этот метод полезен для разделения ответственности между несколькими подкомпонентами в сложном компонуемом объекте. Родительский переход будет учитывать все значения анимации в дочерних переходах.

enum class DialerState { DialerMinimized, NumberPad }

@Composable
fun DialerButton(isVisibleTransition: Transition<Boolean>) {
    // `isVisibleTransition` spares the need for the content to know
    // about other DialerStates. Instead, the content can focus on
    // animating the state change between visible and not visible.
}

@Composable
fun NumberPad(isVisibleTransition: Transition<Boolean>) {
    // `isVisibleTransition` spares the need for the content to know
    // about other DialerStates. Instead, the content can focus on
    // animating the state change between visible and not visible.
}

@Composable
fun Dialer(dialerState: DialerState) {
    val transition = updateTransition(dialerState, label = "dialer state")
    Box {
        // Creates separate child transitions of Boolean type for NumberPad
        // and DialerButton for any content animation between visible and
        // not visible
        NumberPad(
            transition.createChildTransition {
                it == DialerState.NumberPad
            }
        )
        DialerButton(
            transition.createChildTransition {
                it == DialerState.DialerMinimized
            }
        )
    }
}
AnimationSnippets.kt

Используйте переход с AnimatedVisibility и AnimatedContent

AnimatedVisibility и AnimatedContent доступны как функции расширения Transition . targetState для Transition.AnimatedVisibility и Transition.AnimatedContent является производным от Transition и запускает переходы входа/выхода по мере необходимости при изменении targetState Transition . Эти функции расширения позволяют перенести в Transition все анимации входа/выхода/sizeTransform , которые в противном случае были бы внутренними для AnimatedVisibility / AnimatedContent . Благодаря этим функциям расширения изменение состояния AnimatedVisibility / AnimatedContent можно наблюдать снаружи. Вместо visible логического параметра эта версия AnimatedVisibility принимает лямбда-функцию, которая преобразует целевое состояние родительского перехода в логическое значение.

Подробности смотрите в разделах AnimatedVisibility и AnimatedContent .

var selected by remember { mutableStateOf(false) }
// Animates changes when `selected` is changed.
val transition = updateTransition(selected, label = "selected state")
val borderColor by transition.animateColor(label = "border color") { isSelected ->
    if (isSelected) Color.Magenta else Color.White
}
val elevation by transition.animateDp(label = "elevation") { isSelected ->
    if (isSelected) 10.dp else 2.dp
}
Surface(
    onClick = { selected = !selected },
    shape = RoundedCornerShape(8.dp),
    border = BorderStroke(2.dp, borderColor),
    shadowElevation = elevation
) {
    Column(
        modifier = Modifier
            .fillMaxWidth()
            .padding(16.dp)
    ) {
        Text(text = "Hello, world!")
        // AnimatedVisibility as a part of the transition.
        transition.AnimatedVisibility(
            visible = { targetSelected -> targetSelected },
            enter = expandVertically(),
            exit = shrinkVertically()
        ) {
            Text(text = "It is fine today.")
        }
        // AnimatedContent as a part of the transition.
        transition.AnimatedContent { targetState ->
            if (targetState) {
                Text(text = "Selected")
            } else {
                Icon(imageVector = Icons.Default.Phone, contentDescription = "Phone")
            }
        }
    }
}
AnimationSnippets.kt

Инкапсулируйте переход и сделайте его пригодным для повторного использования

В простых случаях определение анимации переходов в том же компонуемом элементе, что и ваш пользовательский интерфейс, является вполне приемлемым вариантом. Однако при работе над сложным компонентом с несколькими анимированными значениями может потребоваться отделить реализацию анимации от компонуемого пользовательского интерфейса.

Это можно сделать, создав класс, содержащий все значения анимации, и функцию обновления, возвращающую экземпляр этого класса. Реализацию перехода можно вынести в отдельную функцию. Этот шаблон полезен, когда требуется централизовать логику анимации или сделать сложные анимации многоразовыми.

enum class BoxState { Collapsed, Expanded }

@Composable
fun AnimatingBox(boxState: BoxState) {
    val transitionData = updateTransitionData(boxState)
    // UI tree
    Box(
        modifier = Modifier
            .background(transitionData.color)
            .size(transitionData.size)
    )
}

// Holds the animation values.
private class TransitionData(
    color: State<Color>,
    size: State<Dp>
) {
    val color by color
    val size by size
}

// Create a Transition and return its animation values.
@Composable
private fun updateTransitionData(boxState: BoxState): TransitionData {
    val transition = updateTransition(boxState, label = "box state")
    val color = transition.animateColor(label = "color") { state ->
        when (state) {
            BoxState.Collapsed -> Color.Gray
            BoxState.Expanded -> Color.Red
        }
    }
    val size = transition.animateDp(label = "size") { state ->
        when (state) {
            BoxState.Collapsed -> 64.dp
            BoxState.Expanded -> 128.dp
        }
    }
    return remember(transition) { TransitionData(color, size) }
}
AnimationSnippets.kt

Создайте бесконечно повторяющуюся анимацию с rememberInfiniteTransition

InfiniteTransition содержит одну или несколько дочерних анимаций, таких как Transition , но эти анимации начинаются сразу после попадания в композицию и не останавливаются, пока не будут удалены. Вы можете создать экземпляр InfiniteTransition с помощью rememberInfiniteTransition . Дочерние анимации можно добавлять с помощью animateColor , animatedFloat или animatedValue . Также необходимо указать infiniteRepeatable для задания характеристик анимации.

val infiniteTransition = rememberInfiniteTransition(label = "infinite")
val color by infiniteTransition.animateColor(
    initialValue = Color.Red,
    targetValue = Color.Green,
    animationSpec = infiniteRepeatable(
        animation = tween(1000, easing = LinearEasing),
        repeatMode = RepeatMode.Reverse
    ),
    label = "color"
)

Box(
    Modifier
        .fillMaxSize()
        .background(color)
)
AnimationSnippets.kt

Низкоуровневые API анимации

Все API анимации высокого уровня, упомянутые в предыдущем разделе, построены на основе API анимации низкого уровня.

Функции animate*AsState — это простейшие API, которые отображают мгновенное изменение значения как значение анимации. Они поддерживаются Animatable — API на основе сопрограмм для анимации одного значения. updateTransition создаёт объект перехода, который может управлять несколькими анимируемыми значениями и запускать их в зависимости от изменения состояния. rememberInfiniteTransition похож, но создаёт бесконечный переход, который может управлять несколькими анимациями, продолжающимися бесконечно. Все эти API, за исключением Animatable , являются компонуемыми, то есть такие анимации можно создавать вне композиции.

Все эти API основаны на более фундаментальном API Animation . Хотя большинство приложений не взаимодействуют с Animation напрямую, некоторые возможности настройки Animation доступны через API более высокого уровня. Подробнее об AnimationVector и AnimationSpec см. в разделе «Настройка анимации» .

Animatable : анимация отдельных значений на основе корутин

Animatable — это контейнер значения, который может анимировать значение по мере его изменения с помощью animateTo . Этот API поддерживает реализацию animate*AsState . Он обеспечивает согласованное продолжение и взаимоисключаемость, то есть изменение значения всегда происходит непрерывно, и любая текущая анимация будет отменена.

Многие функции Animatable , включая animateTo , предоставляются в виде функций приостановки. Это означает, что их необходимо обернуть в соответствующую область действия сопрограммы. Например, можно использовать составной объект LaunchedEffect для создания области действия, ограниченной только указанным значением ключа.

// Start out gray and animate to green/red based on `ok`
val color = remember { Animatable(Color.Gray) }
LaunchedEffect(ok) {
    color.animateTo(if (ok) Color.Green else Color.Red)
}
Box(
    Modifier
        .fillMaxSize()
        .background(color.value)
)
AnimationSnippets.kt

В примере выше мы создаём и запоминаем экземпляр Animatable с начальным значением Color.Gray . В зависимости от значения логического флага ok , цвет анимации меняется на Color.Green или Color.Red . Любое последующее изменение логического значения запускает анимацию с другим цветом. Если в момент изменения значения анимация уже выполнялась, она отменяется, и новая анимация запускается с текущего значения снимка с текущей скоростью.

Это реализация анимации, которая поддерживает API animate*AsState , упомянутый в предыдущем разделе. По сравнению с animate*AsState , прямое использование Animatable дает нам более детальный контроль в нескольких аспектах. Во-первых, Animatable может иметь начальное значение, отличное от его первого целевого значения. Например, в приведенном выше примере кода сначала показан серый квадрат, который немедленно начинает анимироваться, становясь либо зеленым, либо красным. Во-вторых, Animatable предоставляет больше операций над значением содержимого, а именно snapTo и animateDecay . snapTo немедленно устанавливает текущее значение равным целевому. Это полезно, когда сама анимация не является единственным источником истины и должна быть синхронизирована с другими состояниями, такими как события прикосновения. animateDecay запускает анимацию, которая замедляется с заданной скорости. Это полезно для реализации поведения броска. См. Жесты и анимация для получения дополнительной информации.

Animatable изначально поддерживает типы данных Float и Color , но можно использовать любой тип данных, предоставив TwoWayConverter . Подробнее см. в разделе AnimationVector .

Вы можете настроить параметры анимации, указав AnimationSpec . Подробнее см. в AnimationSpec .

Animation : Анимация, управляемая вручную

Animation — это API анимации самого низкого уровня из доступных. Многие из рассмотренных нами анимаций построены на основе Animation. Существует два подтипа Animation : TargetBasedAnimation и DecayAnimation .

Animation следует использовать только для ручного управления временем анимации. Animation не имеет состояния и не имеет понятия жизненного цикла. Она служит механизмом расчёта анимации, используемым высокоуровневыми API.

TargetBasedAnimation

Другие API охватывают большинство случаев использования, но использование TargetBasedAnimation напрямую позволяет вам самостоятельно управлять временем воспроизведения анимации. В примере ниже время воспроизведения TargetAnimation управляется вручную на основе времени кадра, предоставляемого withFrameNanos .

val anim = remember {
    TargetBasedAnimation(
        animationSpec = tween(200),
        typeConverter = Float.VectorConverter,
        initialValue = 200f,
        targetValue = 1000f
    )
}
var playTime by remember { mutableLongStateOf(0L) }

LaunchedEffect(anim) {
    val startTime = withFrameNanos { it }

    do {
        playTime = withFrameNanos { it } - startTime
        val animationValue = anim.getValueFromNanos(playTime)
    } while (someCustomCondition())
}
AnimationSnippets.kt

DecayAnimation

В отличие от TargetBasedAnimation , DecayAnimation не требует указания targetValue . Вместо этого он вычисляет targetValue на основе начальных условий, заданных параметрами initialVelocity и initialValue , а также предоставленного DecayAnimationSpec .

Анимация затухания часто используется после жеста взмаха, чтобы замедлить движение элементов до полной остановки. Скорость анимации начинается со значения, заданного параметром initialVelocityVector , и со временем замедляется.