Пользовательская анимация переключения маршрутизации Flutter

Пользовательская анимация переключения маршрутизации Flutter

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

1. Принципы анимации

Во Flutter анимация переключения роутинга фактически реализуется за счет анимации перехода страницы роутинга. Обычно при переключении страниц маршрутизации возникают следующие эффекты перехода:

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

Мы можем добиться этих эффектов перехода с помощью библиотеки анимации во Flutter.

2. Пользовательская анимация переключения маршрутов

Flutter предоставляет класс PageRouteBuilder для настройки анимации переключения маршрутов. Мы можем наследовать класс PageRouteBuilder и переписать методы buildTransitions и buildPage, чтобы реализовать нашу собственную анимацию переключения маршрутов.

class CustomPageRoute extends PageRouteBuilder {
  final Widget widget;

  CustomPageRoute(this.widget)
      : super(
          transitionDuration: Duration(seconds: 1),
          pageBuilder: (BuildContext context, Animation<double> animation,
              Animation<double> secondaryAnimation) {
            return widget;
          },
          transitionsBuilder: (BuildContext context,
              Animation<double> animation,
              Animation<double> secondaryAnimation,
              Widget child) {
            // 自定义路由动画
          });
}

В приведенном выше коде мы определяем класс CustomPageRoute, который наследуется от класса PageRouteBuilder. Параметр виджета указывает страницу, на которую мы хотим перейти. В конструкторе вызываем метод super и передаем три параметра:

• transitionDuration: указывает продолжительность анимации переключения маршрутизации.
• pageBuilder: указывает страницу для перенаправления, здесь мы возвращаем виджет напрямую.
• transitionsBuilder: представляет построитель анимации переключения маршрутов, здесь мы можем настроить анимацию переключения маршрутов.

Далее реализуем анимацию переключения маршрутизации с переходом вращения.

class CustomPageRoute extends PageRouteBuilder {
  final Widget widget;

  CustomPageRoute(this.widget)
      : super(
          transitionDuration: Duration(seconds: 1),
          pageBuilder: (BuildContext context, Animation<double> animation,
              Animation<double> secondaryAnimation) {
            return widget;
          },
          transitionsBuilder: (BuildContext context,
              Animation<double> animation,
              Animation<double> secondaryAnimation,
              Widget child) {
            return RotationTransition(
              turns: Tween<double>(begin: 0, end: 1).animate(animation),
              child: child,
            );
          });
}

В приведенном выше коде мы устанавливаем возвращаемое значение метода transitionsBuilder для компонента RotationTransition. Среди них параметр поворота указывает угол поворота.Мы используем Tween, чтобы установить начальный угол и конечный угол поворота, а затем передаем параметр анимации в метод анимации Tween, чтобы указать ход выполнения анимации. Наконец, мы передаем дочерний параметр как подкомпонент RotationTransition, представляющий страницу для выполнения анимации.

3. Используйте пользовательскую маршрутизацию для переключения анимаций

Использовать собственный маршрут для переключения анимаций очень просто, просто передайте класс CustomPageRoute, который мы определили, в метод push Navigator:

Navigator.of(context).push(CustomPageRoute(NextPage()));

Среди них NextPage представляет страницу, на которую мы хотим перейти.

4. Резюме

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