Исчезающие герои просмотров детей в переходе общего элемента

Question

Мне любопытно, как Android обрабатывает дочерние элементы представлений героев в переходе с общим элементом, который можно увидеть в Google Keep:

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

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

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

Между тем, в Google Keep переход с использованием общих элементов, по-видимому, затухает при просмотре контента взад-вперед, поэтому этот резкий эффект значительно менее заметен. Следовательно, различия в таких вещах, как отступы или переносы строк, гораздо менее проблематичны.

Какой лучший способ для меня реализовать это в моем собственном приложении?

Вот пример:

Answer 1

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

Код виден здесь: https://gist.github.com/zizibaloob/e107fe80afa6873301bf234702d4b2b9

tl; dr: "общий элемент" - это просто зеленая карта / фон, поэтому вы создаете переход, используя их. Поместите серый фон за зеленым фоном на втором упражнении, чтобы зелёный мог рисовать поверх него во время роста. Оберните весь ваш контент в родительском представлении и анимируйте его alpha исчезать / исчезать.

Полный ответ

На вашем изображении "общий элемент" выглядит как зеленая карта на первом экране / зеленый фон второго экрана. Кроме того, мы добавляем два дополнительных требования:

• Серый фон первого действия должен быть виден во время перехода
• Содержимое карты исчезает, а затем исчезает во время / после перехода

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

activity_main.xml

Это действительно просто. Я только что построил иерархию представлений, которая примерно напоминает ту, что на вашем изображении. Пустой View наверху заполнитель для Toolbarи Space внизу карты есть только для того, чтобы сделать его немного больше.

activity_other.xml

Соответствующей частью этого макета является тройной стек "родительских" представлений. Каждый из них служит своей цели:

• Верхний уровень FrameLayout обеспечивает серый фон для карты "расти" над
• Середина FrameLayout обеспечивает зеленый фон, который будет разделен между действиями
• Внутренний LinearLayout оборачивает все, что мы хотим, чтобы появилось и исчезло, и будет анимировано кодом в Activity учебный класс

MainActivity.java

Еще один простой класс. Все это Activity делает это сделать карту кликабельной и настроить переход.

OtherActivity.java

Большая часть магии происходит здесь. В onCreate(), Toolbar все стандартно, так что мы можем пропустить это. Код внутри if оператор - это то, что настраивает постепенную анимацию (обернутую в if так что он исчезает только при первом запуске). Я также переопределил onBackPressed() повернуть анимацию исчезновения и запустить обратный переход.

shared_element_transition.xml

Вся остальная магия находится в этом файле. <targets> Элемент исключает панели состояния и навигации, благодаря чему они не мигают во время перехода. Различные <changeFoo> теги - это фактическая анимация перехода, которая воспроизводится.

styles.xml

Единственная причина, по которой я включил это в Gist - это TransitionTheme стиль. Это относится к OtherActivity в манифесте, и это то, что устанавливает наш собственный переход (от shared_element_transition.xml).