Примеры MotionLayout

Попробуйте Compose
Jetpack Compose – это рекомендуемый набор инструментов для создания пользовательского интерфейса в Android. Узнайте, как использовать анимацию в Compose.
Анимации в Compose →

В этом документе приведены примеры использования MotionLayout. Каждый пример включает видео, демонстрирующее движение, а также соответствующий код для сцены движения и макетов.

Базовое движение

В этом примере показано одно представление, которое можно перемещать по горизонтали.

Рисунок 1. Перетаскивание представления.

Настраиваемый атрибут – backgroundColor

Этот пример похож на пример Простое движение. В дополнение к базовому движению цвет фона представления меняется по мере его перемещения.

Рисунок 2. Перетаскивание представления с изменением цвета фона.

ImageFilterView – переход изображения

В этом примере показано, как изменить значение насыщенности ImageFilterView.

Рисунок 3. Перетаскивание изображения с изменением его насыщенности.

Положение ключевого кадра

В этом примере <KeyFrameSet> используется для изменения положения представления по оси Y во время движения.

Рисунок 4. Перетаскивание представления и изменение его положения по оси Y.

Интерполяция ключевых кадров

Этот пример основан на примере Положение ключевого кадра. В нем к переходу между представлениями добавляются поворот и масштабирование.

Рисунок 5. Перетаскивание представления и изменение его положения по оси Y, поворота и масштаба.

Цикл ключевых кадров

В этом примере добавляются элементы <KeyCycle>, чтобы добавить волнообразное движение к представлению.

Рисунок 6. Перетаскивание представления с волнообразным движением при изменении его цвета.

CoordinatorLayout (1/2)

В этом примере в существующий AppBarLayout добавляется MotionLayout, чтобы добавить эффект движения на панель приложения. Этот пример подробно описан в статье Введение в MotionLayout (часть III).

Рисунок 7. Прокрутка контента при расширении панели приложения.

CoordinatorLayout (2/2)

В этом примере мы добавляем MotionLayout к существующему AppBarLayout, чтобы добавить эффект движения на панель приложения.

Рисунок 8. Прокрутка контента, в то время как панель приложения расширяется, а текст анимируется на панели приложения и за ее пределами.

DrawerLayout (1/2)

В этом примере показано, как добавить эффект движения в DrawerLayout. Этот пример подробно описан в статье Введение в MotionLayout (часть III).

Рисунок 9. Развертывание `DrawerLayout`.

DrawerLayout (2/2)

В этом примере показано, как добавить эффект движения в DrawerLayout.

Рисунок 10. Разворачивающийся `DrawerLayout` с анимированным текстом меню.

Боковая панель

В этом примере показано, как отобразить боковую панель при перетаскивании основной области контента вправо.

Рисунок 11. Показ боковой панели перетаскиванием основного контента.

Параллакс

В этом примере показан фон с параллаксом, где разные слои фона перемещаются с разной скоростью.

Рисунок 12. Эффект параллакса в изображении заголовка.

ViewPager

В этом примере показано, как добавить эффект движения при переключении между вкладками ViewPager. Этот пример подробно описан в статье Введение в MotionLayout (часть III).

Рисунок 13. Эффект параллакса в изображении заголовка при пролистывании `ViewPager`.

ViewPager – Lottie

В этом примере показано, как добавить эффект движения при переключении между вкладками ViewPager.

Рисунок 14. Изображение, показывающее эффект Lottie в заголовке при пролистывании `ViewPager`.

Сложное движение (1/3)

В этом примере сочетаются элементы из предыдущих примеров, чтобы продемонстрировать сложное движение.

Рисунок 15. Комбинирование эффектов для создания сложного движения.

Сложное движение (2/3)

В этом примере сочетаются элементы из предыдущих примеров, чтобы продемонстрировать сложное движение.

Рисунок 16. Комбинирование эффектов для создания сложного движения.

Сложное движение (3/3)

В этом примере сочетаются элементы из предыдущих примеров, чтобы продемонстрировать сложное движение.

Рисунок 17. Комбинирование эффектов для создания сложного движения.

Переход фрагмента (1/2)

В этом примере показано, как использовать MotionLayout для перехода между фрагментами.

Рисунок 18. Переход фрагмента.

Переход фрагмента (2/2)

В этом примере показано, как использовать MotionLayout для перехода между фрагментами.

Рисунок 19. Переход фрагмента.

Движение, как на YouTube

В этом примере показан переход от компактного представления к полноэкранному режиму с дополнительным контентом.

Рисунок 20. Переход между фрагментами, как на YouTube.

KeyTrigger

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

Рисунок 21. Показать и скрыть плавающую кнопку действия.

Несколько штатов

В этом примере показано, как использовать состояние, чтобы определить, какое движение применить.

Рисунок 22. Разные движения в зависимости от состояния.