项目开发中的贝塞尔曲线

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

邮箱大师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为固定的总时间

2. 飞机朝向

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

3. 飞机大小

飞机大小变化没有严格要求，可采起线性变化，在总时间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);  // 绘制图片复制代码

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

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

相关文章：
【推荐】 什么是 DDoS 攻击？
【推荐】 Foxman,基于微核架构的Mock解决方案