如何在闪屏动画后制作淡入淡出动画

Question

我正在构建一个应用程序，并决定用闪屏动画打开它。动画出来的时候很完美，动画过后问题就来了。事物跳转到位的方式使应用程序看起来静态。我希望在下一个屏幕上淡入淡出，让事情看起来更流畅。

这里有一个 github 链接，如果你想仔细看看： https://github.com/Yoshi252/gudlife/tree/main

main.dart：

void main() {
  runApp(
    MaterialApp(
      theme: theme,
      routes: {
        '/': (context) => Splash(),
        '/login': (context) => LoginScreen(),
      },
    ),
  );
}

飞溅.dart

这是启动画面的所有功能

class Splash extends StatefulWidget {
  const Splash({super.key});


  @override
  State<Splash> createState() => _SplashState();
}

class _SplashState extends State<Splash> with RouteAware{
  var isVisible = false;

  void initState() {
    super.initState();
    startTimer();
  }

  startTimer(){
    var duration = Duration(milliseconds: 3340);
    return Timer(duration, route);
  }

  route(){
    Navigator.pushReplacementNamed(context, '/login');
    print(ModalRoute.of(context)?.settings.name);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: const Color.fromARGB(255, 0, 0, 0),
      body: content(),
    );
  }

  Widget content() {
    return Center(
      child: Container(
        child: Lottie.asset('assets/images/splash.json'),
      ),
    );
  }
}

登录.dart

经过研究，我尝试将 LoginForm 包装在 AnimatedOpacity 小部件中，但它不起作用，因为我无法触发它。

class LoginScreen extends StatefulWidget {
  const LoginScreen({super.key});

  @override
  State<LoginScreen> createState() => _LoginScreenState();
}

class _LoginScreenState extends State<LoginScreen> with RouteAware{
  @override
  Widget build(BuildContext context) {

    return Scaffold(
      body: Center(
        child: Container(
          decoration: const BoxDecoration(
            gradient: LinearGradient(
              colors: [
                Color.fromARGB(255, 50, 50, 50),
                Color.fromARGB(255, 0, 0, 0)
              ],
              begin: Alignment.topLeft,
              end: Alignment.bottomRight,
            ),
          ),
          child: const LoginForm(),
        ),
      ),
    );
  }
}

Answer 1

导航时尝试使用淡入淡出动画。

Navigator.pushReplacement(
  context,
  PageRouteBuilder(
    pageBuilder: (context, animation, secondaryAnimation) => LoginScreen(),
    transitionsBuilder: (context, animation, secondaryAnimation, child) {
      return FadeTransition(
        opacity: animation,
        child: child,
      );
    },
  ),
);