C#动画黑科技：GDI+与T速度曲线的魔法碰撞-CSDN博客

在C#的图形编程世界里，GDI+ 是一个老朋友，而 T速度曲线（Time-based Speed Curve）则是动画设计的“灵魂”。当这两者相遇，会擦出怎样的火花？

想象一下：你点击鼠标添加几个控制点，一个物体就能沿着这些点“优雅地滑行”，速度忽快忽慢，仿佛在跳一支精心编排的舞蹈。这就是 T速度曲线规划 的魅力！

但问题来了：怎么用GDI+实现这种动画？

需要处理鼠标交互、动态计算路径、控制动画速度……
还要避免“抖动”和“卡顿”？

本文将带你从零开始，用 C# + GDI+ 实现一个支持 T速度曲线规划 的动画系统。代码详细到每一行注释，原理深入到每一帧逻辑，让你看完就能上手！

一、核心概念：T速度曲线规划

T速度曲线 是一种基于时间函数的动画速度控制方法。它通过定义 时间与位置的映射关系，让动画的运动更自然。

🧠 举个栗子：

匀速：物体从A到B，速度恒定。
加速：物体从A出发，越来越快。
先加速后减速：物体像弹簧一样弹跳。

🧩 数学原理：

我们用 多项式插值 来实现T速度曲线。假设物体从点 $ s_0 $ 移动到 $ s_T $，在时间 $ t \in [0, T] $ 内，其位置 $ s(t) $ 满足：
$s_0 + (s_T - s_0) \cdot \frac{t^2}{T^2}$
这个公式会让我们看到 先慢后快 的效果。

二、环境搭建与项目结构

🛠️ 工具准备：

Visual Studio（2019+）
.NET Framework 4.7+
GDI+ 支持（默认已集成）

📁 项目结构：

TSpeedAnimation/
├── MainForm.cs        // 主窗口逻辑
├── Animation.cs       // 动画核心逻辑
├── Polynomial.cs      // 多项式计算
└── Resources/         // 图片资源

三、代码实现：从零到一

1. 初始化窗口与控件

// MainForm.cs
public class MainForm : Form
{
    private List<PointF> controlPoints = new List<PointF>();  // 控制点集合
    private float animationTime = 0f;                         // 当前动画时间
    private float TotalTime = 5f;                             // 总动画时间
    private Timer animationTimer;

    public MainForm()
    {
        this.Text = "T速度曲线动画";
        this.Size = new Size(800, 600);
        this.DoubleBuffered = true;  // 减少重绘抖动

        // 初始化定时器
        animationTimer = new Timer();
        animationTimer.Interval = 16;  // ~60 FPS
        animationTimer.Tick += AnimationTimer_Tick;
    }

    protected override void OnPaint(PaintEventArgs e)
    {
        base.OnPaint(e);
        Graphics g = e.Graphics;

        // 绘制控制点
        foreach (var point in controlPoints)
        {
            g.FillEllipse(Brushes.Red, point.X - 5, point.Y - 5, 10, 10);
        }

        // 如果至少有两个点，计算并绘制轨迹
        if (controlPoints.Count >= 2)
        {
            PointF startPoint = controlPoints[0];
            PointF endPoint = controlPoints[1];

            // 计算当前位置
            (double sX, _, _) = Polynomial.Calculate(animationTime, TotalTime, s0: startPoint.X, sT: endPoint.X);
            (double sY, _, _) = Polynomial.Calculate(animationTime, TotalTime, s0: startPoint.Y, sT: endPoint.Y);

            // 绘制运动点
            g.FillEllipse(Brushes.Blue, (float)sX - 5, (float)sY - 5, 10, 10);

            // 绘制轨迹路径
            float resolution = 0.05f;  // 时间步长
            PointF prevPoint = new PointF((float)sX, (float)sY);

            for (float t = 0; t <= TotalTime; t += resolution)
            {
                (double px, _, _) = Polynomial.Calculate(t, TotalTime, s0: startPoint.X, sT: endPoint.X);
                (double py, _, _) = Polynomial.Calculate(t, TotalTime, s0: startPoint.Y, sT: endPoint.Y);

                PointF currentPoint = new PointF((float)px, (float)py);
                g.DrawLine(Pens.Green, prevPoint, currentPoint);
                prevPoint = currentPoint;
            }
        }
    }

    private void AnimationTimer_Tick(object sender, EventArgs e)
    {
        animationTime += animationTimer.Interval / 1000f;  // 更新时间

        if (animationTime > TotalTime)
        {
            animationTime = TotalTime;  // 限制时间范围
            animationTimer.Stop();      // 停止动画
        }

        this.Invalidate();  // 触发重绘
    }

    protected override void OnMouseDown(MouseEventArgs e)
    {
        base.OnMouseDown(e);
        controlPoints.Add(new PointF(e.X, e.Y));  // 添加控制点
        animationTimer.Start();                   // 启动动画
    }
}

📌 注释解析：

DoubleBuffered = true：启用双缓冲，减少画面闪烁。
Timer.Interval = 16：约 60 FPS（1000ms / 16 ≈ 60）。
OnPaint：负责绘制所有图形（包括控制点和轨迹）。
OnMouseDown：捕获鼠标点击，添加控制点并启动动画。

2. 多项式计算类

// Polynomial.cs
public static class Polynomial
{
    /// <summary>
    /// 计算时间 t 对应的位置 s(t)，并返回速度和加速度
    /// </summary>
    /// <param name="t">当前时间</param>
    /// <param name="T">总时间</param>
    /// <param name="s0">初始位置</param>
    /// <param name="sT">目标位置</param>
    /// <returns>(位置, 速度, 加速度)</returns>
    public static (double s, double v, double a) Calculate(double t, double T, double s0, double sT)
    {
        double tRatio = t / T;

        // 位置计算：s(t) = s0 + (sT - s0) * t^2 / T^2
        double s = s0 + (sT - s0) * Math.Pow(tRatio, 2);

        // 速度计算：v(t) = 2 * (sT - s0) * t / T^2
        double v = 2 * (sT - s0) * tRatio / T;

        // 加速度计算：a(t) = 2 * (sT - s0) / T^2
        double a = 2 * (sT - s0) / (T * T);

        return (s, v, a);
    }
}

📌 注释解析：

s(t)：位置函数，控制物体运动轨迹。
v(t) 和 a(t)：速度和加速度，可用于调试或复杂动画逻辑。

四、进阶优化：防抖动与动态路径

1. 防抖动技巧

GDI+ 重绘时容易出现 画面撕裂，解决方案：

// 在 MainForm 构造函数中
this.SetStyle(ControlStyles.OptimizedDoubleBuffer, true);
this.SetStyle(ControlStyles.AllPaintingInWmPaint, true);

2. 动态路径规划

如果控制点多于两个，可以通过 分段插值 实现复杂路径：

private PointF GetCurrentPosition(float t)
{
    if (controlPoints.Count < 2 || t <= 0) return controlPoints[0];
    if (t >= 1) return controlPoints[controlPoints.Count - 1];

    int segmentIndex = (int)(controlPoints.Count - 1) * t;
    PointF startPoint = controlPoints[segmentIndex];
    PointF endPoint = controlPoints[segmentIndex + 1];

    float localT = t - segmentIndex / (controlPoints.Count - 1);
    return Lerp(startPoint, endPoint, localT);
}

private PointF Lerp(PointF start, PointF end, float t)
{
    return new PointF(
        start.X + (end.X - start.X) * t,
        start.Y + (end.Y - start.Y) * t
    );
}