用STM32F103和u8g2库，给你的0.96寸OLED做个带丝滑动画的菜单（附完整工程）

STM32F103与u8g2库打造0.96寸OLED动画菜单系统实战

在嵌入式设备开发中，用户界面的设计往往决定了产品的用户体验。一个流畅、美观的菜单系统不仅能提升操作效率，还能为产品增添专业感。本文将带你从零开始，基于STM32F103系列MCU和u8g2图形库，构建一个支持多级导航和丝滑动画效果的OLED菜单系统。

1. 硬件准备与环境搭建

1.1 所需硬件组件

• 主控芯片：STM32F103C8T6（Blue Pill开发板）
• 显示模块：0.96寸I2C接口OLED（SSD1306驱动）
• 输入设备：三个机械按键（确认/左/右）
• 连接方式：
  • SCL → PB6
  • SDA → PB7
  • VCC → 3.3V
  • GND → GND

1.2 软件工具链

# 开发环境配置示例 1. STM32CubeMX v6.5.0 2. Keil MDK v5.32 3. u8g2库最新版（需手动移植） 4. STM32 HAL库 v1.8.0

1.3 u8g2库移植关键步骤

1. 从官方仓库下载u8g2源码
2. 在CubeMX中启用I2C外设
3. 实现硬件抽象层(HAL)的适配函数：

// I2C写函数示例 uint8_t u8x8_byte_hw_i2c(u8x8_t *u8x8, uint8_t msg, uint8_t arg_int, void *arg_ptr) { switch(msg) { case U8X8_MSG_BYTE_SEND: HAL_I2C_Master_Transmit(&hi2c1, OLED_I2C_ADDR, arg_ptr, arg_int, 100); break; case U8X8_MSG_BYTE_INIT: // 初始化代码 break; default: return 0; } return 1; }

2. 菜单系统架构设计

2.1 状态机模型

采用有限状态机(FSM)管理菜单层级：

stateDiagram-v2 [*] --> 主界面 主界面 --> 一级菜单: 确认键 一级菜单 --> 二级菜单: 确认键 二级菜单 --> 一级菜单: 返回键 一级菜单 --> 主界面: Home键

2.2 数据结构定义

typedef struct { char *title; // 菜单项标题 uint8_t *icon; // 32x32像素图标数据 MenuItem *children; // 子菜单数组 uint8_t childCount; // 子菜单数量 void (*action)(void); // 点击回调函数 } MenuItem; // 示例菜单结构 const MenuItem mainMenu[] = { {"电压保护", gImage_V_32x32, voltageItems, 3, NULL}, {"电流保护", gImage_A_32x32, currentItems, 2, NULL}, {"系统设置", gImage_setting_32x32, systemItems, 4, NULL} };

2.3 动画效果实现原理

3. 核心代码实现

3.1 动画引擎关键函数

// 线性插值动画 void animate_slide(uint8_t direction) { int16_t start_x = (direction == LEFT) ? -128 : 128; int16_t target_x = 0; float progress = 0.0f; while(progress < 1.0f) { int16_t current_x = start_x + (target_x - start_x) * easeOutQuad(progress); draw_menu_at_position(current_x); progress += 0.05f; HAL_Delay(16); // 60FPS } } // 缓动函数 float easeOutQuad(float t) { return 1 - (1 - t) * (1 - t); }

3.2 多级菜单导航

void handle_navigation(uint8_t key) { static uint8_t current_level = 0; static MenuStack stack[MENU_DEPTH]; switch(key) { case KEY_OK: if(current_level < MENU_DEPTH-1) { stack[current_level+1] = get_child_menu(stack[current_level]); current_level++; animate_enter(); } break; case KEY_BACK: if(current_level > 0) { current_level--; animate_exit(); } break; } update_display(); }

3.3 渲染优化技巧

1. 双缓冲机制：

uint8_t buffer1[1024]; // 前缓冲区 uint8_t buffer2[1024]; // 后缓冲区 void swap_buffers() { memcpy(buffer1, buffer2, sizeof(buffer1)); u8g2_SendBuffer(&u8g2); }

2. 局部刷新：

void partial_update(uint8_t x, uint8_t y, uint8_t w, uint8_t h) { u8g2_SetClipWindow(&u8g2, x, y, x+w, y+h); u8g2_SendBuffer(&u8g2); u8g2_SetMaxClipWindow(&u8g2); }

4. 高级效果实现

4.1 3D透视变换

通过仿射变换实现伪3D效果：

void apply_perspective(int16_t x, int16_t y, int16_t *out_x, int16_t *out_y) { float scale = 1.0 - (y / 64.0) * 0.3; *out_x = x * scale + 32; *out_y = y * scale * 0.8 + 16; }

4.2 粒子系统菜单

为高级选项添加粒子效果：

typedef struct { int16_t x, y; int16_t vx, vy; uint8_t life; } Particle; void update_particles(Particle *particles, uint8_t count) { for(int i=0; i<count; i++) { particles[i].x += particles[i].vx; particles[i].y += particles[i].vy; particles[i].life--; if(particles[i].life == 0) { respawn_particle(&particles[i]); } } }

4.3 性能优化对比表

5. 工程实践与调试

5.1 常见问题解决

1. I2C通信失败：

   • 检查上拉电阻(通常4.7KΩ)
   • 确认地址是否正确(通常0x78或0x7A)
   • 降低时钟速度(建议≤400kHz)

2. 动画卡顿：

// 在stm32f1xx_hal_conf.h中调整： #define HAL_I2C_MODULE_ENABLED #define I2C_TIMEOUT 50 // 减少超时时间

3. 内存不足：
   • 使用arm-none-eabi-size工具分析内存占用
   • 启用编译器优化(-O2或-Os)
   • 考虑使用外部SPI Flash存储图标

5.2 扩展功能实现

触摸支持：

void handle_touch(uint16_t x, uint16_t y) { MenuItem *item = get_item_at_position(x, y); if(item) { animate_tap(x, y); if(item->children) { enter_submenu(item); } else if(item->action) { item->action(); } } }

多语言支持：

const char *strings_en[] = {"Voltage", "Current", "Settings"}; const char *strings_zh[] = {"电压", "电流", "设置"}; const char *get_string(uint8_t id, uint8_t lang) { return (lang == LANG_ZH) ? strings_zh[id] : strings_en[id]; }

通过本文介绍的技术方案，开发者可以快速构建一个具有专业级动画效果的嵌入式菜单系统。实际项目中，建议根据具体硬件性能调整动画参数，在流畅度和资源消耗之间取得平衡。完整工程代码已包含所有动画实现和硬件驱动，可直接用于商业产品开发。