【花雕学编程】Arduino动手做(249)---ESP32 1.28寸 TFT GC9A01屏之不断变化颜色和尺寸的动态矩形环动画
2025-04-1657
AI 快速预览详细
本文介绍了如何使用ESP32和1.28寸TFT GC9A01屏实现动态矩形环动画。通过具体的代码示例,展示了如何初始化屏幕、随机生成矩形环,并控制动画刷新速率。最终效果是屏幕上显示多个动态矩形环,颜色不断变化,形成流畅的几何动效。适合初学者学习和实践。






【Arduino】189种传感器模块系列实验(资料代码+仿真编程+图形编程)
实验二百四十九:1.28寸圆形彩色TFT显示屏 高清IPS 模块 240*240 SPI接口GC9A01驱动
项目之一百零一:GC9A01园屏之不断变化颜色和尺寸的动态矩形环动画
实验开源代码
代码
/*
【Arduino】189种传感器模块系列实验(资料代码+仿真编程+图形编程)
实验二百四十九:1.28寸圆形彩色TFT显示屏 高清IPS 模块 240*240 SPI接口GC9A01驱动
项目之一百零一:GC9A01园屏之不断变化颜色和尺寸的动态矩形环动画
*/
// GC9A01---------- ESP32
// RST ------------ NC(复位引脚,此处未连接)
// CS ------------- D4(片选引脚,连接到ESP32的D4引脚)
// DC ------------- D2(数据/命令选择引脚,连接到ESP32的D2引脚)
// SDA ------------ D23 (green)(主数据输出引脚,连接到ESP32的D23引脚,绿色线)
// SCL ------------ D18 (yellow)(时钟信号引脚,连接到ESP32的D18引脚,黄色线)
// GND ------------ GND(接地引脚,连接到ESP32的接地端)
// VCC -------------3V3(电源引脚,连接到ESP32的3.3V电源)
#include "SPI.h"
#include "Adafruit_GFX.h"
#include "Adafruit_GC9A01A.h"
#define TFT_CS 4
#define TFT_DC 2
#define TFT_RST -1
Adafruit_GC9A01A tft = Adafruit_GC9A01A(TFT_CS, TFT_DC, TFT_RST);
#define SCREEN_WIDTH 240
#define SCREEN_HEIGHT 240
#define NUM_RINGS 8 // **矩形环的数量**
#define MAX_SIZE 100 // **矩形环最大尺寸**
#define MIN_SIZE 30 // **矩形环最小尺寸**
#define COLOR_VARIATION 5 // **颜色变化速度**
uint16_t colors[] = {GC9A01A_RED, GC9A01A_GREEN, GC9A01A_BLUE, GC9A01A_YELLOW, GC9A01A_MAGENTA, GC9A01A_CYAN, GC9A01A_WHITE};
int numColors = sizeof(colors) / sizeof(colors[0]);
void setup() {
Serial.begin(115200);
tft.begin();
tft.setRotation(2);
}
void loop() {
tft.fillScreen(GC9A01A_BLACK);
for (int i = 0; i < NUM_RINGS; i++) {
int x = random(20, SCREEN_WIDTH - 20);
int y = random(20, SCREEN_HEIGHT - 20);
int outerSize = random(MIN_SIZE, MAX_SIZE);
int innerSize = random(outerSize / 2, outerSize - 1);
uint16_t color = colors[random(0, numColors)];
// **绘制外层矩形**
tft.fillRect(x, y, outerSize, outerSize, color);
// **绘制内层矩形(形成矩形环效果)**
tft.fillRect(x + outerSize / 4, y + outerSize / 4, innerSize / 2, innerSize / 2, GC9A01A_BLACK);
}
delay(200);
}这段代码的核心功能是 动态矩形环动画,它使用不同大小的矩形形成环状结构,并且 不断变化颜色和尺寸,让整个屏幕充满动态视觉效果。
代码结构
1️⃣ 初始化屏幕
使用 Adafruit_GC9A01A 控制 TFT 显示屏,设定黑色背景。
2️⃣ 随机矩形环
random(MIN_SIZE, MAX_SIZE) 让矩形环的 尺寸变化不固定。
tft.fillRect() 用随机颜色填充矩形,形成 外层矩形环。
tft.fillRect() 在矩形中心 绘制黑色小矩形,形成环状结构。
3️⃣ 持续循环
delay(200); 控制动画刷新速率,使视觉流畅。
每次循环生成 不同位置、颜色、大小 的矩形环,使画面不断变化。
最终效果
🟥 屏幕显示多个动态矩形环,模拟几何动效 🌈 颜色不断变化,增强视觉层次 ⚡ 流畅动画,让矩形环动态旋转扩展
实验场景图 动态图








