【花雕学编程】Arduino TFT 之单眼缩放动画

在这里插入图片描述

Arduino是一个开放源码的电子原型平台,它可以让你用简单的硬件和软件来创建各种互动的项目。Arduino的核心是一个微控制器板,它可以通过一系列的引脚来连接各种传感器、执行器、显示器等外部设备。Arduino的编程是基于C/C++语言的,你可以使用Arduino IDE(集成开发环境)来编写、编译和上传代码到Arduino板上。Arduino还有一个丰富的库和社区,你可以利用它们来扩展Arduino的功能和学习Arduino的知识。

Arduino的特点是:
1、开放源码:Arduino的硬件和软件都是开放源码的,你可以自由地修改、复制和分享它们。
2、易用:Arduino的硬件和软件都是为初学者和非专业人士设计的,你可以轻松地上手和使用它们。
3、便宜:Arduino的硬件和软件都是非常经济的,你可以用很低的成本来实现你的想法。
4、多样:Arduino有多种型号和版本,你可以根据你的需要和喜好来选择合适的Arduino板。
5、创新:Arduino可以让你用电子的方式来表达你的创意和想象,你可以用Arduino来制作各种有趣和有用的项目,如机器人、智能家居、艺术装置等。

在这里插入图片描述
Arduino TFT 是指与 Arduino 开发板兼容的薄膜晶体管(Thin - Film - Transistor)液晶显示屏,以下是其主要特点、应用场景及注意事项的详细介绍:

一、主要特点
1、高分辨率显示:TFT 显示屏通常具有较高的分辨率,能够提供清晰、细腻的图像和文字显示效果。这使得它可以展示复杂的图形界面、丰富的色彩以及详细的信息,满足各种应用对显示质量的要求。
2、快速响应速度:TFT 技术能够实现快速的像素切换,响应速度比传统的液晶显示屏更快。这意味着在显示动态图像或进行交互操作时,不会出现明显的拖影或延迟,提供流畅的视觉体验。
3、宽视角:具有较宽的可视角度,无论从哪个方向观看显示屏,都能获得清晰的图像和一致的色彩表现。这使得在不同角度下观察显示屏时,都能保证信息的准确传达,方便多人同时查看或在不同位置操作设备。
4、丰富的色彩表现:能够呈现出丰富、鲜艳的色彩,具备较高的色彩饱和度和对比度。可以准确地显示各种颜色,使图像和界面更加生动逼真,适用于需要展示彩色图像或进行视觉交互的应用。
5、易于控制:通过 Arduino 开发板可以方便地对 TFT 显示屏进行控制。借助相应的库函数和代码,能够轻松实现图像绘制、文字显示、触摸交互等功能,降低了开发难度,即使对于没有深厚显示技术背景的开发者也较为友好。

二、应用场景
1、人机交互界面:在各种电子设备中,如智能仪器仪表、智能家居控制系统、工业自动化控制面板等,作为人机交互的窗口,用于显示菜单、参数设置界面、实时数据监测以及操作提示等信息,方便用户与设备进行交互。
2、教育领域:可用于制作教育实验设备、电子学习工具等。例如,在教学机器人中作为显示屏,展示机器人的状态信息、任务指令以及互动内容;在电子积木等教育玩具中,显示图形化的编程界面或游戏画面,增加学习的趣味性和互动性。
3、便携式设备:如手持游戏机、电子书阅读器、便携式多媒体播放器等。其高分辨率、宽视角和丰富的色彩表现能够为用户提供良好的视觉享受,同时快速响应速度也适合处理游戏中的动态画面和多媒体内容的播放。
4、物联网应用:在物联网项目中,作为节点设备的显示屏,用于展示传感器采集的数据、设备状态信息以及远程控制界面等。例如,在环境监测系统中,显示温度、湿度、空气质量等数据;在智能农业中,展示农田的灌溉状态、作物生长信息等。

三、需要注意的事项
1、电源管理:TFT 显示屏通常需要稳定的电源供应,并且其功耗相对较高。在与 Arduino 连接时,要确保电源能够满足显示屏的需求,避免因电源不稳定导致显示屏出现闪烁、显示异常或损坏等问题。同时,要合理设计电源电路,考虑节能措施,特别是在电池供电的设备中,以延长设备的续航时间。
2、接口兼容性:不同型号的 Arduino 开发板和 TFT 显示屏可能具有不同的接口类型和通信协议。在选择和使用时,要确保两者之间的接口兼容,并且正确连接引脚。有些 TFT 显示屏可能需要额外的驱动电路或转接板才能与 Arduino 顺利连接,需要仔细阅读产品说明书并进行相应的配置。
3、显示内存限制:虽然 TFT 显示屏能够显示丰富的内容,但 Arduino 的内存资源有限。在绘制复杂图像或显示大量数据时,可能会遇到内存不足的问题。因此,需要合理规划显示内容,优化图像和数据的存储方式,避免因内存耗尽导致程序崩溃或显示异常。
4、驱动程序和库的使用:为了实现 TFT 显示屏的各种功能,需要使用相应的驱动程序和库。不同的显示屏可能需要不同的库,并且这些库可能会不断更新和改进。在使用过程中,要及时关注官方文档和社区资源,获取最新的驱动程序和库,并了解其使用方法和注意事项。同时,要注意库与 Arduino IDE 版本的兼容性,避免出现编译错误或运行时问题。
5、电磁干扰:在一些电磁环境较为复杂的场合,TFT 显示屏可能会受到电磁干扰,导致显示出现噪点、闪烁或颜色异常等问题。此时,需要采取相应的抗干扰措施,如合理布线、使用屏蔽线、添加滤波电容等,以确保显示屏的稳定工作。

在这里插入图片描述
主要特点
• 聚焦效果突出:单眼缩放动画将观众的注意力集中在单个眼睛上,通过眼睛的放大或缩小,能够更强烈地传达出特定的情感或信息。例如,当眼睛放大时,可以表现出惊讶、好奇或专注的神情,而缩小则可能暗示着思考、警惕或放松,这种单一元素的突出表现能够增强动画的表现力和感染力。
• 简洁而富有表现力:相较于复杂的多元素动画,单眼缩放动画简洁明了,仅通过对一只眼睛的缩放来创造动画效果。这种简洁性使得动画在传达信息时更加直接,不会因为过多的元素而分散观众的注意力。同时,眼睛作为人类情感表达的重要窗口,其缩放动作能够有效地传达出丰富的情感,具有很强的表现力。
• 易于实现和控制:在 Arduino TFT 上实现单眼缩放动画相对简单,通常只需要使用基本的图形绘制函数和简单的数学运算来控制眼睛图形的大小变化。通过调整相关参数,如缩放比例、速度和时间间隔等,可以轻松地实现不同风格和效果的单眼缩放动画,方便开发者根据自己的需求进行定制和调整。

应用场景
• 人机交互界面:在一些智能设备或交互系统的界面设计中,单眼缩放动画可以作为一种反馈机制。例如,当用户进行某项操作时,屏幕上的单眼缩放动画可以表示系统正在处理信息,或者对用户的操作做出某种回应,增加人机交互的趣味性和直观性。
• 儿童教育与娱乐:在儿童教育产品或游戏中,单眼缩放动画可以用于吸引儿童的注意力,激发他们的兴趣。例如,一个学习类的应用程序可以通过单眼缩放动画来表示对儿童正确回答问题的肯定,或者在游戏中作为角色的一种表情变化,增强游戏的趣味性和互动性。
• 艺术创作与展示:在艺术作品或创意展示中,单眼缩放动画可以作为一种独特的视觉元素,用于表达特定的主题或情感。艺术家可以利用这种动画效果来创造出富有想象力和表现力的作品,例如在数字艺术展览中,通过单眼缩放动画来传达作品的内在含义,吸引观众的关注和思考。

需要注意的事项
• 动画流畅性:为了确保单眼缩放动画的流畅性,需要合理控制动画的帧率和缩放速度。过高的帧率可能会导致 Arduino 处理负担过重,从而出现卡顿现象;而过低的帧率则会使动画看起来不连贯。同时,缩放速度也不宜过快或过慢,过快的速度可能让观众难以看清动画效果,过慢则可能会让观众感到乏味。开发者需要通过不断测试和调整,找到适合具体应用场景的帧率和缩放速度。
• 色彩与风格搭配:单眼的颜色和风格应与整体界面或作品的风格相匹配。颜色的选择要考虑到视觉效果和情感传达,例如,明亮的颜色可能会传达出积极、活泼的情感,而暗淡的颜色则可能暗示着沉稳、神秘的氛围。此外,眼睛的风格也应与周围的元素相协调,无论是写实风格、卡通风格还是抽象风格,都要保持整体的一致性,以避免产生突兀的感觉。
• 资源占用:在 Arduino 上运行动画需要占用一定的内存和处理资源。尤其是在同时运行多个功能或处理复杂任务时,要注意单眼缩放动画对资源的占用情况,避免因资源不足而导致系统不稳定或其他功能出现故障。可以通过优化代码、减少不必要的图形绘制和计算等方式来降低资源消耗,确保系统的稳定运行。

在这里插入图片描述

1、基础单眼缩放动画

#include <Adafruit_GFX.h>    
#include <Adafruit_ST7735.h> 
#include <SPI.h>
 
#define TFT_CS 10
#define TFT_RST 9
#define TFT_DC 8
 
Adafruit_ST7735 tft = Adafruit_ST7735(TFT_CS, TFT_DC, TFT_RST);
 
int pupilRadius = 10;  // 瞳孔半径
int direction = 1;     // 缩放方向
 
void setup() {
    
    
  tft.initR(INITR_BLACKTAB);
  tft.fillScreen(ST7735_BLACK);
}
 
void loop() {
    
    
  drawEye(64, 80, pupilRadius); // 绘制单眼
  pupilRadius += direction;      // 调整瞳孔大小
  if (pupilRadius > 15 || pupilRadius < 10) direction *= -1; // 控制范围
  delay(100);
}
 
void drawEye(int x, int y, int radius) {
    
    
  tft.fillCircle(x, y, 20, ST7735_WHITE);    // 眼白
  tft.fillCircle(x, y, radius, ST7735_BLACK); // 瞳孔
}

要点解读
基础缩放:
通过pupilRadius变量控制瞳孔大小,实现缩放效果。
使用fillCircle绘制眼白和瞳孔,调整半径即可改变瞳孔大小。
边界控制:
使用if语句限制pupilRadius范围,避免瞳孔过大或过小。
刷新机制:
每次循环重新绘制眼睛,覆盖旧图形以实现动画效果。

2、按钮交互式单眼缩放动画

#include <Adafruit_GFX.h>    
#include <Adafruit_ST7735.h> 
#include <SPI.h>
 
#define TFT_CS 10
#define TFT_RST 9
#define TFT_DC 8
#define BUTTON_PIN 7
 
Adafruit_ST7735 tft = Adafruit_ST7735(TFT_CS, TFT_DC, TFT_RST);
 
int pupilRadius = 10;
 
void setup() {
    
    
  tft.initR(INITR_BLACKTAB);
  tft.fillScreen(ST7735_BLACK);
  pinMode(BUTTON_PIN, INPUT_PULLUP);
}
 
void loop() {
    
    
  if (digitalRead(BUTTON_PIN) == LOW) {
    
     // 按钮按下
    pupilRadius = 15; // 瞳孔放大
  } else {
    
    
    pupilRadius = 10; // 瞳孔缩小
  }
  drawEye(64, 80, pupilRadius);
  delay(200); // 防抖处理
}
 
void drawEye(int x, int y, int radius) {
    
    
  tft.fillRect(0, 0, 160, 128, ST7735_BLACK); // 清屏
  tft.fillCircle(x, y, 20, ST7735_WHITE);    // 眼白
  tft.fillCircle(x, y, radius, ST7735_BLACK); // 瞳孔
}

要点解读
交互功能:
使用按钮控制瞳孔大小,按下时放大,松开时缩小。
INPUT_PULLUP模式简化硬件连接(按钮一端接GND)。
清屏优化:
使用fillRect清屏,避免fillCircle擦除时可能残留的图形。
防抖处理:
增加delay(200)避免按钮抖动导致的误触发。

3、带眨眼效果的单眼缩放动画

#include <Adafruit_GFX.h>    
#include <Adafruit_ST7735.h> 
#include <SPI.h>
 
#define TFT_CS 10
#define TFT_RST 9
#define TFT_DC 8
 
Adafruit_ST7735 tft = Adafruit_ST7735(TFT_CS, TFT_DC, TFT_RST);
 
int pupilRadius = 10;
int eyeY = 80;
 
void setup() {
    
    
  tft.initR(INITR_BLACKTAB);
  tft.fillScreen(ST7735_BLACK);
}
 
void loop() {
    
    
  animateEye();
}
 
void animateEye() {
    
    
  static int direction = 1;
  static unsigned long previousMillis = 0;
  unsigned long currentMillis = millis();
 
  if (currentMillis - previousMillis >= 100) {
    
     // 每100ms更新一次
    previousMillis = currentMillis;
 
    // 瞳孔缩放
    pupilRadius += direction;
    if (pupilRadius > 15 || pupilRadius < 10) direction *= -1;
 
    // 眼睛位置移动(模拟眨眼)
    eyeY = 80 + (sin(millis() / 500.0) * 5); // 上下微动
 
    drawScene();
  }
}
 
void drawScene() {
    
    
  tft.fillRect(0, 0, 160, 128, ST7735_BLACK); // 清屏
  drawFace();
  drawEye(64, eyeY, pupilRadius);
}
 
void drawFace() {
    
    
  tft.fillRect(40, 60, 80, 50, ST7735_YELLOW); // 脸部
  tft.fillRect(55, 100, 10, 5, ST7735_BLACK); // 嘴巴
}
 
void drawEye(int x, int y, int radius) {
    
    
  tft.fillCircle(x, y, 20, ST7735_WHITE);    // 眼白
  tft.fillCircle(x, y, radius, ST7735_BLACK); // 瞳孔
}

要点解读
多元素组合:
添加脸部和嘴巴元素,与眼睛组合成完整表情。
使用sin函数实现眼睛上下微动,模拟眨眼效果。
时间控制:
使用millis()实现非阻塞式动画,避免delay()导致的卡顿。
场景绘制:
将场景绘制拆分为drawScene、drawFace、drawEye函数,便于管理和扩展。

在这里插入图片描述

4、单眼缩放动画

#include <SPI.h>
#include <Adafruit_GFX.h>
#include <Adafruit_ILI9341.h>

#define TFT_CS 10
#define TFT_DC 9

Adafruit_ILI9341 tft = Adafruit_ILI9341(TFT_CS, TFT_DC);

int eye_radius = 20;  // 眼睛半径
bool expanding = true;  // 是否在放大

void setup() {
    
    
    tft.begin();
    tft.fillScreen(ILI9341_BLACK);  // 黑色背景
}

void loop() {
    
    
    tft.fillScreen(ILI9341_BLACK);  // 清屏

    // 绘制眼睛外框
    tft.drawCircle(120, 80, eye_radius, ILI9341_WHITE);
    tft.fillCircle(120, 80, eye_radius - 5, ILI9341_BLUE);

    // 更新眼睛半径
    if (expanding) {
    
    
        eye_radius++;
    } else {
    
    
        eye_radius--;
    }

    // 边界检查
    if (eye_radius >= 40 || eye_radius <= 10) {
    
    
        expanding = !expanding;  // 切换方向
    }

    delay(50);  // 控制刷新频率
}

要点解读
缩放逻辑
使用变量eye_radius控制眼睛的大小,通过布尔变量expanding切换放大或缩小状态。
当eye_radius达到最大值(40)或最小值(10)时,切换方向。
清屏与重绘
每次循环调用fillScreen()清除屏幕内容,避免图形叠加。
颜色搭配
白色边框和蓝色填充模拟眼睛外观,增强视觉效果。
延时控制
delay(50)控制刷新频率,确保动画流畅且不占用过多资源。
简单易扩展
动画逻辑清晰,易于修改为其他效果(如多眼动画)。

5、单眼随时间加速缩放

#include <SPI.h>
#include <Adafruit_GFX.h>
#include <Adafruit_ILI9341.h>

#define TFT_CS 10
#define TFT_DC 9

Adafruit_ILI9341 tft = Adafruit_ILI9341(TFT_CS, TFT_DC);

int eye_radius = 20;  // 眼睛半径
bool expanding = true;  // 是否在放大
int speed = 1;  // 缩放速度

void setup() {
    
    
    tft.begin();
    tft.fillScreen(ILI9341_BLACK);  // 黑色背景
}

void loop() {
    
    
    tft.fillScreen(ILI9341_BLACK);  // 清屏

    // 绘制眼睛外框
    tft.drawCircle(120, 80, eye_radius, ILI9341_WHITE);
    tft.fillCircle(120, 80, eye_radius - 5, ILI9341_BLUE);

    // 更新眼睛半径
    if (expanding) {
    
    
        eye_radius += speed;
    } else {
    
    
        eye_radius -= speed;
    }

    // 边界检查
    if (eye_radius >= 40 || eye_radius <= 10) {
    
    
        expanding = !expanding;  // 切换方向
        speed++;  // 每次切换方向后加速
        if (speed > 5) speed = 1;  // 限制最高速度
    }

    delay(50);  // 控制刷新频率
}

要点解读
加速效果
使用变量speed控制缩放速度,并在每次切换方向后增加速度,形成加速效果。
速度限制
当speed超过设定最大值(如5)时,重置为初始值,避免动画过快。
动态变化
加速缩放使动画更具动感,适合用于模拟情绪变化(如惊讶或兴奋)。
边界条件优化
在缩放过程中始终检查边界,确保眼睛大小不会超出范围。
用户体验提升
动态加速效果让动画更有趣,吸引用户注意力。

6、单眼随机缩放与眨眼

#include <SPI.h>
#include <Adafruit_GFX.h>
#include <Adafruit_ILI9341.h>

#define TFT_CS 10
#define TFT_DC 9

Adafruit_ILI9341 tft = Adafruit_ILI9341(TFT_CS, TFT_DC);

int eye_radius = 20;  // 眼睛半径
bool is_blinking = false;  // 是否在眨眼

void setup() {
    
    
    tft.begin();
    tft.fillScreen(ILI9341_BLACK);  // 黑色背景
    randomSeed(analogRead(0));  // 初始化随机数种子
}

void loop() {
    
    
    tft.fillScreen(ILI9341_BLACK);  // 清屏

    // 随机触发眨眼
    if (random(100) < 5 && !is_blinking) {
    
      // 5%概率触发眨眼
        is_blinking = true;
    }

    if (is_blinking) {
    
    
        // 眨眼动画
        for (int r = eye_radius; r > 0; r--) {
    
    
            tft.fillScreen(ILI9341_BLACK);  // 清屏
            tft.drawCircle(120, 80, r, ILI9341_WHITE);
            tft.fillCircle(120, 80, r - 5, ILI9341_BLUE);
            delay(30);
        }
        for (int r = 0; r <= eye_radius; r++) {
    
    
            tft.fillScreen(ILI9341_BLACK);  // 清屏
            tft.drawCircle(120, 80, r, ILI9341_WHITE);
            tft.fillCircle(120, 80, r - 5, ILI9341_BLUE);
            delay(30);
        }
        is_blinking = false;
    } else {
    
    
        // 正常显示眼睛
        tft.drawCircle(120, 80, eye_radius, ILI9341_WHITE);
        tft.fillCircle(120, 80, eye_radius - 5, ILI9341_BLUE);
    }

    delay(50);  // 控制刷新频率
}

要点解读
随机眨眼触发
使用random()函数生成随机数,以一定概率触发眨眼动画,增加趣味性。
眨眼动画
通过逐步缩小眼睛半径(闭眼)再逐步恢复(睁眼),模拟眨眼效果。
动画平滑
使用for循环和delay(30)逐帧更新眼睛大小,确保动画平滑。
状态管理
使用布尔变量is_blinking记录当前是否处于眨眼状态,避免重复触发。
真实感增强
随机眨眼动画更贴近真实生物行为,适合用于模拟机器人或卡通角色的眼睛。

注意,以上案例只是为了拓展思路,仅供参考。它们可能有错误、不适用或者无法编译。您的硬件平台、使用场景和Arduino版本可能影响使用方法的选择。实际编程时,您要根据自己的硬件配置、使用场景和具体需求进行调整,并多次实际测试。您还要正确连接硬件,了解所用传感器和设备的规范和特性。涉及硬件操作的代码,您要在使用前确认引脚和电平等参数的正确性和安全性。

在这里插入图片描述