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

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

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

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

1. 让一个正方形动起来

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

#include <TFT_eSPI.h> // Hardware-specific library
#include <SPI.h>

TFT_eSPI tft = TFT_eSPI(); // Invoke custom library

uint32_t updateTime = 0; // time for next update

int oldi = 0;
int i = 0;

void setup(void)
{
tft.init();
tft.setRotation(0);
tft.fillScreen(TFT_BLACK);
updateTime = millis(); // Next update time
tft.fillRect(0, 0, 50, 50, TFT_RED);
}

void loop()
{
if (updateTime <= millis())
{
updateTime = millis() + 30; //每30ms更新一次
if (i < 350)
i += 5;
else
oldi=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个个小三角形,每个三角形表示一弧度

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

#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, y1
float 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的原因, 看上去有些掉帧, 实际上看上去是没有掉帧的, 非常顺滑

68dfa64c91bfb3279aae18e9d55c93ce[00_00_00--00_00_02].gif