启动屏幕加载动画-颤振

Question

我正在制作启动屏

在我的启动画面中，我想让我的logo动画化(放大)

我想动画我的标志，只要屏幕开始。

这是我到目前为止的代码…

class SplashScreen extends StatefulWidget {
@override
_SplashScreenState createState() => _SplashScreenState();
}
class _SplashScreenState extends State<SplashScreen> {
final _splashDelay = 2000;
double _height = 10.0;
@override
void initState() {
// TODO: implement initState
super.initState();
_loadWidget();
}
_loadWidget() async {
var _duration = Duration(milliseconds: _splashDelay);
return Timer(_duration, navigationPage); 
}
void navigationPage() {
Navigator.pushReplacement(context, MaterialPageRoute(builder: (context) => LoginScreen()));
}
@override
Widget build(BuildContext context) {
FlutterStatusbarcolor.setStatusBarColor(Colors.red[900]);
FlutterStatusbarcolor.setStatusBarWhiteForeground(true);
return Scaffold(
body: Stack(
children: [
SafeArea(
child: Container(
width: double.infinity,
height: double.infinity,
margin: EdgeInsets.symmetric(
horizontal: 15,
vertical: 30,
),
child: Card(
elevation: 4.5,
child: Center(
child: AnimatedContainer(
duration: Duration(milliseconds: 2000),
height: _height,
child: Image.asset('assets/images/logo.png'),
),
),
),
),
),
],
),
);
}
}

我想要的是，将AnimatedContainer()的高度从10更改为100

我已经尝试了3个小时了，但是无法帮助自己通过。现在我正在寻求你的帮助/指导。谢谢你。

Answer 1

你必须创建一个从开始(10)到结束(100)的AnimationController和TweenAnimation。在这种情况下，控制器只是用于(冗余的，我知道)控制动画和它应该何时开始。

当你创建一个渐变，并应用animate()方法时，你只是在说你希望动画在这个渐变的开始和结束时在你在控制器中指定的持续时间内结束。

final _splashDelay = 2000;
Animation height;
AnimationController _controller;
@override
void initState() {
// TODO: implement initState
super.initState();
_controller=AnimationController(vsync: this, duration: Duration(milliseconds:_splashDelay,),)..forward();
_controller.addListener(
() {
setState(() {});
},
);
height=Tween<double>(begin:10, end:100,).animate(_controller);
_loadWidget();
}

然后，当你创建你的AnimatedContainer时，你必须提供height: _height.value

这里您只是在说"Flutter，请在2000毫秒的间隔内将此变量的值从10更改为100，并使用此值绘制此容器的高度">

请注意，你必须添加mixin SingleTickerProviderStateMixin到你的状态。如果你不这样做，vsync: this将无法工作。

Answer 2

您需要一个ScaleTransition小部件来实现您的目标。

您可以在下面签出代码的工作示例:

class SplashScreen extends StatefulWidget {
@override
_SplashScreenState createState() => _SplashScreenState();
}
class _SplashScreenState extends State<SplashScreen>
with SingleTickerProviderStateMixin {
final _splashDelay = 2000;
double _height = 10.0;
AnimationController _animationController;
@override
void initState() {
// TODO: implement initState
_animationController =
AnimationController(vsync: this, duration: const Duration(seconds: 2));
_animationController.forward();
super.initState();
_loadWidget();
}
@override
void dispose() {
_animationController.dispose();
super.dispose();
}
_loadWidget() async {
var _duration = Duration(milliseconds: _splashDelay);
return Timer(_duration, navigationPage);
}
void navigationPage() {
Navigator.pushReplacement(context, MaterialPageRoute(builder: (context) => LoginScreen()));
}
@override
Widget build(BuildContext context) {
FlutterStatusbarcolor.setStatusBarColor(Colors.red[900]);
FlutterStatusbarcolor.setStatusBarWhiteForeground(true);
return Scaffold(
body: Stack(
children: [
SafeArea(
child: Container(
width: double.infinity,
height: double.infinity,
margin: EdgeInsets.symmetric(
horizontal: 15,
vertical: 30,
),
child: Card(
elevation: 4.5,
child: Center(
child: ScaleTransition(
scale: _animationController,
child: Image.asset('assets/images/logo.png'),
),
),
),
),
),
],
),
);
}
}