玩转 ESP32 + Arduino(二十九) TFT_eSPI库驱动ST7789之动画专题

本文主要是介绍玩转 ESP32 + Arduino(二十九) TFT_eSPI库驱动ST7789之动画专题，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

关于动画,我们有两种思路
1.通过反复绘制几何图形擦除几何图形的方法实现动画效果, 比如TFT_eSPI库示例中的TFT_Meters示例
2.通过快速显示图片来达到动画效果, 比如现在B站非常流行的badApple

一. 通过几何图形绘制动画效果

绘制几何图形再擦除的方式绘制动画是非常好的方式, 它的:
优点是: 1. 占用空间非常小 2. 动画清晰,充分利用每个像素点 3. 可以非常灵动. 4. 方便进行微调
缺点是: 1. 容易闪屏 2. 一般不会太复杂 3.需要大量的计算

1. 让一个正方形动起来

思路: 绘制一个正方形, 然后每30ms 就擦除一部分正方形顶部的线,

#include <TFT_eSPI.h> // Hardware-specific library
#include <SPI.h>TFT_eSPI tft = TFT_eSPI(); // Invoke custom libraryuint32_t updateTime = 0; // time for next updateint oldi = 0;
int i = 0;void setup(void)
{tft.init();tft.setRotation(0);tft.fillScreen(TFT_BLACK);updateTime = millis(); // Next update timetft.fillRect(0, 0, 50, 50, TFT_RED);
}void loop()
{if (updateTime <= millis()){updateTime = millis() + 30; //每30ms更新一次if (i < 350)i += 5;elseoldi=i=-50;while (i != oldi){tft.drawFastHLine(0, oldi, 50, TFT_BLACK);oldi++;tft.drawFastHLine(0, oldi + 50, 50, TFT_RED);}}
}

由于转GIF的原因, 看上去有些掉帧, 实际上看上去是没有掉帧的, 非常顺滑

2. 画一个带动画的扇形

TFT_eSPI是没有画扇形的函数的, 画扇形的思路是: 将扇形分解为1个个小三角形,每个三角形表示一弧度

#include <TFT_eSPI.h> // Hardware-specific library
#include <SPI.h>TFT_eSPI tft = TFT_eSPI(); // Invoke custom library#define DEG2RAD 0.0174532925 //当半径为1时, 1弧度对应长度, 我们可以理解为1个标准单位byte inc = 0;
unsigned int col = 0;void setup(void)
{Serial.begin(115200);tft.begin();tft.fillScreen(TFT_BLACK);
}void loop()
{fillSegment(65, 120, 0, 60, 50, TFT_RED);tft.fillScreen(TFT_BLACK);
}
void fillSegment(int x, int y, int start_angle, int sub_angle, int r, unsigned int colour)
{// 计算初始的x1, y1float sx = cos((start_angle - 90) * DEG2RAD);float sy = sin((start_angle - 90) * DEG2RAD);uint16_t x1 = sx * r + x;uint16_t y1 = sy * r + y;for (int i = start_angle; i < start_angle + sub_angle; i++){int x2 = cos((i + 1 - 90) * DEG2RAD) * r + x;int y2 = sin((i + 1 - 90) * DEG2RAD) * r + y;tft.fillTriangle(x1, y1, x2, y2, x, y, colour);x1 = x2;y1 = y2;//如果在这里加个delay会出现扇形动画delay(20);}
}

由于转GIF的原因, 看上去有些掉帧, 实际上看上去是没有掉帧的, 非常顺滑