我正在构建一个应用程序,并决定用闪屏动画打开它。动画出来的时候很完美,动画过后问题就来了。事物跳转到位的方式使应用程序看起来静态。我希望在下一个屏幕上淡入淡出,让事情看起来更流畅。
这里有一个 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(),
),
),
);
}
}
导航时尝试使用淡入淡出动画。
Navigator.pushReplacement(
context,
PageRouteBuilder(
pageBuilder: (context, animation, secondaryAnimation) => LoginScreen(),
transitionsBuilder: (context, animation, secondaryAnimation, child) {
return FadeTransition(
opacity: animation,
child: child,
);
},
),
);