【花雕学编程】Arduino动手做（199）---七种圆形动画效果

实验场景图 动态图

代码说明
在 ESP32 + ST7920 LCD 上运行，并展示 动态圆形动画，主要包含以下 七种图形变化效果：
1、优化与改进
✅ 使用 drawCircle() 代替 drawXBMP()，显示圆形图标
✅ 通过 positions[] 数组模拟旋转，让圆形动起来
✅ 调整 delay() 使动画流畅，不会闪烁过快
✅ 适用于 ESP32 + ST7920 LCD，形成完整动态图形演示
2、核心功能
1️⃣ 圆形移动 → 圆形从左向右滑动
2️⃣ 圆形放大缩小 → 圆形逐渐变大，然后变小
3️⃣ 圆形旋转 → 圆形围绕固定点旋转（通过坐标模拟）
4️⃣ 圆形闪烁 → 圆形每秒出现和消失
5️⃣ 圆形跳动 → 圆形上下弹跳，模拟重力效果
6️⃣ 圆形淡入淡出 → 圆形亮度逐渐变化，模拟渐隐效果
7️⃣ 旋转+移动的圆形 → 圆形沿 特定轨迹 移动，同时旋转
3、代码关键点
✅ U8g2 库 用于控制 ST7920 LCD 并绘制圆形
✅ drawCircle() 取代 drawXBMP()，用于显示 圆形
✅ positions[] 数组 控制旋转坐标，实现旋转效果
✅ setContrast() 控制亮度，实现 渐隐渐显
✅ clearBuffer() → sendBuffer() 确保 LCD 显示流畅，避免闪烁。

【Arduino】168种传感器模块系列实验（资料代码+仿真编程+图形编程）
实验一百九十九：蓝屏LCD12864液晶屏 带中文字库 带背光12864-5V 并口串口
项目之十三：ESP32 ST7920屏幕之动态圆形动画的七种图形变化效果
实验开源代码
[code]/*
【Arduino】168种传感器模块系列实验（资料代码+仿真编程+图形编程）
实验一百九十九：蓝屏LCD12864液晶屏 带中文字库 带背光12864-5V 并口串口
项目之十三：ESP32 ST7920屏幕之动态圆形动画的七种图形变化效果
*/
#include
#include
#include
// **定义 LCD 连接引脚**
#define LCD_CLOCK 18 // SPI 时钟
#define LCD_DATA 23 // SPI 数据
#define LCD_CS 16 // 片选 (CS)
#define LCD_RESET 17 // 复位 (Reset)
// **使用 U8g2 软件 SPI 适配 ESP32**
U8G2_ST7920_128X64_F_SW_SPI u8g2(U8G2_R0, LCD_CLOCK, LCD_DATA, LCD_CS, LCD_RESET);
// **初始化 LCD**
void setup() {
Serial.begin(115200);
u8g2.begin();
u8g2.setPowerSave(0);
u8g2.setContrast(200);
}
// **1. 圆形移动动画**
void drawMovingCircle() {
for (int x = 0; x <= 128; x += 4) {
u8g2.clearBuffer();
u8g2.drawCircle(x, 32, 8, U8G2_DRAW_ALL);
u8g2.sendBuffer();
delay(100);
}
}
// **2. 圆形放大缩小动画**
void drawScalingCircle() {
for (int size = 4; size <= 16; size += 2) {
u8g2.clearBuffer();
u8g2.drawCircle(64, 32, size, U8G2_DRAW_ALL);
u8g2.sendBuffer();
delay(100);
}
}
// **3. 圆形旋转动画（模拟旋转效果）**
void drawRotatingCircle() {
const int positions[][2] = {{64, 24}, {72, 32}, {64, 40}, {56, 32}};
for (int i = 0; i < 4; i++) {
u8g2.clearBuffer();
u8g2.drawCircle(positions[i][0], positions[i][1], 8, U8G2_DRAW_ALL);
u8g2.sendBuffer();
delay(300);
}
}
// **4. 圆形闪烁动画**
void drawBlinkingCircle() {
for (int i = 0; i < 10; i++) {
u8g2.clearBuffer();
if (i % 2 == 0) {
u8g2.drawCircle(64, 32, 8, U8G2_DRAW_ALL);
}
u8g2.sendBuffer();
delay(500);
}
}
// **5. 圆形跳动动画**
void drawBouncingCircle() {
for (int y = 32; y >= 16; y -= 2) {
u8g2.clearBuffer();
u8g2.drawCircle(64, y, 8, U8G2_DRAW_ALL);
u8g2.sendBuffer();
delay(100);
}
for (int y = 16; y <= 32; y += 2) {
u8g2.clearBuffer();
u8g2.drawCircle(64, y, 8, U8G2_DRAW_ALL);
u8g2.sendBuffer();
delay(100);
}
}
// **6. 圆形淡入淡出动画**
void drawFadingCircle() {
for (int contrast = 0; contrast <= 255; contrast += 25) {
u8g2.setContrast(contrast);
u8g2.clearBuffer();
u8g2.drawCircle(64, 32, 8, U8G2_DRAW_ALL);
u8g2.sendBuffer();
delay(100);
}
}
// **7. 旋转+移动的圆形动画**
void drawRotatingMovingCircle() {
const int positions[][2] = {{0, 32}, {32, 24}, {64, 40}, {96, 32}, {128, 24}};
for (int i = 0; i < 5; i++) {
u8g2.clearBuffer();
u8g2.drawCircle(positions[i][0], positions[i][1], 8, U8G2_DRAW_ALL);
u8g2.sendBuffer();
delay(100);
}
}
// **执行所有动画**
void loop() {
drawMovingCircle(); // 圆形移动
drawScalingCircle(); // 圆形放大缩小
drawRotatingCircle(); // 圆形旋转
drawBlinkingCircle(); // 圆形闪烁
drawBouncingCircle(); // 圆形跳动
drawFadingCircle(); // 圆形淡入淡出
drawRotatingMovingCircle();// 旋转+移动的圆形
}[/code]