Примеры моушн-лейаута

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

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

Основное движение

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

Рисунок 1. Перетаскивание элемента интерфейса.

Пользовательский атрибут - backgroundColor

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

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

ImageFilterView - переход между изображениями

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

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

Позиция ключевого кадра

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

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

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

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

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

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

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

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

Координаторная компоновка (1/2)

В этом примере MotionLayout добавляется к существующему AppBarLayout для добавления анимации к панели приложения. Этот пример более подробно описан в разделе «Введение в MotionLayout» (часть III) .

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

КоординаторМакет (2/2)

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

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

Расположение ящиков (1/2)

В этом примере показано, как добавить анимацию к DrawerLayout . Более подробное описание этого примера приведено в разделе «Введение в MotionLayout (часть III)» .

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

Расположение ящиков (2/2)

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

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

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

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

Рисунок 11. Показана боковая панель, открывающаяся путем перетаскивания основного содержимого.

Параллакс

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

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

ViewPager

В этом примере показано, как добавить анимацию при перелистывании вкладок ViewPager . Более подробное описание этого примера приведено в разделе «Введение в MotionLayout (часть III)» .

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

ViewPager - Лотти

В этом примере показано, как добавить анимацию при перелистывании вкладок ViewPager .

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

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

В этом примере объединены элементы из предыдущих примеров для демонстрации сложного движения.

Рисунок 15. Сочетание эффектов для создания сложного движения.

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

В этом примере объединены элементы из предыдущих примеров для демонстрации сложного движения.

Рисунок 16. Сочетание эффектов для создания сложного движения.

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

В этом примере объединены элементы из предыдущих примеров для демонстрации сложного движения.

Рисунок 17. Сочетание эффектов для создания сложного движения.

Фрагментный переход (1/2)

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

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

Фрагментный переход (2/2)

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

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

Движение, похожее на YouTube

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

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

KeyTrigger

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

Рисунок 21. Отображение и скрытие плавающей кнопки действия.

Многоштатный

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

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