Макеты для создания лучших анимаций

29 июня в выпуске Jetpack Compose 1.3.0-alpha01 был представлен новый макет LookaheadLayout. Чтобы понять концепцию LookaheadLayout, давайте представим, что у нас есть ExpandableFab, как показано ниже.

Вопреки тому, что мы себе представляли, это некрасиво, потому что нет анимации. Добавим анимацию.

Теперь ExpandableFab, которое мы себе представляли, завершено.

Анимации, включая ExpandableFab выше, продолжаются как начальный кадр, который является начальным состоянием, кадр анимации, в котором выполняется анимация, и конечный кадр, который является конечным состоянием.

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

Однако макет, который может отслеживать эти кадры анимации, отсутствует до версии 1.2.0. Макет, который появился, чтобы преодолеть это, называется LookaheadLayout.

LookaheadLayout предварительно просматривает кадры, которые должны быть нарисованы между кадрами начала и конца, и помогает нарисовать новый макет между кадрами начала и конца на основе информации (размеры, размещение), которая должна быть нарисована в этом кадре.

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

Информацию, рассчитанную на этапе просмотра вперед, можно получить с помощью Modifier.onPlaced, а промежуточную раскладку фактически можно разместить через Modifier.intermediateLayout.

Итак, мы узнали о концепции LookaheadLayout. Теперь давайте на самом деле использовать его.

LookaheadLayout компонуемый, который находится на экспериментальной стадии, и он получает LookaheadLayoutScope в качестве объема содержимого.

LookaheadLayoutScope реализует Modifier.onPlaced и Modifier.intermediateLayout.

Modifier.onPlaced вызывается с рассчитанными значениями в качестве аргумента, когда информация для размещения промежуточного макета вычисляется на этапе просмотра вперед. Параметры - это LookaheadLayoutCoordinates, которые используются LookaheadLayout, и этот модификатор компонуемый.

Процесс вызова Modifier.onPlaced таков:

LookaheadLayoutCoordinates, полученное в качестве аргумента, представляет собой интерфейс, который содержит LayoutCoordinates обоих макетов до и после этапа просмотра вперед. При этом можно получить рассчитанное смещение промежуточного макета и смещение текущего содержимого.

И LookaheadLayoutCoordinates.localLookaheadPositionOf, и LookaheadLayoutCoordinates.localPositionOf используются для получения преобразованного смещения относительно определенной координаты. Единственное отличие состоит в том, что в отличие от localPositionOf, localLookaheadPositionOf использует позицию просмотра вперед для вычисления координат.

Теперь давайте посмотрим на остальную часть Modifier.intermediateLayout.

Можно использовать Modifier.intermediateLayout для размещения промежуточного макета на основе информации, рассчитанной на шаге просмотра вперед.

Modifier.onPlaced и Modifier.intermediateLayout это:

Теперь давайте вернемся к процессу кадра ExpandableFab, который мы видели в начале этой статьи, чтобы фактически использовать LookaheadLayout.

Процесс кадра анимации теперь можно отслеживать через LookaheadLayout, а размер и смещение внутри этого кадра анимации изменяются. Мы можем реализовать это, используя Modifier.onPlaced и Modifier.intermediateLayout.

Чтобы настроить размер, трансформируйте промежуточный макет с помощью аргумента измерения, который представляет собой лямбду, предоставляющую размер промежуточного макета с помощью Modifier.imtermediateLayout. Чтобы настроить смещение, отрегулируйте размещение контента на основе смещения промежуточного макета, рассчитанного с помощью Modifier.onPlaced.

Давайте сначала создадим Modifier.movement для настройки смещения.

Затем создал Modifier.transformation для изменения размера.

Теперь, чтобы применить сделанные таким образом модификаторы, существующий Fab оборачиваем LookaheadLayout и подключаем модификатор.

Результат:

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

Animatable можно использовать для обработки анимации. Давайте анимируем изменения размера и смещения.

Наконец, он выглядит так, как мы хотим.

Конец!

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

Полный код ExpandableFab, использованный в примере в этой статье, можно найти по ссылке ниже.

Кроме того, после выпуска версии 1.3.0-alpha01 Compose начал переходить на независимую систему управления версиями. На данный момент отделен только компилятор, и если установить версию компилятора Compose на 1.3.0-alpha01, то можно использовать версию Kotlin 1.7.0.

Спасибо за прочтение.

[View in Korean]