Flutter繪制3.4邊形及多邊形漸變動畫實現(xiàn)示例

更新時間：2022年08月09日 11:33:51 作者：十三點47

這篇文章主要為大家介紹了Flutter繪制3.4邊形之多邊形漸變動畫實現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

正文

項目被優(yōu)化了，人也跟著被優(yōu)化了，正好趁這一個月整理整理關(guān)于flutter的一些東西。

繪制3.4邊形

先看一下效果圖：

起因是上上上上上個月瀏覽flutter的canvas相關(guān)內(nèi)容時，點進去一個網(wǎng)站，看到一個讓我眼前一亮的動效：

作者用的代碼是swift的，我沒細看，不過他文章里的一句話讓我醍醐灌頂：

That is, we want the shape be asked to draw multiple times, each time with a different value for the sides parameter: 3, 3.1, 3.15, 3.2, 3.25, all the way to 4.

大意就是說我們想搞一個從三邊形到四邊形的動畫，我們只需要畫出3.1邊形，3.2邊形，3.3邊形，一直畫到4邊形。

這句話真的讓我醍醐灌頂，因為我看到這個動畫，第一反應(yīng)是需要計算每個頂點位置，從而做出動畫；但是這句話讓這個問題脫離了具體細節(jié)，將問題抽象化，數(shù)學(xué)化。只要我們定義出分數(shù)邊形的繪制方法，我們就可以很簡單的完成這個動畫。

現(xiàn)在我們只要定義如何繪制分數(shù)邊形就可以了。

整數(shù)邊形的繪制

在定義繪制分數(shù)邊形的繪制方法之前，我們先來看整數(shù)邊形是如何繪制的：

繪制正三角形，我們會在圓上找出三等分點，然后依次連接這三個點，這就是正三角形的繪制方法。

而且繪制的時候我們通常會固定一個起點，然后從這個起點開始等分。

分數(shù)邊形的繪制

分數(shù)邊形的繪制也是一樣的道理，比如3.1邊形的繪制，我們需要找到四個點

我們先固定一個起點，然后從這個起點開始旋轉(zhuǎn)(2*pi/3.1)個弧度,這樣依次找到剩下三個點，（因為不是等分，所以可這樣找下去可以找到無數(shù)個點，但我們只需要找四個點），而且當(dāng)我們給到兩個很相近的分數(shù)，比如3.1和3.11時，3.1邊形對應(yīng)的四個點和3.11對應(yīng)的四個點，由于它們的起點是固定的，剩下各自的三個點對應(yīng)的位置都是很接近的（因為3.1和3.11對應(yīng)的弧度是很接近的），這樣一直畫到4.0邊形，就完成了從三邊形到四邊形的漸變動畫。

具體代碼

獲取多邊形頂點

List<Offset> points = [];
List<Offset> getPolygonPoints1(double sides) {
    for (int i = 0; i < sides.ceil(); i++) {
      double x, y;
      x = radius * sin(i * 2 * pi / sides);
      y = -radius * cos(i * 2 * pi / sides);
      points.add(Offset(x, y));
    }
    return points;
}

獲取到多邊形頂點之后我們就可以在Custompaint的paint函數(shù)中將其繪制出來：

@override
  void paint(Canvas canvas, Size size) {
      Paint paint = Paint()
          ..color = const Color(0xFF47484B)
          ..style = PaintingStyle.stroke
          ..strokeWidth = 1
          ..isAntiAlias = true;
      List<Offset> points = getPolygonPoints1(progress);
      for (int i = 0; i < points.length; i++) {
      canvas.drawLine(
          points[i % points.length], points[(i + 1) % points.length], paint);
      }
}

可以看到效果如下：

但是如果我想要下圖這種效果，當(dāng)邊數(shù)為奇數(shù)時，頂點位于最上方，邊數(shù)由奇數(shù)變成偶數(shù)時，最上方的頂點分裂成兩個，類似下圖效果：

效果改進1

想要達到這種效果，我們只需要將代碼改進一下，不再固定起始點，而是在邊數(shù)由奇數(shù)變?yōu)榕紨?shù)時，將起始點的弧度由(pi / sides)漸變?yōu)?，由偶數(shù)變位奇數(shù)時，起始點弧度由0變?yōu)?pi / sides)。

代碼如下：

List<Offset> getPolygonPoints2(double sides) {
    for (int i = 0; i < sides.ceil(); i++) {
      double x, y;
      if (sides.ceil() % 2 == 0) {
        x = radius *
            sin(lerpDouble(0, (pi / sides), sides - sides.floor())! +
                i * 2 * pi / sides);
        y = -radius *
            cos(lerpDouble(0, (pi / sides), sides - sides.floor())! +
                i * 2 * pi / sides);
      } else {
        x = radius *
            sin(lerpDouble((pi / sides), 0, sides - sides.floor())! +
                i * 2 * pi / sides);
        y = -radius *
            cos(lerpDouble((pi / sides), 0, sides - sides.floor())! +
                i * 2 * pi / sides);
      }
      points.add(Offset(x, y));
    }
    return points;
}

此時效果如下：

但是還是有些不完美，我還想讓多邊形邊數(shù)為偶數(shù)時，起始點是從最上方的邊的中點一直漸變到最上方的點，就是下面這種效果：

效果改進2

此時我們只需要將多邊形由偶數(shù)變?yōu)槠鏀?shù)時的起始點改為最上方邊線的中點即可。此時代碼如下：

List<Offset> getPolygonPoints(double sides) {
    for (int i = 0; i < sides.ceil(); i++) {
      double x, y;
      if (sides.ceil() % 2 == 0) {
        if (sides.ceil() == sides) {
          x = radius * sin((pi / sides) + i * 2 * pi / sides);
          y = -radius * cos((pi / sides) + i * 2 * pi / sides);
        } else {
          x = radius *
              sin(lerpDouble(0, (pi / sides), sides - sides.floor())! +
                  i * 2 * pi / sides);
          y = -radius *
              cos(lerpDouble(0, (pi / sides), sides - sides.floor())! +
                  i * 2 * pi / sides);
        }
      } else {
        if (sides.ceil() == sides) {
          x = radius * sin(i * 2 * pi / sides);
          y = -radius * cos(i * 2 * pi / sides);
        } else {
          // 起始點位置單獨計算
          if (i == 0) {
            double startY = -radius * cos(pi / sides);
            double endY = -radius;
            x = 0;
            y = lerpDouble(startY, endY, sides - sides.floor())!;
          } else {
            x = radius *
                sin(lerpDouble((pi / sides), 0, sides - sides.floor())! +
                    (i - lerpDouble(1, 0, sides - sides.floor())!) *
                        2 *
                        pi /
                        sides);
            y = -radius *
                cos(lerpDouble((pi / sides), 0, sides - sides.floor())! +
                    (i - lerpDouble(1, 0, sides - sides.floor())!) *
                        2 *
                        pi /
                        sides);
          }
        }
      }
      points.add(Offset(x, y));
    }
    return points;
  }

在這個基礎(chǔ)上再畫出對角線，加上縮放，就能達到我們一開始看到的最終效果了。

一些canvas的其他小demo