前言

Flutter 的畫(huà)筆類(lèi) Paint 提供了很多圖形繪制的配置屬性，來(lái)供我們繪制更豐富多彩的圖形。前面幾篇我們介紹了 shader 屬性來(lái)繪制全屏漸變的聊天氣泡背景、漸變流動(dòng)的邊框和毛玻璃效果的背景圖片，具體可以參考下面幾篇文章。

• 讓你的聊天氣泡豐富多彩！
• 手把手教你實(shí)現(xiàn)一個(gè)流動(dòng)的漸變色邊框
• 利用光影變化構(gòu)建立體旋轉(zhuǎn)效果
• Flutter 實(shí)現(xiàn)背景圖片毛玻璃效果

本篇我們引入一個(gè) Paint 類(lèi)新的屬性：maskFilter，再結(jié)合之前的 shader 和動(dòng)畫(huà)，看看能玩出什么花樣。

MaskFilter 類(lèi)簡(jiǎn)介

MaskFilter 類(lèi)，顧名思義是遮罩過(guò)濾器，也就是在繪制過(guò)程中給圖像加一層遮罩效果，這個(gè)遮罩效果是通過(guò)某種變換函數(shù)實(shí)現(xiàn)的。Flutter 官方文檔的說(shuō)明如下，可以看出其實(shí)就是對(duì)位圖的顏色處理。

A mask filter to apply to shapes as they are painted. A mask filter is a function that takes a bitmap of color pixels, and returns another bitmap of color pixels. 遮罩過(guò)濾器應(yīng)用于要繪制的形狀，其實(shí)就是一個(gè)函數(shù)，接收一個(gè)彩色像素位圖，然后返回另一個(gè)彩色像素位圖。

在 Flutter 里面，目前只提供了一個(gè) MaskFilter 的命名構(gòu)造函數(shù)方式實(shí)例化，就是模糊效果。這個(gè)模糊效果和我們的圖片模糊有點(diǎn)類(lèi)似，也是使用高斯模糊，只是多了一個(gè)模糊樣式參數(shù)。定義如下：

const MaskFilter.blur(
  this._style,
  this._sigma,
)

關(guān)于這個(gè)方法的說(shuō)明，為了便于理解，將官方的文檔翻譯如下：

Creates a mask filter that takes the shape being drawn and blurs it. This is commonly used to approximate shadows. The style argument controls the kind of effect to draw; The sigma argument controls the size of the effect. It is the standard deviation of the Gaussian blur to apply. The value must be greater than zero. The sigma corresponds to very roughly half the radius of the effect in pixels. A blur is an expensive operation and should therefore be used sparingly. The arguments must not be null. 創(chuàng)建一個(gè)遮罩過(guò)濾器將要繪制的形狀進(jìn)行模糊處理。通常用于實(shí)現(xiàn)近似陰影的效果。style 參數(shù)控制繪制的效果類(lèi)型 （BlurStyle 枚舉）；sigma 參數(shù)控制效果的尺寸，實(shí)際就是使用的高斯模糊的標(biāo)準(zhǔn)差。sigma 的值必須大于0，這個(gè)值在像素上，大致是效果范圍的半徑值。模糊處理比較耗性能，因此要有節(jié)制地使用。

因?yàn)樾Ч悬c(diǎn)類(lèi)似陰影，而且比較耗性能，因此如果僅僅是要繪制陰影的話(huà)，官方推薦是使用 Canvas 的 drawShadow 方法替代這個(gè)效果。

MaskFilter 的幾種效果對(duì)比

看文檔使用起來(lái)比較簡(jiǎn)單，我們來(lái)看看 MaskFilter 的幾種不同的模糊樣式的區(qū)別。模糊樣式通過(guò) style 參數(shù)控制，BlurStyle 枚舉取值有以下四種。

• normal：形狀內(nèi)外都會(huì)做模糊處理，可以用于繪制圖形表面投影的陰影效果。
• solid：內(nèi)部不模糊，外側(cè)模糊，會(huì)讓圖形看起來(lái)更明亮，類(lèi)似熒光的效果。
• outer：外側(cè)模糊，內(nèi)部沒(méi)有東西，適用于繪制半透明圖形的陰影。
• inner：外側(cè)不處理，內(nèi)部模糊，看起來(lái)有種內(nèi)發(fā)光的效果。

看文檔說(shuō)明我們是體會(huì)不到具體的呈現(xiàn)效果的，我們繪制同一個(gè)圖形的不同效果對(duì)比看看。

outer 類(lèi)型有點(diǎn)奇怪，中間掏空了，不過(guò)看上去還挺酷的。我畫(huà)了一個(gè)不模糊的疊加上去，發(fā)現(xiàn)組合后的效果就和 solid 模式一樣。

上面繪制的代碼如下。

@override
void paint(Canvas canvas, Size size) {
  var paint = Paint();
  paint.style = PaintingStyle.fill;
  var center = Offset(size.width / 2, size.height / 2);
  var radius = 80.0;
  paint.color = Colors.blue[400]!;
  paint.maskFilter = MaskFilter.blur(BlurStyle.outer, 20.0);
  canvas.drawCircle(center, radius, paint);
}

光影流動(dòng)

通過(guò)繪制的效果發(fā)現(xiàn)，其實(shí) MaskFilter 實(shí)現(xiàn)的效果有點(diǎn)像設(shè)計(jì)師給的各種發(fā)光效果，比如內(nèi)發(fā)光、外發(fā)光。這時(shí)候，配合動(dòng)畫(huà)可以玩點(diǎn)有趣的東西了。

光影流動(dòng)效果1

我們利用之前實(shí)現(xiàn)的全屏漸變色聊天氣泡中的效果，通過(guò)動(dòng)畫(huà)控制一個(gè)圓形上下移動(dòng)看看會(huì)有什么效果，感覺(jué)是一個(gè)彩色的光球在上升和下降。

上面效果的實(shí)現(xiàn)代碼如下，基本的邏輯如下：

• 整個(gè)繪圖范圍通過(guò) shader 預(yù)填充，使得圓形移動(dòng)過(guò)程的填充色漸變變化，和我們聊天氣泡中的效果一樣；
• 通過(guò) transform 動(dòng)畫(huà)控制顏色旋轉(zhuǎn)，使得繪制的圓形的填充顏色旋轉(zhuǎn)，看起來(lái)會(huì)有立體感；
• 通過(guò) maskFilter，設(shè)置為 solid 模式讓圓形有熒光的效果；
• 通過(guò)動(dòng)畫(huà)控制圓形上升和下降。

void _drawMovingCircle(Canvas canvas, Size size, Paint paint) {
  var radius = 80.0;
  paint.shader = LinearGradient(
    begin: Alignment.topCenter,
    end: Alignment.bottomCenter,
    colors: [
      Colors.black87,
      Colors.purple,
      Colors.blue,
      Colors.green,
      Colors.yellow[500]!,
      Colors.orange,
      Colors.red[400]!
    ].reversed.toList(),
    tileMode: TileMode.clamp,
    transform: GradientRotation(
      animationValue * 2 * pi,
    ),
  ).createShader(Offset(0, 0) & size);

  paint.maskFilter = MaskFilter.blur(BlurStyle.solid, 20.0);
  canvas.drawCircle(
      Offset(size.width / 2, size.height * animationValue), radius, paint);
}

光影流動(dòng)效果2

上面的效果是一個(gè)圓形的，我們換成多個(gè)并排的矩形來(lái)看看，這種效果感覺(jué)整個(gè)填充區(qū)域的顏色在不停流動(dòng)變幻，就好像有霓虹燈照耀的感覺(jué)。

上面效果的實(shí)現(xiàn)代碼如下，其實(shí)就是通過(guò)循環(huán)繪制了一排矩形，然后通過(guò)動(dòng)畫(huà)控制上下移動(dòng)位置。

void _drawMultiMovingRect(Canvas canvas, Size size, Paint paint) {
  paint.shader = LinearGradient(
    begin: Alignment.topCenter,
    end: Alignment.bottomCenter,
    colors: [
      Colors.black87,
      Colors.purple,
      Colors.blue,
      Colors.green,
      Colors.yellow[500]!,
      Colors.orange,
      Colors.red[400]!
    ].reversed.toList(),
    tileMode: TileMode.clamp,
    transform: GradientRotation(
      animationValue * 2 * pi,
    ),
  ).createShader(Offset(0, 0) & size);

  paint.maskFilter = MaskFilter.blur(BlurStyle.solid, 20.0);
  var count = 10;
  for (var i = 0; i < count + 1; ++i) {
    canvas.drawRect(
      Offset(size.width / count * i, size.height * animationValue) &
          Size(size.width / count, size.width / count * 2),
      paint,
    );
  }
}

光影流動(dòng)效果3

這一次我們使用 outer 類(lèi)型的模糊效果，然后讓一串圓形沿屏幕對(duì)角線(xiàn)從收起到展開(kāi)，再?gòu)恼归_(kāi)到收起，效果如下所示，光束球發(fā)出來(lái)的時(shí)候，感覺(jué)就像是從左上角發(fā)了一個(gè)大招。

上面的實(shí)現(xiàn)代碼如下所示，就是通過(guò)控制圓形的中心位置實(shí)現(xiàn)對(duì)角線(xiàn)移動(dòng)的，間距則是隨著動(dòng)畫(huà)值的增加而拉大，因此會(huì)有發(fā)射的效果。

void _drawMultiMovingCircle(Canvas canvas, Size size, Paint paint) {
  paint.shader = LinearGradient(
    begin: Alignment.topCenter,
    end: Alignment.bottomCenter,
    colors: [
      Colors.black87,
      Colors.purple,
      Colors.blue,
      Colors.green,
      Colors.yellow[500]!,
      Colors.orange,
      Colors.red[400]!
    ].reversed.toList(),
    tileMode: TileMode.clamp,
    transform: GradientRotation(
      animationValue * 2 * pi,
    ),
  ).createShader(Offset(0, 0) & size);

  paint.maskFilter = MaskFilter.blur(BlurStyle.outer, 20.0);
  var count = 10;
  for (var i = 0; i < count + 1; ++i) {
    canvas.drawCircle(
      Offset(size.width * i / count * animationValue,
          size.height * i / count * animationValue),
      size.width / count,
      paint,
    );
  }
}

光影流動(dòng)效果4：光影沿貝塞爾曲線(xiàn)流動(dòng)

我們來(lái)把圖形通過(guò)貝塞爾曲線(xiàn)控制繪制位置，來(lái)畫(huà)一組圖形，就能夠?qū)崿F(xiàn)光影沿著貝塞爾曲線(xiàn)流動(dòng)的效果了。這里我們沿著兩條首尾相接的貝塞爾曲線(xiàn)，繪制了一組正方形，看起來(lái)就像光影在一個(gè)閉合的圖形中來(lái)回穿梭一樣。

實(shí)現(xiàn)代碼和之前的類(lèi)似，只是矩形的位置通過(guò)貝塞爾曲線(xiàn)生成，如下所示。

void _drawRectsUsingBezier(Canvas canvas, Size size, Paint paint) {
  paint.shader = LinearGradient(
    begin: Alignment.topCenter,
    end: Alignment.bottomCenter,
    colors: [
      Colors.black87,
      Colors.purple,
      Colors.blue,
      Colors.green,
      Colors.yellow[500]!,
      Colors.orange,
      Colors.red[400]!
    ].reversed.toList(),
    tileMode: TileMode.clamp,
    transform: GradientRotation(
      animationValue * 2 * pi,
    ),
  ).createShader(Offset(0, 0) & size);

  paint.maskFilter = MaskFilter.blur(BlurStyle.outer, 2);
  final height = 120.0;
  var p0 = Offset(0, size.height / 2 + height);
  var p1 = Offset(size.width / 4, size.height / 2 - height);
  var p2 = Offset(size.width * 3 / 4, size.height / 2 + height);
  var p3 = Offset(size.width, size.height / 2 - height);
  var count = 150;
  var squareSize = 20.0;
  for (var t = 1; t <= count; t += 1) {
    var curvePoint =
        BezierUtil.get3OrderBezierPoint(p0, p1, p2, p3, t / count);

    canvas.drawRect(
      curvePoint & Size(squareSize, squareSize),
      paint,
    );
  }

  for (var t = 1; t <= count; t += 1) {
    var curvePoint =
        BezierUtil.get3OrderBezierPoint(p3, p1, p2, p0, t / count);

    canvas.drawRect(
      curvePoint & Size(squareSize, squareSize),
      paint,
    );
  }
}

總結(jié)

本篇介紹了 Flutter 畫(huà)筆類(lèi) Painter 的 MaskFilter 的使用，MaskFilter 的應(yīng)用效果就是讓形狀能有類(lèi)似發(fā)光的效果。我們結(jié)合之前的幾篇文章用到的繪制效果完成了一場(chǎng)“光影秀”，視覺(jué)上看起來(lái)還是很美的。這也是開(kāi)發(fā)過(guò)程中繪圖的樂(lè)趣之一，看著自己畫(huà)出來(lái)很美的效果也還是很有成就感的。

到此這篇關(guān)于利用Android實(shí)現(xiàn)光影流動(dòng)特效的方法詳解的文章就介紹到這了,更多相關(guān)Android光影流動(dòng)特效內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！