java 小球运动轨迹

admin管理员组

文章数量:1516870

java 小球运动轨迹

用到的知识点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 会重新走一遍，所以我加了判断让它们只初始化一次就够了。

第二步：放置纸飞机在屏幕的中心点

Flutter里面使用矩阵是通过 Transform 这个 Widget 来设置的，Transform 有多个扩展构造方法，比如 Transform.rotate、Transform.translate、Transform.scale，有兴趣的可以自己去了解一下，在这里我们使用 Transform 默认的构造方法才能通过 Matrix4 来实现飞机的移动、缩放、旋转。// 矩阵

Matrix4 _matrix4 = Matrix4.identity();

// 飞机尺寸

Size planeSize;

@override

Widget 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);

});

}

});

}

复制代码

最后附录上完整代码(Github)：PlaneFly

本文标签： java 小球运动轨迹