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

На этой странице описывается, как создавать анимацию на основе значений в Jetpack Compose, уделяя особое внимание API, которые анимируют значения на основе их текущего и целевого состояний.

Анимируйте отдельное значение с помощью 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 и запускает анимации входа, выхода и sizeTransform по мере необходимости при изменении targetState Transition . Эти функции расширения позволяют переносить все анимации входа, выхода и sizeTransform , которые в противном случае были бы внутренними для AnimatedVisibility / AnimatedContent , в Transition . С помощью этих функций расширения можно наблюдать изменение состояния 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

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

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

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

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 напрямую, вы можете получить доступ к некоторым возможностям его настройки через API более высокого уровня. Подробнее об AnimationVector и AnimationSpec см. в разделе «Настройка анимации» .

Рисунок 1. Взаимосвязь между низкоуровневыми API анимации.

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

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

Многие функции 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 . Любое последующее изменение логического значения запускает анимацию другого цвета. Если в момент изменения значения анимация уже выполнялась, Compose отменяет её, и новая анимация запускается с текущего значения снимка с текущей скоростью.

API Animatable является базовой реализацией для 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 более высокого уровня.

Примечание: если вам не нужно вручную управлять временем, используйте 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 , и постепенно уменьшается.

{% дословно %} {% endverbatim %}