Flutter 闪屏页面 3s的一个透明渐变动画
Posted 安果移不动
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Flutter 闪屏页面 3s的一个透明渐变动画相关的知识,希望对你有一定的参考价值。
import 'package:flutter/material.dart';
import 'package:my_translate/pages/index_page.dart';
class OpenAnimation extends StatefulWidget {
const OpenAnimation({Key? key}) : super(key: key);
@override
_OpenAnimationState createState() => _OpenAnimationState();
}
class _OpenAnimationState extends State<OpenAnimation>
with TickerProviderStateMixin {
late AnimationController _controller;
late Animation _animation;
@override
void initState() {
super.initState();
_controller =
AnimationController(vsync: this, duration: Duration(seconds: 3));
_animation = Tween(begin: 0.0, end: 1.0).animate(_controller);
_animation.addStatusListener((status) {
//动画结束
if (status == AnimationStatus.completed) {
Navigator.of(context).pushAndRemoveUntil(
MaterialPageRoute(builder: (context) {
return IndexPage();
}), (route) => route == null);
}
});
_controller.forward();
}
@override
Widget build(BuildContext context) {
return FadeTransition(
opacity: _controller,
child: Image.asset(
"images/open_animtion.jpg",
fit: BoxFit.cover,
),
);
}
}
main.dart
import 'package:flutter/material.dart';
import 'package:my_translate/animation/open_animation.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return Container(
child: MaterialApp(
title: 'Goole Translate',
theme: ThemeData(
// This is the theme of your application.
//
// Try running your application with "flutter run". You'll see the
// application has a blue toolbar. Then, without quitting the app, try
// changing the primarySwatch below to Colors.green and then invoke
// "hot reload" (press "r" in the console where you ran "flutter run",
// or simply save your changes to "hot reload" in a Flutter IDE).
// Notice that the counter didn't reset back to zero; the application
// is not restarted.
primarySwatch: Colors.blue,
primaryColor: Colors.blue[600]),
home: OpenAnimation(),
),
);
}
}
跳转的页面
import 'package:flutter/material.dart';
class IndexPage extends StatelessWidget {
const IndexPage({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Googlt Translate"),
),
body: Center(
child: Text("这是显示的文字"),
),
);
}
}
以上是关于Flutter 闪屏页面 3s的一个透明渐变动画的主要内容,如果未能解决你的问题,请参考以下文章