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, чтобы увидеть больше статей.

Другие мои профили: