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

Метод 1: AnimatedPositioned
Виджет AnimatedPositioned позволяет анимировать положение дочернего виджета в макете его родительского элемента. Регулируя свойства положения (сверху, снизу, слева или справа) с течением времени, вы можете анимировать виджет за пределами экрана. Вот пример:

AnimatedPositioned(
  duration: Duration(seconds: 1),
  curve: Curves.easeInOut,
  top: isOffScreen ? -200 : 0,
  child: Container(
    width: 200,
    height: 200,
    color: Colors.blue,
  ),
)

Метод 2: SlideTransition
Виджет SlideTransition позволяет анимировать виджет, перемещая его за пределы экрана. Управляя свойством позиции объекта Animation, вы можете управлять анимацией слайда. Вот пример:

SlideTransition(
  position: Tween<Offset>(
    begin: Offset.zero,
    end: Offset(-1.0, 0.0),
  ).animate(animationController),
  child: Container(
    width: 200,
    height: 200,
    color: Colors.blue,
  ),
)

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

Transform.translate(
  offset: isOffScreen ? Offset(-200, 0) : Offset.zero,
  child: Container(
    width: 200,
    height: 200,
    color: Colors.blue,
  ),
)

Метод 4: AnimatedContainer
Виджет AnimatedContainer позволяет анимировать несколько свойств контейнера, включая его положение и размер. Обновляя свойства контейнера в течение определенного периода времени, вы можете анимировать его за пределами экрана. Вот пример:

AnimatedContainer(
  duration: Duration(seconds: 1),
  curve: Curves.easeInOut,
  width: isOffScreen ? 0 : 200,
  height: isOffScreen ? 0 : 200,
  child: Container(
    color: Colors.blue,
  ),
)

В этой статье мы рассмотрели несколько методов анимации виджетов Flutter за кадром. Используя такие виджеты, как AnimatedPositioned, SlideTransition, Transform.translate и AnimatedContainer, вы можете добиться различных эффектов закадровой анимации. Поэкспериментируйте с этими методами, чтобы создать увлекательный пользовательский интерфейс в своих приложениях Flutter.