Flutter 模拟神舟十三号火箭发射动画
前言
2021年10月16日零时二十三分,我国神舟十三号载人飞船于指定轨道成功升空,三名航天员已成功进入空间站,正进行为期六个月的太空探索之旅。
2022年4月16日9时56分,神舟十三号载人飞船在东风着陆场安全着陆,三位航天员翟志刚、王亚平、叶光富安全回归太空,迎接祖国母亲的到来。
随着国家航天技术的巨大进步也让岛上的码农们倍感自豪！今天学习Flutter动画知识时熟悉了AnimatedPositioned$这一组件，并了解到它能够实现组件间的相对位置动态调整功能。回想起来当时神舟十三号的成功发射场景恰似灵光一闪于是决定利用此组件来制作火箭发射过程 animation效果！稍后展示效果如何吧！
效果说明
实际上是由两个图像层叠而成，在这其中有一张是一张地球和星空背景的图片另一张则是火箭模型随着火箭发射系统的运行发展在其动力阶段和推进阶段会出现两种不同的状态变化
- 高度持续增加就意味着相对图片背景图底部的位置越来越靠近底部就能完成；
- 尺寸逐渐缩小是通过这种方式来调节整个组件的大小来完成。
然后是取消动画选择。由于火箭的速度逐渐加快，在尝试了几种 Flutter 提供的标准曲线后发现 easeInCubic 效果较为理想：它开始缓慢，在后期逐渐加速，并与火箭发射的动力过程相仿。
AnimatedPositioned介绍
其使用方法与 AnimatedContainer 类似，并且 AnimatedPositioned充当 Positioned 组件的替代角色。
const AnimatedPositioned({
Key? key,
required this.child,
this.left,
this.top,
this.right,
this.bottom,
this.width,
this.height,
Curve curve = Curves.linear,
required Duration duration,
VoidCallback? onEnd,
})
代码解读前一部分使用的参数与 Positioned 相同；后一部分则涉及动画控制参数；这些参数与 AnimatedContainer 中的一致：
curve：动画效果曲线；duration：动画时长；onEnd：动画结束后回调。
通过调整 left、top 和 width 等参数，我们可以达成动画过渡的效果。例如我们的火箭发射就是设置 `bottom``（飞行高度控制）以及 width（尺寸大小控制）来完成的。
火箭发射动画实现
有了上面的两个分析，火箭发射动画就简单了！完整代码如下：
class RocketLaunch extends StatefulWidget {
RocketLaunch({Key? key}) : super(key: key);
@override
_RocketLaunchState createState() => _RocketLaunchState();
}
class _RocketLaunchState extends State<RocketLaunch> {
var rocketBottom = -80.0;
var rocketWidth = 160.0;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('火箭发射'),
brightness: Brightness.dark,
backgroundColor: Colors.black,
),
backgroundColor: Colors.black,
body: Center(
child: Stack(
alignment: Alignment.bottomCenter,
children: [
Image.asset(
'images/earth.jpeg',
height: double.infinity,
fit: BoxFit.fill,
),
AnimatedPositioned(
child: Image.asset(
'images/rocket.png',
fit: BoxFit.fitWidth,
),
bottom: rocketBottom,
width: rocketWidth,
duration: Duration(seconds: 5),
curve: Curves.easeInCubic,
),
],
),
),
floatingActionButton: FloatingActionButton(
child: Text(
'发射',
style: TextStyle(
color: Colors.white,
),
textAlign: TextAlign.center,
),
onPressed: () {
setState(() {
rocketBottom = MediaQuery.of(context).size.height;
rocketWidth = 40.0;
});
},
),
);
}
}
代码解读在初始阶段将 bottom 设置为负值是为了遮蔽火箭的焰火以增加观赏效果。接着，在按下发射按钮时，系统会通过调用 setState 方法来修改底部距离和火箭尺寸以完成操作。
总结
通过神舟十三飞船发射来看一下火箭动画是不是挺有意思呢？其实这篇文章的主要知识点就是介绍 AnimatedPositioned 这个组件的应用吧。使用 AnimatedPositioned这个组件能够实现多种层叠组件之间的相对移动与变化效果呢！例如进度条滑块、滑动开关等场景都可以用它来完成相应的功能对吧？对于Flutter玩家来说这是一个非常实用的工具包资源库入口点之一——大家不妨亲自体验一下如何利用它创造出各种有趣的动画效果哦！