關于動畫,我們有兩種思路
1.通過反復繪制幾何圖形擦除幾何圖形的方法實現(xiàn)動畫效果, 比如TFT_eSPI庫示例中的TFT_Meters示例
2.通過快速顯示圖片來達到動畫效果, 比如現(xiàn)在B站非常流行的badApple

一. 通過幾何圖形繪制動畫效果

繪制幾何圖形再擦除的方式繪制動畫是非常好的方式, 它的:
優(yōu)點是: 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 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是沒有畫扇形的函數(shù)的, 畫扇形的思路是: 將扇形分解為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, 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會出現(xiàn)扇形動畫
    delay(20);
  }
}

由于轉GIF的原因, 看上去有些掉幀, 實際上看上去是沒有掉幀的, 非常順滑

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

未完待續(xù)