Как анимировать полноэкранный переход фотографий при смахивании, как в Telegram?

Question

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

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

Answer 1

Я нашел решение. Для создания такой анимации вы должны использовать пакет extended_image , в котором есть виджет SlideOutPage для создания таких переходов.

Answer 2

То, что вам нужно, это на самом деле готовый виджет, и он удивительно прост в использовании. Это называется Hero. По сути, вы оборачиваете виджет, который вы хотите анимировать, таким образом, в виджет Hero, с указанной строкой c tag, а когда вы переходите на другой экран, вы оборачиваете виджет назначения в другой Hero с помощью тот же тег. Эффект, подобный тому, которым вы поделились, может быть достигнут путем обертывания двух виджетов с одной и той же фотографией с Hero es в разных PageRoute s.

Проверьте этот Флаттерный виджет недели видео, чтобы вы начали, и эта статья Flutter.dev для более подробного объяснения Hero виджетов.

Редактировать: я вижу, вы ищете более конкретное c изображение поведение зрителя. Затем я предлагаю вам использовать пакет photo_view , который включает в себя множество функций для визуализации изображений, в том числе переход героя с режимами «смахивание-вниз-отклонение», «сжатие с увеличением» и т. Д. c.