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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

КоординаторLayout (1/2)

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

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

КоординаторLayout (2/2)

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

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

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

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

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

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

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

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

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

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

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

Параллакс

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

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

Просмотр пейджера

В этом примере показано, как можно добавить движение при перелистывании между вкладками 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. Различные движения в зависимости от состояния.