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

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

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

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

1. 让一个正方形动起来

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

#include  // Hardware-specific library
#include 

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个个小三角形,每个三角形表示一弧度

#include  // Hardware-specific library
#include 

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

未完待续