10步教你用C# GDI+实现T型速度曲线动画，比想象中简单！狂飙模式VS优雅模式，你的选择是？

于 2025-05-02 03:00:00 发布
阅读量1.2k 收藏 24
点赞数 31
分类专栏： C#乐园 文章标签： c# 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/z_344791576/article/details/147539666
版权

🔥关注墨瑾轩，带你探索编程的奥秘！🚀
🔥超萌技术攻略，轻松晋级编程高手🚀
🔥技术宝库已备好，就等你来挖掘🚀
🔥订阅墨瑾轩，智趣学习不孤单🚀
🔥即刻启航，编程之旅更有趣🚀

在这里插入图片描述在这里插入图片描述

** 10步实现T型速度曲线动画——从“菜鸟”到“大神”的完整攻略**

第一步：环境搭建——“魔法的准备材料”

问题：没有开发环境？就像没魔法杖的巫师！
解决方案：

  1. 安装Visual Studio（选“Windows Forms App (.NET Framework)”）。
  2. 新建项目，命名为TSpeedCurveAnimation。

代码示例：项目结构

// 1️⃣ 步骤1：在Form1.cs中添加全局变量
public partial class Form1 : Form
{
    private const int CanvasWidth = 800; // 画布宽度
    private const int CanvasHeight = 600; // 画布高度
    private List<PointF> pathPoints = new List<PointF>(); // 路径点集合
    private Timer animationTimer = new Timer(); // 动画定时器
    private float currentPosition = 0f; // 当前位置
    private float currentVelocity = 0f; // 当前速度
    private float currentAcceleration = 0f; // 当前加速度
    private float totalTime = 5000f; // 总动画时间（毫秒）
    private float maxSpeed = 100f; // 最大速度
    private float maxAcceleration = 10f; // 最大加速度
}
第二步：绘制静态路径——“画出赛道”

问题：机器人没赛道？就像赛车没公路！
解决方案：用鼠标点击生成路径点，用贝塞尔曲线连接成平滑路径。

代码示例：鼠标交互与路径绘制

// 2️⃣ 步骤2：鼠标点击添加路径点
private void Form1_MouseClick(object sender, MouseEventArgs e)
{
    if (e.Button == MouseButtons.Left)
    {
        pathPoints.Add(e.Location); // 添加新点
        Invalidate(); // 触发重绘
    }
}

// 3️⃣ 步骤3：OnPaint绘制路径
protected override void OnPaint(PaintEventArgs e)
{
    base.OnPaint(e);
    Graphics g = e.Graphics;

    // 绘制路径点
    foreach (var point in pathPoints)
    {
        g.FillEllipse(Brushes.Red, point.X - 3, point.Y - 3, 6, 6);
    }

    // 至少需要4个点才能生成贝塞尔曲线
    if (pathPoints.Count >= 4)
    {
        using (Pen pen = new Pen(Color.Black, 2))
        {
            // 生成贝塞尔曲线
            PointF[] points = new PointF[4];
            Array.Copy(pathPoints.ToArray(), points, 4);
            g.DrawBezier(pen, points[0], points[1], points[2], points[3]);
        }
    }
}
第三步：T型速度算法——“狂飙模式的引擎”

问题：速度曲线像“坐过山车”？T型算法让你“稳如老狗”！
解决方案：

  1. 分阶段计算：匀加速 → 匀速 → 匀减速。
  2. 公式推导：
    • 加速时间：t1 = maxSpeed / maxAcceleration
    • 减速时间：t3 = maxSpeed / maxAcceleration
    • 匀速时间：t2 = (totalTime - t1 - t3) / 1000（单位秒转毫秒）

代码示例：T型速度计算

// 4️⃣ 步骤4：计算T型速度曲线
private void CalculateTProfile(float currentTime)
{
    float t1 = maxSpeed / maxAcceleration; // 加速时间（毫秒）
    float t3 = maxSpeed / maxAcceleration; // 减速时间（毫秒）
    float t2 = (totalTime - t1 - t3) / 1000; // 匀速时间（秒）

    if (currentTime <= t1)
    {
        currentAcceleration = maxAcceleration;
        currentVelocity = maxAcceleration * currentTime;
    }
    else if (currentTime <= t1 + t2 * 1000)
    {
        currentAcceleration = 0;
        currentVelocity = maxSpeed;
    }
    else
    {
        currentAcceleration = -maxAcceleration;
        currentVelocity = maxSpeed - maxAcceleration * (currentTime - t1 - t2 * 1000);
    }
}
第四步：动画定时器——“让时间飞起来”

问题：动画静止不动？定时器就是“时间魔法”！
解决方案：

  • 定时器触发：每毫秒更新一次位置。
  • 位置计算：currentPosition += currentVelocity * deltaTime。

代码示例：定时器控制动画

// 5️⃣ 步骤5：初始化动画参数
private void InitializeAnimation()
{
    currentPosition = 0f;
    currentVelocity = 0f;
    currentAcceleration = 0f;
    animationTimer.Interval = 1; // 每毫秒触发
    animationTimer.Tick += AnimationTimer_Tick;
}

// 6️⃣ 步骤6：定时器Tick事件
private void AnimationTimer_Tick(object sender, EventArgs e)
{
    float deltaTime = (float)animationTimer.Interval / 1000; // 时间差（秒）
    float currentTime = animationTimer.Interval * animationTimer.TickCount; // 当前时间

    CalculateTProfile(currentTime); // 计算当前速度/加速度
    currentPosition += currentVelocity * deltaTime; // 更新位置

    if (currentPosition >= CanvasWidth) // 到达终点停止
    {
        animationTimer.Stop();
    }
    else
    {
        Invalidate(); // 触发重绘
    }
}
第五步：绘制运动物体——“让小球狂飙”

问题：看不到运动物体？给小球“画个脸”！
解决方案：

  • 绘制小球：用Ellipse表示物体位置。
  • 跟随路径：根据currentPosition计算坐标。

代码示例：绘制运动轨迹

// 7️⃣ 步骤7：在OnPaint中绘制小球
protected override void OnPaint(PaintEventArgs e)
{
    base.OnPaint(e);
    Graphics g = e.Graphics;

    // 绘制路径点和路径（略，参考步骤3）

    // 绘制小球
    float ballRadius = 10f;
    float ballX = currentPosition; // X坐标随currentPosition变化
    float ballY = CanvasHeight / 2; // Y坐标固定在中间
    g.FillEllipse(Brushes.Blue, ballX - ballRadius, ballY - ballRadius, 
        ballRadius * 2, ballRadius * 2);

    // 绘制速度/加速度文本
    g.DrawString($"Velocity: {currentVelocity:F2}", 
        Font, Brushes.Red, new PointF(10, 10));
    g.DrawString($"Acceleration: {currentAcceleration:F2}", 
        Font, Brushes.Red, new PointF(10, 30));
}
第六步：启动与停止——“控制狂飙的开关”

问题：动画无法控制？按钮就是“启动/停止键”！
解决方案：

  • 按钮事件：点击“Start”启动动画，点击“Stop”暂停。

代码示例：按钮控制

// 8️⃣ 步骤8：在设计器中添加两个按钮（Start/Stop）
private void StartButton_Click(object sender, EventArgs e)
{
    InitializeAnimation();
    animationTimer.Start();
}

private void StopButton_Click(object sender, EventArgs e)
{
    animationTimer.Stop();
}
第七步：性能优化——“让动画更流畅”

问题：动画卡成PPT？双缓冲是“流畅剂”！
解决方案：

  • 启用双缓冲：避免闪烁。
  • 减少重绘：只在必要时重绘（如定时器触发时）。

代码示例：双缓冲设置

// 9️⃣ 步骤9：在Form1构造函数中启用双缓冲
public Form1()
{
    InitializeComponent();
    this.DoubleBuffered = true; // 🔥 关键！开启双缓冲
}
第八步：测试与调试——“狂飙测试时间”

问题：小球不移动？检查参数是否“配置正确”！
解决方案：

  1. 添加路径点：至少4个点生成贝塞尔曲线。
  2. 调整参数：
    • totalTime：总动画时间（毫秒）。
    • maxSpeed：最大速度（单位可自定义）。

代码示例：调试技巧

// 10️⃣ 步骤10：在Form1_Load中初始化参数
private void Form1_Load(object sender, EventArgs e)
{
    // 设置默认参数
    maxSpeed = 100f; // 每秒移动100像素
    maxAcceleration = 10f; // 加速度10像素/秒²
    totalTime = 5000f; // 5秒完成动画
}

完整代码整合：一个能跑的T型动画Demo

using System.Drawing;
using System.Windows.Forms;

public partial class Form1 : Form
{
    private const int CanvasWidth = 800;
    private const int CanvasHeight = 600;
    private List<PointF> pathPoints = new List<PointF>();
    private Timer animationTimer = new Timer();
    private float currentPosition = 0f;
    private float currentVelocity = 0f;
    private float currentAcceleration = 0f;
    private float totalTime = 5000f;
    private float maxSpeed = 100f;
    private float maxAcceleration = 10f;

    public Form1()
    {
        InitializeComponent();
        this.DoubleBuffered = true;
        this.Size = new Size(CanvasWidth, CanvasHeight);
    }

    private void Form1_MouseClick(object sender, MouseEventArgs e)
    {
        if (e.Button == MouseButtons.Left)
        {
            pathPoints.Add(e.Location);
            Invalidate();
        }
    }

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

        // 绘制路径点
        foreach (var point in pathPoints)
        {
            g.FillEllipse(Brushes.Red, point.X - 3, point.Y - 3, 6, 6);
        }

        // 绘制贝塞尔曲线
        if (pathPoints.Count >= 4)
        {
            PointF[] points = new PointF[4];
            Array.Copy(pathPoints.ToArray(), points, 4);
            g.DrawBezier(new Pen(Color.Black, 2), points);
        }

        // 绘制小球
        float ballRadius = 10f;
        g.FillEllipse(Brushes.Blue, 
            currentPosition - ballRadius, CanvasHeight / 2 - ballRadius, 
            ballRadius * 2, ballRadius * 2);

        // 显示速度/加速度
        g.DrawString($"Velocity: {currentVelocity:F2}", 
            Font, Brushes.Red, new PointF(10, 10));
    }

    private void InitializeAnimation()
    {
        currentPosition = 0f;
        currentVelocity = 0f;
        currentAcceleration = 0f;
        animationTimer.Interval = 1;
        animationTimer.Tick += AnimationTimer_Tick;
    }

    private void AnimationTimer_Tick(object sender, EventArgs e)
    {
        float deltaTime = (float)animationTimer.Interval / 1000;
        float currentTime = animationTimer.TickCount;

        // 计算T型速度曲线
        float t1 = maxSpeed / maxAcceleration;
        float t3 = maxSpeed / maxAcceleration;
        float t2 = (totalTime - t1 - t3) / 1000;

        if (currentTime <= t1)
        {
            currentAcceleration = maxAcceleration;
            currentVelocity = maxAcceleration * currentTime;
        }
        else if (currentTime <= t1 + t2 * 1000)
        {
            currentAcceleration = 0;
            currentVelocity = maxSpeed;
        }
        else
        {
            currentAcceleration = -maxAcceleration;
            currentVelocity = maxSpeed - maxAcceleration * (currentTime - t1 - t2 * 1000);
        }

        currentPosition += currentVelocity * deltaTime;

        if (currentPosition >= CanvasWidth)
        {
            animationTimer.Stop();
        }
        else
        {
            Invalidate();
        }
    }

    private void StartButton_Click(object sender, EventArgs e)
    {
        InitializeAnimation();
        animationTimer.Start();
    }

    private void StopButton_Click(object sender, EventArgs e)
    {
        animationTimer.Stop();
    }
}

常见问题急救箱

Q：小球直接飞出屏幕？
A：检查totalTime是否过短，或maxSpeed是否过高。

Q：贝塞尔曲线不平滑？
A：确保路径点数量≥4，并均匀分布。

Q：速度显示为0？
A：可能maxAcceleration为0，或totalTime未设置。

Q：动画卡顿？
A：开启双缓冲（this.DoubleBuffered = true）或降低Timer.Interval。

** T型速度曲线的“狂飙口诀”**

通过以上10步，你的C#动画已经从“菜鸟”变身“狂飙大师”！记住：

  1. 环境搭建是“魔法的基石”：Visual Studio + 双缓冲，流畅不卡顿。
  2. 路径绘制是“赛道的蓝图”：鼠标点击生成贝塞尔曲线，让小球有路可走。
  3. T型算法是“引擎的核心”：分阶段加速/减速，稳如老狗不飘。
  4. 定时器是“时间的魔法”：毫秒级更新，让动画“活”起来。
  5. 性能优化是“流畅的秘诀”：双缓冲+减少重绘，告别卡顿。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

墨瑾轩

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值