我怎样才能在颤动中获得这种类型的过渡？

Question

我想要这种过渡动画。

但是当我使用

class CustomPageTransitionBuilder extends PageTransitionsBuilder {
  @override
  Widget buildTransitions<T>(
    PageRoute<T> route,
    BuildContext context,
    Animation<double> animation,
    Animation<double> secondaryAnimation,
    Widget child,
  ) {
    double begin = 0;
    double end = 1.0;
    var curve = Curves.easeOut;

    final tween = Tween(
      begin: begin,
      end: end,
    ).chain(CurveTween(
     curve: curve,
   ));

    final scaleAnimation = animation.drive(tween);

   if (route.settings.name == '/') {
     return child;
   }

   return ScaleTransition(
     scale: scaleAnimation,
      child: child,
   );
 }
}

并在 Main.dart 中：

MaterialApp(
    theme: ThemeData(
        pageTreansitionsTheme: PageTransitionsTheme( builders: {
               TargetPlatform.android: CustomPageTransitionBuilder()
         }
       )
    )

我得到了这种类型的动画：

导航到页面时不知何故没问题。但是当我回去的时候，我看到了奇怪的动画效果。

Answer 1

您可以使用 Hero 动画。

Answer 2

试试这个导航代码

Navigator.push(
              context,
              PageRouteBuilder(
                  transitionDuration: const Duration(seconds: 1),
                  transitionsBuilder: (BuildContext context,
                      Animation<double> animation,
                      Animation<double> secAnimation,
                      Widget child) {
                    animation = CurvedAnimation(
                        parent: animation, curve: Curves.elasticOut);
                    return ScaleTransition(
                        scale: animation,
                        alignment: Alignment.center,
                        child: child);
                  },
                  pageBuilder: (BuildContext context,
                      Animation<double> animation,
                      Animation<double> secAnimation) {
                    return SecondScreen();
                  }));

我怎样才能在颤动中获得这种类型的过渡？

How can I get this type of transition in flutter?

flutter

flutter-animation