项目开发中的贝塞尔曲线

2024年1月19日 149次阅读 来源: 网易云社区

本文由邹启文授权网易云社区发布。

邮箱大师PC版中，设计师提出了一个很妙的想法： 发信时，出现一个飞机，从写信中央飞往进度目的地。

附加要求：
1，飞行曲线，飞机先加速，然后减速抵达终点
2，飞行途中，需要转换飞机朝向
3，飞行途中，飞机渐渐变小
体验：网易邮箱大师电脑版

实现方法：

  1. 飞行曲线

我们选择了二次贝塞尔曲线，原因是简单，可计算。
数学公式：B(t) = (1-t)^2 P0 + 2 t (1-t) P1 + t^2 *P2, t=[0,1]
《项目开发中的贝塞尔曲线》
（图片来源于网络，此处是为了讲解清楚）

已知起飞点P0，终点P2，起飞角度（或斜率，切线P0P1），降落角度（或斜率，切线P1P2），求P1
将起飞角度转换（k=tan(θ)）成斜率k1，降落角度转成斜率k2，根据斜率公式y=k*x+b可得
P0.y = k1 * P0.x + b1;
P1.y = k1 * P1.x + b1;
P2.y = k2 * P2.x + b2;
P1.y = k2 * P1.x + b2;
至此，便可求得P1坐标。（可调整角度（或k1,k2）以满足实际要求）

曲线虽然推导出来，但是，飞机先加速然后减速，如何实现呢？

注意观察，公式中t的取值范围是0~1，我们可以让飞机在前面小部分时间走过大部分距离，后面
大部分时间走过小部分距离来做到。
为了灵活调整，以及总时间固定的情况下，我们选择了一种简单的方法，将时间分片，人为的构造
出一段前面加速后面减速的时间曲线。

示例：
const int kPiece[] = { 10,20,30,45,65,90,70,45,40,35,30,25,22,20,19,18,17,16,15 };
定时器设置为10ms，每隔10ms，计算一次t=kPiece(0~i) / kPiece(0~N) * T;
kPiece(0~i)为前i项和，kPiece(0~N)为总和，T为固定的总时间

  1. 飞机朝向

飞机的头要随着曲线改变朝向。很显然，这个朝向就是曲线的切线方向。
求切线，正确的方式是求导。
在这里，我们选择了一种简单的方法：
记住当前点和上一点，然后计算2点的斜率，再转换成角度。

  1. 飞机大小

飞机大小变化没有严格要求，可采取线性变化，在总时间T内从1.0到0.25（根据素材大小决定），恰好做到与曲线同时变化结束。

特别注意
I、起飞角度转换成斜率，在计算机世界，其坐标系与数学中的坐标系不一致，X轴一致，而Y轴相反，所以角度可能是负数（比如起始时往左飞行）
II、飞机朝向，斜率转换成角度时，从A到B，B相对于A的位置可在4个象限，所以角度可能存在负角度，与此同时，素材中飞机也有个角度，那么绘制时，注意矫正角度
III、飞机降落时角度可能不正确（如从上方降落）。实际应用时，由于飞机变小且速度较快，而且降落时调整了角度，所以此问题不明显。如要保证飞机降落角度一定不变，可以考虑三次贝塞尔曲线

Gdiplus绘制飞机

Gdiplus::Graphics g(dc);
Gdiplus::PointF center(cx / 2, cy / 2);  // cx、cy为素材宽度和高度
g.TranslateTransform(center.X, center.Y);  // 转换坐标系
g.RotateTransform(angle_);  // 旋转角度
g.SetInterpolationMode(Gdiplus::InterpolationModeHighQualityBilinear);
g.ScaleTransform(scale_, scale_);  // 缩放
g.TranslateTransform(-center.X, -center.Y);
g.DrawImage(plane_.get(), 0, 0);  // 绘制图片

免费领取验证码、内容安全、短信发送、直播点播体验包及云服务器等套餐

更多网易技术、产品、运营经验分享请访问网易云社区。

文章来源： 网易云社区

    原文作者：网易云社区
    原文地址: https://segmentfault.com/a/1190000017362631
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞