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

  【Arduino】168种传感器模块系列实验（资料代码+仿真编程+图形编程）
  实验一百九十九：蓝屏LCD12864液晶屏 带中文字库 带背光12864-5V 并口串口
  项目之十三：ESP32 ST7920屏幕之动态圆形动画的七种图形变化效果

实验开源代码

/*
  【Arduino】168种传感器模块系列实验（资料代码+仿真编程+图形编程）
  实验一百九十九：蓝屏LCD12864液晶屏 带中文字库 带背光12864-5V 并口串口
  项目之十三：ESP32 ST7920屏幕之动态圆形动画的七种图形变化效果
*/

#include <Arduino.h>
#include <U8g2lib.h>
#include <SPI.h>

// **定义 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();// 旋转+移动的圆形
}
复制代码

代码说明
在 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 显示流畅，避免闪烁。

实验场景图  动态图