动画基础概念：帧率、刷新率与视觉暂留

各位好，欢迎来到《嵌入式GUI动画刷新入门》的第一章。我是你们这门课的老朋友，一个在嵌入式GUI领域摸爬滚打多年的工程师。

咱们开门见山。做嵌入式GUI动画，你最先要搞清楚的，就是三个核心概念：帧率（FPS）、刷新率（Hz），以及那个让动画能“动”起来的视觉暂留原理。这三个东西搞不明白，后面写再多代码也是白搭。

1.1 帧率（FPS）与刷新率（Hz）的区别

这两个词经常被混用，但它们的角色完全不同。我见过不少新手把FPS和Hz划等号，结果调试时怎么都找不到问题根源。

概念	英文全称	定义	谁说了算
帧率	Frames Per Second	图形处理器每秒能生成多少帧画面	软件/GPU性能
刷新率	Hertz	显示面板每秒能刷新多少次画面	硬件/屏幕驱动

帧率，说白了就是你的MCU或MPU“画”得快不快。你写了一个动画循环，每秒钟能渲染出30帧，那FPS就是30。它取决于你的算法效率、内存带宽、CPU/GPU负载。

刷新率，是屏幕本身“闪”得快不快。一块60Hz的屏幕，每秒固定刷新60次，不管你有没有新画面送来，它都按这个节奏刷新。这是硬件决定的，你改不了。

举个例子。我做过一个智能手表项目，屏幕是60Hz的。我一开始把动画帧率跑到了90FPS。你猜怎么着？画面反而更卡了。因为屏幕每16.6ms才刷新一次，而GPU每11ms就送一帧过来，很多帧被丢弃或覆盖了。后来我把帧率锁定在60FPS，画面反而丝滑了。

1.2 视觉暂留原理

为什么连续播放静态图片会感觉是“动”的？这就要说到视觉暂留了。

人眼有个特性：当一幅画面消失后，它的影像会在视网膜上停留大约1/24秒（约40ms）。如果下一幅画面在这个时间内出现，大脑就会把它们“拼接”成连续的运动。

嗯，这里要注意：这个原理是动画的生理学基础。电影24帧/秒能流畅，就是这个原因。但在嵌入式GUI里，我们通常需要更高的帧率——30FPS或60FPS——因为屏幕尺寸小、像素密度高，人眼对闪烁更敏感。

1.3 嵌入式GUI中的动画分类

搞清楚了基础概念，咱们来看看实际开发中会遇到哪些动画类型。我个人习惯把嵌入式GUI动画分成三类：逐帧动画、补间动画和属性动画。

1.3.1 逐帧动画

这是最原始、最直接的方式。说白了，就是准备好一组静态图片（帧），然后按顺序快速切换播放。就像小时候翻页动画书一样。

• 优点：实现简单，效果可控，适合复杂形状变化（比如人物行走、火焰燃烧）。
• 缺点：占用存储空间大，每帧都是完整图片；帧率固定，不够灵活。
• 适用场景：开机动画、加载等待、图标状态切换。

// 逐帧动画伪代码示例
typedef struct {
    uint8_t *frames[12];  // 12帧图片数据
    uint8_t current_frame;
    uint32_t interval_ms; // 每帧停留时间
} FrameAnimation;

void FrameAnimation_Play(FrameAnimation *anim) {
    while(1) {
        LCD_DisplayImage(anim->frames[anim->current_frame]);
        anim->current_frame = (anim->current_frame + 1) % 12;
        Delay_ms(anim->interval_ms);
    }
}

1.3.2 补间动画

补间动画就聪明多了。你只需要定义动画的起始状态和结束状态，中间的过程由系统自动计算生成。比如一个按钮从位置(0,0)移动到(100,0)，你只需要告诉系统起点和终点，中间每一帧的位置由插值算法算出来。

• 优点：节省存储空间，动画平滑，易于调整速度和曲线。
• 缺点：只适合数值型属性的变化（位置、大小、透明度等），复杂形状变化不好做。
• 适用场景：界面切换、滑动列表、缩放效果。

// 补间动画伪代码：线性插值
int32_t Lerp(int32_t start, int32_t end, float t) {
    // t 范围 0.0 ~ 1.0
    return start + (int32_t)((end - start) * t);
}

// 使用示例：从x=0移动到x=200，耗时1000ms
void TweenAnimation_Play() {
    uint32_t start_time = GetTick();
    uint32_t duration = 1000; // 毫秒
    
    while(1) {
        uint32_t elapsed = GetTick() - start_time;
        if(elapsed >= duration) break;
        
        float t = (float)elapsed / duration; // 0.0 ~ 1.0
        int32_t x = Lerp(0, 200, t);
        
        Widget_SetPosition(button, x, 50);
        Delay_ms(16); // 约60FPS
    }
    Widget_SetPosition(button, 200, 50); // 确保终点准确
}

1.3.3 属性动画

属性动画是补间动画的升级版。它不直接操作坐标，而是操作对象的属性。比如一个控件的“透明度”、“旋转角度”、“缩放比例”等。属性动画框架通常还支持插值器（Interpolator），让你能控制动画的节奏——是匀速、加速、减速还是弹性效果。

• 优点：灵活度高，可组合多个属性同时动画，支持缓动函数。
• 缺点：需要一定的框架支持，对MCU性能有要求。
• 适用场景：复杂的UI交互反馈、3D效果模拟、物理模拟。

// 属性动画伪代码：使用缓动函数
float EaseOutCubic(float t) {
    // 先快后慢的缓出效果
    return 1.0f - pow(1.0f - t, 3);
}

void PropertyAnimation_Example() {
    // 同时动画两个属性：位置和透明度
    Animation *anim = Animation_Create();
    Animation_AddProperty(anim, &widget.x, 0, 200, 1000, EaseOutCubic);
    Animation_AddProperty(anim, &widget.alpha, 255, 0, 1000, EaseOutCubic);
    Animation_Start(anim);
}

1.4 知识体系总览

为了让你对本章内容有个整体印象，我画了一张结构图。它把帧率、刷新率、视觉暂留和三种动画类型串在了一起。

这张图把本章的知识点串起来了。你从“动画基础”出发，先理解帧率、刷新率和视觉暂留这三个基石，然后根据项目需求选择逐帧、补间或属性动画。最后，所有选择都要回到性能控制这个核心上。