Затухающие герои просматривают дочерние элементы в переходе с общим элементом

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

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

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

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

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

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

Вот пример:

android shared-element-transition nested-views

William 25.06.2015 источник

comment

Можете ли вы поделиться двумя гифками: одна с реальным поведением, а другая с ожидаемым поведением? - azizbekian 26.10.2017

Ответы (1)

arrow_upward
11
arrow_downward

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

Код виден здесь: 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).

Ben P. 31.10.2017