java 小球运动轨迹_Flutter Matrix4矩阵动画实现移动、缩放、旋转，让你的纸飞机沿着贝塞尔曲线轨迹飞起来...

用到的知识点Matrix4矩阵

贝塞尔曲线

第一步：画出目标运行大致轨迹路线

首先我们先画一条二阶贝塞尔曲线，这样我们能更直观的观察到目标移动的大致轨迹。我们先确定二阶贝塞尔曲线的三个点：p0(开始点)、p1(控制点)、p2(结束点)，像上图的红线轨迹，屏幕的中心点开始，到达屏幕的宽2/3的位置，那么p0和p2的点就可以确定了：// 二阶贝塞尔曲线 p0：开始点、p1：控制点、p2：结束点

Offset p0, p1, p2;

@override

Widget 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 会重新走一遍