Flutter SDK предоставляет множество встроенных виджетов для анимации. Каждый виджет, конечно же, отличается от другого, и каждый имеет свое предназначение. Сегодня мы собираемся взглянуть на AnimatedSwitcher
, виджет, который анимирует выключение виджета с другим, предоставленным на его месте.
Как им пользоваться?
AnimatedSwitcher
очень прост в использовании. Просто нужно
child
: виджет, который вы хотите отобразить на экране в данный момент.duration
: период времени, в течение которого вы хотите, чтобы отключение виджетов происходило в анимированной форме. По сути, продолжительность, в течение которой вы хотите, чтобы анимация завершилась.
Базовый пример
Давайте посмотрим на базовый пример, в котором мы просто переключаемся между двумя виджетами вперед и назад нажатием кнопки.
Объяснение
Дерево виджетов довольно простое. У нас есть AnimatedSwitcher
по центру экрана, используя Center
. Дочерний элемент, отображаемый на экране, будет либо Text
, либо Container
, что будет зависеть от значения логического showText
. Как было сказано ранее, мы будем переключаться между виджетами при нажатии кнопки, поэтому у нас есть FloatingActionButton
, при нажатии которого мы переключаем showText
логическое значение, которое, в свою очередь, обновляет новый дочерний элемент, отображаемый на экране.
Давайте запустим код и увидим волшебство :)
Переключение между виджетами одного типа
Итак, давайте обновим код для переключения между двумя Container
виджетами, чтобы виджеты имели разные значения для атрибутов, таких как height
, width
, color
и т. Д.
Запустим код:
Ой! Это не кажется привлекательным ясным переходом, не так ли ?!
Причина в том, как Flutter управляет деревом элементов при каждом обновлении состояния. Каждый раз, когда устанавливается новое состояние, проверяются как runtimeType
, так и key
виджета.
Чтобы наша анимация работала должным образом, нам нужно предоставить разные ключи обоим виджетам Container
, чтобы они обрабатывались как разные виджеты.
Итак, мы собираемся предоставить ключ с помощью UniqueKey()
, который гарантирует, что сгенерирован уникальный ключ, который затем может быть назначен нашему виджету.
Обновите предыдущий код, предоставив key
обоим виджетам Container
, между которыми мы переключаемся, как показано ниже:
Container( ... key : UniqueKey(), ... )
Весь код для справки:
В отличие от того, что мы видели, можно сделать вывод, что AnimatedSwitcher
похоже на AnimatedCrossFade
. Это правда, за исключением того, что есть и другие переходы, помимо затухания, которые возможны при использовании AnimatedSwitcher
.
Другие переходы:
Масштабный переход:
Мы можем изменить переход от обычного перехода затухания к переходу масштаба, предоставив transitionBuilder
.
Оставьте остальную часть кода неизменной, просто передайте ScaleTransition
в transitionBuilder
в AnimatedSwitcher
, как показано ниже:
transitionBuilder: (widget, animation) => ScaleTransition( scale: animation, child: widget, ) ,
Весь код:
Давайте добавим borderRadius
к Container
, чтобы он выглядел еще лучше
Обновленный код:
Мы также можем контролировать характер анимации, задав кривые нашему AnimatedSwitcher
.
Мы можем пройти две кривые:
switchInCurve
: Это кривая, по которой будет следовать переход для переключения виджета, который заменит текущий виджет на экране.switchOutCurve
: Это кривая, по которой будет следовать переход для выключения виджета, который в настоящее время присутствует на экране.
Давайте передадим некоторые значения нашим кривым:
switchOutCurve: Curves.easeOutExpo, switchInCurve: Curves.easeInExpo,
Весь код:
Повернуть переход
Как и для ScaleTransition
, нам понадобится transitionBuilder
, которому мы передадим наш RotateTransition
.
- Обновите код, как показано ниже:
transitionBuilder: (widget, animation) => RotationTransition( turns: animation, child: widget, ) ,
- Также мы обновим наши кривые:
switchOutCurve: Curves.easeInOutCubic, switchInCurve: Curves.fastLinearToSlowEaseIn,
- Запустите код
Весь код:
Вы можете дополнительно настроить код, чтобы опробовать другие переходы, но я хотел бы, чтобы статья была краткой и по существу.
Спасибо, что прочитали мою статью. Следуйте за мной на Medium, чтобы увидеть больше статей.
Другие мои профили: