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

На этой странице описывается, как создавать анимацию на основе значений в 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 см. в разделе «Настройка анимации» .

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 более высокого уровня.

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 , и постепенно уменьшается.