Layout animations in android

LayoutAnimation — Анимация разметки и групп компонентов

Класс LayoutAnimation нужен для применения анимации к группам представлений: передает одиночный объект Animation (или AnimationSet) для каждого дочернего компонента в заранее определенной последовательности.

Используйте объект LayoutAnimationController для задания объекта Animation (или AnimationSet), который применяется к каждому компоненту в группе. Ко всем компонентам, содержащим этот объект, будет применена одна и та же анимация, но вы можете задействовать LayoutAnimationController для указания порядка и времени запуска для каждого компонента.

Для этих целей в Android предусмотрено два класса:

• LayoutAnimationController — позволяет выбирать начальный сдвиг для каждого компонента (в миллисекундах) и порядок (нормальный, обратный или случайный), в каком анимация применится для каждого дочернего элемента;
• GridLayoutAnimationController — как производный класс назначает анимационную последовательность для дочерних компонентов с использованием ссылки на строки и столбцы;

Создание анимации для разметки

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

Создадим простую анимацию в файле popin.xml в каталоге res/anim

popin.xml

А также зададим описание LayoutAnimation в файле popinlayout.xml в той же папке. Элемент LayoutAnimation в случайном порядке применит всплывающую анимацию к каждому дочернему представлению заданной группы.

popinlayout.xml

Теперь можно применить созданную анимацию к группе представлений двумя способами — с помощью XML-ресурса или программно. В XML это делается при помощи атрибута android:layoutAnimation у разметки:

Чтобы применить анимацию для разметки в коде программы, вызовите метод setLayoutAnimation() из объекта ViewGroup, передавая ему ссылку на соответствующий экземпляр LayoutAnimation.

В обоих случаях анимация выполнится один раз, при первом появлении группы представлений. Вы можете вызвать её повторно, запустив метод scheduleLayoutAnimation() из объекта ViewGroup. Таким образом, анимация выполнится при следующем появлении группы представлений.

Анимация для разметки также имеет поддержку интерфейса AnimationListener.

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

Создание анимации для Splash-экрана

Ссылка на исходный код приведена в конце статьи

Одним из примеров, где можно использовать анимационные эффекты — это экран-заставка игры, которая появляется на несколько секунд, а затем исчезает, уступая место другому экрану-меню.

Если на таком экране-заставке вывести просто текст о названии и версии игры, а также логотип, то будет скучно. Мы пойдем по другому пути и сделаем следующее:

• Поместим на форму TextView для отображения верхней текстовой строки
• Далее разместим контейнер TableLayout с двумя строками и столбцами — получается четыре ячейки
• В каждой ячейке разместим элемент ImageView
• Снова размещаем TextView с другой текстовой информацией
• И снова размещаем TextView, где будет содержаться информация о версии программы

Далее добавляем ресурсы в проект: картинки (res/drawable), цвета для текстовой информации (colors.xml), размеры для шрифтов (dimens.xml).

В итоге мы получим следующий результат

Создание анимации

Будем использовать анимацию преобразований. Создаем папку res/anim, в котором создадим три новых файла fade_in.xml, fade_in2.xml и custom_anim.xml.

В первом файле анимация плавно увеличивает непрозрачность (альфа-канал) верхнего текста от значения 0 (прозрачный) до значения 1 (непрозрачный) в течение 2.5 секунд.

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

Третья анимация самая интересная. Она будет вращать картинки вокруг своей оси (rotate), а также менять их прозрачность (alpha). Причём вращаться они будут парами. Сначала будут вращаться левые две картинки, а затем — правые. Кроме вращения и изменения прозрачности, также будут меняться их размеры (scale).

Управление анимации происходит программным путём. Чтобы применить первую анимацию к верхнему тексту, нужно получить экземпляр элемента TextView в методе onCreate(), загрузить анимационный ресурс в объект Animation и вызвать метод startAnimation() элемента TextView.

Аналогично поступаем и со вторым текстовым элементом.

Чтобы остановить анимацию, например, в методе onPause(), нужно вызвать метод clearAnimation().

Анимация всех элементов в элементе-контейнере

Помимо возможности применения анимации к отдельным элементам, вы можете применить анимацию к каждому элементу View, содержащему в элементе-контейнере (например, TableLayout и к каждому элементу TableRow), используя класс LayoutAnimationController.

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

В данном случае нет необходимости вызывать метод startAnimation(), поскольку это сделает экземпляр класса LayoutAnimationController. При использовании данного подхода анимация применяется к каждому дочернему элементу, однако воспроизведение каждой анимации начинается в разное время. Это создает красивый эффект, когда каждый элемент поочередно делает оборот вокруг своего центра.

Если после второй строчки вставить метод setOrder(), то анимация пар картинок будет происходить в случайном порядке:

Источник

Анимации в Android по полочкам (Часть 2. Комплексные анимации)

Приведённые в предыдущей части инструменты были относительно низкоуровневыми и в Android есть куда более простые способы добиться красивых анимаций не прибегая к прямому рисованию графики или изменению свойств объектов.

В этой части мы рассмотрим как можно минимумом усилий получить красивые анимации.

Часть 2. Комплексные анимации

1. Анимация изменений лэйаута (aka animateLayoutChanges)

Всё, что нам нужно сделать, чтобы добиться анимации как на гифке выше — это добавить флаг animateLayoutChanges в наш ViewGroup в xml. Теперь, когда мы удаляем или добавляем элемент в наш контейнер, либо изменяем его свойства, они автоматически будут анимированы.

Ладно, я немного слукавил когда говорил, что чтобы получить анимацию как на гифке выше, нужно всего лишь установить флаг. Добавление animateLayoutChanges на самом деле устанавливает LayoutTransition нашей ViewGroup. Но LayoutTransition по умолчанию анимирует только изменение видимости объектов в лэйауте. Поэтому если мы хотим изменять свойства объекта (например ширину и высоту) нужно включить эту опцию отдельно:

Теперь точно всё. Если захочется как-то кастомизировать это поведение, то у LayoutTransition есть метод setAnimator позволяющий задать свою собственную анимацию изменений. Ну самые хардкорные ребята всегда могут написать свой LayoutTransition .

• Применение:
Базовая анимация изменений объектов на сцене.
• Достоинства:
Минимальные трудозатраты
• Недостатки:
Слабая кастомизация

2. Transitions framework

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

Есть два основных варианта его использования:

1) Использование TransitionManager.beginDelayedTransition(ViewGroup)
Чтобы создать анимацию необходимо перед внесением изменений в наши View вызвать TransitionManager.beginDelayedTransition(ViewGroup) и передать в него ViewGroup, который мы хотим анимировать. Фрэймворк запомнит состояние View и запустит анимацию на следующем кадре.

2) Создание сцен
Создание анимации в этом случае сводится к созданию двух похожих xml, отвечающих за начальное и конечное состояние ваших анимаций. Соответственно, id объектов в xml должны совпадать, чтобы дать фреймворку возможность найти соответствие (На самом деле beginDelayedTransition тоже создаёт сцены, одну в момент вызова, а вторую на следующем кадре. После чего запускает анимацию между ними).

Кастомизация в Transitions framework достигается за счёт передачи объекта Transition вторым параметром. По умолчанию используется AutoTransition() , так что код ниже будет работать абсолютно так-же, как и код выше.

И если заглянуть внутрь AutoTransition можно заметить что анимации будут происходить в последовательно в следующем порядке:
— анимируются исчезающие объекты
— анимируются изменения размеров
— анимируются появляющиеся объекты

• Применение:
Анимация большого количества объектов

• Достоинства:
Минимальные трудозатраты
Доступная кастомизация

Источник

Работа с анимацией в Android: разбираем MotionLayout

Авторизуйтесь

Работа с анимацией в Android: разбираем MotionLayout

Android-разработчик ИТ-компании MediaSoft

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

Когда встаёт вопрос о реализации достаточно сложного UI, для разметки экрана разработчики чаще всего используют ConstraintLayout — достаточно популярный и гибкий инструмент, предоставляющий широкие возможности для вёрстки.

Официальная документация: ConstraintLayout — это ViewGroup, который даёт возможность гибко перемещать виджеты и изменять их размер. Он позволяет избавиться от большого числа вложенностей и улучшает производительность layout. Летом 2020 года вышел стабильный релиз ConstraintLayout 2.0, который позволяет задавать анимацию объектам с помощью MotionLayout.

Официальная документация: MotionLayout — это layout, который расширяет ConstraintLayout и позволяет анимировать layouts между различными состояниями. А для создания анимации в большинстве случаев достаточно только вёрстки в файле XML. Таким образом, программный код становится чище и лаконичнее.

Ещё одним примечательным нововведением стал MotionEditor — простой интерфейс для управления элементами из библиотеки MotionLayout. MotionEditor доступен в AndroidStudio, начиная с версии 4.0, и работу с ним мы также рассмотрим в данной статье.

Let’s do animations

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

• наличие AndroidStudio 4.0+;
• базовые знания ConstraintLayout;
• немного Kotlin.

Для начала необходимо добавить зависимость в gradle:

Перед тем как приступить к анимации, подготовим начальное состояние экрана в ConstraintLayout, добавим ImageView с мышкой и определим его начальное положение наверху экрана.

Движение объектов

Основную работу мы будем делать в файле с motion_scene. Для его создания необходимо кликнуть правой кнопкой мыши по превью объекта, которое вы хотите анимировать (наша мышь), и в выпадающем списке выбрать пункт Convert to MotionLayout.

Revolut , Санкт-Петербург, Москва, можно удалённо , По итогам собеседования

Наш корневой ConstraintLayout преобразовался в MotionLayout, а атрибут LayoutDescription указывает на сгенерированный layout_scene-файл. С ним мы и будем работать.

В этом файле лежит всё, что необходимо для создания анимации:

• корневой элемент MotionScene;
• ConstraintSets — настройки для описания состояния экрана;
• Transition — переход между состояниями;
• KeyFrames и другие атрибуты.

Мощным инструментом для конфигурации MotionLayot является уже упомянутый MotionEditor. На экране редактора можно увидеть состояния start и end. Между ними стрелка, которая показывает переход между состояниями или Transiton.

Редактировать Transitions и ConstraintSets можно с помощью панели справа, где задаются различные атрибуты (свойства): constraintSetStart — это начальная позиция нашей мышки (в нашем случае верх экрана). Конечную позицию объекта (constraintSetEnd) определим внизу экрана — для этого добавим необходимые привязки:

Запустим Transition и посмотрим, что будет происходить на экране — наша мышка бежит сверху вниз.

Продолжим усложнять нашу анимацию и сделаем так, чтобы наш объект двигался в обратном направлении. Для этого сконфигурируем Transition, нажав на иконку в левом верхнем углу:

1. Указываем в качестве начального ConstraintSet — end, в качестве конечного — start.
2. В поле Automatically (атрибут autoTransition в файле XML) выбираем Animate to End, чтобы анимация проигрывалась от начала до конца.
3. В коде добавим значение duration (длительность анимации в миллисекундах) — 5000, чтобы мышь двигалась чуть медленнее.

Обратите внимание, что атрибут autoTransition позволяет запускать переходы автоматически друг за другом. Таким образом, состояние объекта будет меняться от start до end и от end до start автоматически.

Теперь предлагаю сделать траекторию движения объекта разнообразнее. Какие есть варианты? Можно задать больше промежуточных ConstraintSet с разным положением мышки на экране, но данный подход будет не самым удобным, так как нам необходимо определять большое количество промежуточных состояний между основными. Создатели MotionLayout предлагают использовать более легковесные объекты KeyFrames.

KeyFrames определяют позицию или свойства объекта, а также изменения в конкретной временной точке перехода (анимации).
Для того чтобы открыть окно создания KeyFrame из редактора, необходимо выбрать нужный нам Transition, на временной шкале указать точку (именно в этот момент перехода применяется KeyFrame) и нажать на кнопку создания в правом верхнем углу.

Сконфигурируем KeyFrame в открывшемся окне:

1. Выбираем из списка KeyPosition, поскольку мы хотим задать позицию объекта на экране. Этот атрибут указывает, в какой момент выполнения Transition применяется KeyFrame (синяя стрелка на скриншоте). Значение может варьироваться от 0 до 100.
2. Выбираем систему координат pathRelative, чтобы движение объекта отклонялось от основного пути в разные стороны.
3. Заполняем атрибуты percentX и percentY — положение объекта в виде пары координат (x, y). Обратите внимание, что значения могут быть отрицательными.

Значения percentX и percentY зависят от системы координат, которую мы укажем в атрибуте KeyPosition:

• parentRelative — координаты указывают на положение относительно родительского контейнера, в котором расположена View;
• deltaRelative — координаты указывают на положение относительно стартовой и конечной позиции в процентном соотношении;
• pathRelative — координаты указывают на положение относительно пути от стартовой до конечной позиции объекта.

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

Итак, первый KeyPosition есть! Зададим ещё несколько, чтобы мышка плавно перемещалась из стороны в сторону. Кстати, в MotionEditor есть возможность вручную перетащить объект на нужную позицию при определении KeyFrames.

После определения произвольных KeyFrames на обеих Transitions получаем анимацию «убегающей» мышки.

Изменения свойств объекта

Теперь усложним нашу анимацию, изменив свойства объекта. Для этого добавим в файл вёрстки ещё один ImageView, пусть это будет мяч. Котики ведь бегают за мячами?

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

Добавим к нашим переходам KeyAttributes, которые будут менять свойства мячика во время переходов по тому же принципу, что и KeyPositions. В окне конфигурации KeyAttributes выбираем id нашего мяча и свойство. Вы можете изменить размер, добавить поворот, прозрачность, тень и другие свойства объекта. Например, для того, чтобы повернуть мяч на 180 градусов, в меню Attributes укажем значение rotation 180.

Таким же образом поменяем размеры мячика (scaleX, scaleY) и прозрачность (alpha) в разных временных точках наших переходов. Произвольным образом добавляем новые KeyFrames.

Добавим счётчик нажатий на объекты, для этого повесим ClickListeners на мышку и мячик, внутри которых будем увеличивать значение счётчика на единицу и выводить его на экране. Добавим фон и наше мини-приложение для котиков готово!

Итак, мы с вами рассмотрели базовые понятия MotionLayot и написали мини-игру для котика, используя только вёрстку!

Вы можете продолжить своё обучение, например, рассмотреть CustomAttribute, OnSwipe, OnClick, использование MotionLayout вместе с CoordinatorLayout, DrawerLayout, ViewPager, и другое. Всё это позволит вам создавать разнообразные анимированные эффекты: например, скрываемый тулбар, изменение цвета фона, анимацию по клику и свайпу, анимацию при перелистывании страниц, открытие и закрытие меню и многое другое. При этом вы будете поддерживать простую UI-логику и значительным образом экономить код.

Источник