用到的知识点
- Matrix4矩阵
- 贝塞尔曲线
第一步：画出指标运行大抵轨迹路线
首先咱们先画一条二阶贝塞尔曲线，这样咱们能更直观的察看到指标挪动的大抵轨迹。咱们先确定二阶贝塞尔曲线的三个点：p0（开始点）、p1（控制点）、p2（完结点），像上图的红线轨迹，屏幕的中心点开始，达到屏幕的宽2/3的地位，那么p0和p2的点就能够确定了：
// 二阶贝塞尔曲线 p0：开始点、p1：控制点、p2：完结点Offset p0, p1, p2;@overrideWidget build(BuildContext context) { Size _size = MediaQuery.of(context).size; if (p0 == null) { p0 = Offset(_size.width/2, _size.height/2); p1 = Offset(_size.width+_size.width/4, _size.height/4); p2 = Offset(_size.width*2/3, 0); }}复制代码失去二阶贝塞尔曲线的三个点之后就能够用 CustomPaint 把它画进去了，因为每次 setState 之后，build 会从新走一遍，所以我加了判断让它们只初始化一次就够了。
第二步：搁置纸飞机在屏幕的中心点
Flutter外面应用矩阵是通过 Transform 这个 Widget 来设置的，Transform 有多个扩大构造方法，比方 Transform.rotate、Transform.translate、Transform.scale，有趣味的能够本人去理解一下，在这里咱们应用 Transform 默认的构造方法能力通过 Matrix4 来实现飞机的挪动、缩放、旋转。
// 矩阵Matrix4 _matrix4 = Matrix4.identity();// 飞机尺寸Size planeSize;@overrideWidget build(BuildContext context) { Size _size = MediaQuery.of(context).size; if (planeSize == null) { planeSize = Size(_size.width/4, _size.width/4); } return Stack( children: [ Container( alignment: Alignment.center, child: Transform( transform: _matrix4, child: SvgPicture.asset(Res.svg_paper_plane, width: planeSize.width, height: planeSize.height,), ), ), ], );}复制代码第三步：设置动画，通过动画计算飞机挪动轨迹等
这一步最重要，波及到挪动轨迹、旋转角度和缩放倍数的计算，这外面波及到一些计算，我间接把代码贴出来（PS：毕竟我数学太过垃圾，这一步花了我好多工夫也没能找到挪动间隔、缩放倍数、旋转角度的最佳计算公式，只能本人一步一步缓缓调到大抵的视觉效果）。
// 挪动轨迹点，即挪动物的中心点Offset bezierCenter;// 以后挪动间隔Offset transSize = Offset(0.0, 0.0);/// 初始化动画_initAnim() { _animationController = AnimationController(duration: Duration(seconds: 3), vsync: this); _animation = Tween(begin: 0.0, end: 1.0).animate(_animationController); _animation.addListener(() { // t 动态变化的值 var t = _animation.value; if (mounted) { setState(() { _matrix4 = Matrix4.identity(); // 依据二阶贝塞尔曲线计算挪动轨迹点 double _left = pow(1 - t, 2) * p0.dx + 2 * t * (1 - t) * p1.dx + pow(t, 2) * p2.dx; double _top = pow(1 - t, 2) * p0.dy + 2 * t * (1 - t) * p1.dy + pow(t, 2) * p2.dy; // 设置挪动 if (bezierCenter == null) { transSize = Offset(0.0, 0.0); } else { transSize = Offset(transSize.dx - (bezierCenter.dx - _left), transSize.dy - (bezierCenter.dy - _top)); } _matrix4..translate(transSize.dx, transSize.dy, 0.0); bezierCenter = Offset(_left, _top); // 设置放大倍数 _matrix4..scale((1-t) < 0.4 ? 0.4 : (1-t)); // 设置旋转角度 double rotate = pi/2*t; _matrix4..rotateX(rotate > rotate*0.8 ? rotate*0.8 : rotate); _matrix4..rotateY(rotate > rotate*0.8 ? -rotate*0.8 : -rotate); _matrix4..rotateZ(rotate > rotate*0.8 ? -rotate*0.8 : -rotate); }); } });}复制代码