Android利用ShaderMask實現花裡胡哨的文字特效

2022-12-05 14:01:01

前言

我們的 App 大部分時候的文字都是一種顏色，實際上，文字的顏色也可以多姿多彩。我們今天就來介紹一個能夠輕鬆實現文字漸變色的元件 —— ShaderMask。ShaderMask 能夠構建一個著色器（shader），然後覆蓋（mask）到它的子元件上，從而改變子元件的顏色。

ShaderMask 實現漸變色文字

ShaderMask 的建構函式定義如下。

const ShaderMask({
  Key? key,
  required this.shaderCallback,
  this.blendMode = BlendMode.modulate,
  Widget? child,
})

其中關鍵的引數是 shaderCallback回撥方法，通過回撥方法可以構建一個著色器來為子元件著色，典型的做法是使用 Gradient 的子類（如 LinearGradient 和 RadialGradial）來建立著色器。blendMode 引數則用於設定著色的方式。因此，我們可以利用LinearGradient來實現漸變色文字，範例程式碼如下，其中 blendMode 選擇為 BlendMode.srcIn 是忽略子元件原有的顏色，使用著色器來對子元件著色。

ShaderMask(
  shaderCallback: (rect) {
    return LinearGradient(
      begin: Alignment.centerLeft,
      end: Alignment.centerRight,
      colors: [
        Colors.blue,
        Colors.green[300]!,
        Colors.orange[400]!,
        Colors.red,
      ],
    ).createShader(rect);
  },
  blendMode: BlendMode.srcIn,
  child: const Text(
    '島上碼農',
    style: TextStyle(
      fontSize: 36.0,
      fontWeight: FontWeight.bold,
    ),
  ),
),

實現效果如下圖。

實際上，不僅僅能夠對文字著色，還可以對圖片著色，比如我們使用一個 Row 元件在文字前面增加一個Image 元件，可以實現下面的效果。

讓漸變色動起來

靜態的漸變色著色還不夠，Gradient 還有個 transform 來實現三維空間變換的漸變效果，我們可以利用這個引數和動畫元件實現動畫效果，比如下面這樣。

這裡其實就是使用了動畫控制 transform 實現橫向平移。由於 transform 是一個 GradientTransform 類，實現這樣的效果需要定義一個GradientTransform子類，如下所示。

@immutable
class SweepTransform extends GradientTransform {
  const SweepTransform(this.dx, this.dy);

  final double dx;
  final double dy;

  @override
  Matrix4 transform(Rect bounds, {TextDirection? textDirection}) {
    return Matrix4.identity()..translate(dx, dy);
  }

  @override
  bool operator ==(Object other) {
    if (identical(this, other)) {
      return true;
    }
    if (other.runtimeType != runtimeType) {
      return false;
    }
    return other is SweepTransform && other.dx == dx && other.dy == dy;
  }

  @override
  int get hashCode => dx.hashCode & dy.hashCode;
}

然後通過 Animation 動畫物件的值控制漸變色平移的距離就可以實現漸變色橫向掃過的效果了，程式碼如下所示。

ShaderMask(
  shaderCallback: (rect) {
    return LinearGradient(
      begin: Alignment.centerLeft,
      end: Alignment.centerRight,
      colors: [
        Colors.blue,
        Colors.green[300]!,
        Colors.orange[400]!,
        Colors.red,
      ],
      transform: SweepTransform(
          (_animation.value - 0.5) * rect.width, 0.0),
    ).createShader(rect);
  },
  blendMode: BlendMode.srcIn,
  child: Row(
    mainAxisAlignment: MainAxisAlignment.center,
    children: [
      Image.asset(
        'images/logo.png',
        scale: 2,
      ),
      const Text(
        '島上碼農',
        style: TextStyle(
          fontSize: 36.0,
          fontWeight: FontWeight.bold,
        ),
      ),
    ],
  ),
),

圖片填充

除了使用漸變色之外，我們還可以利用 ImageShader 使用圖片填充文字，實現一些其他的文字特效，比如用火焰圖片作為背景，讓文字看起來像燃燒了一樣。

實現的程式碼如下，其中動效是通過 ImageShader 的建構函式的第4個引數的矩陣matrix4運算實現的，相當於是讓填充圖片移動來實現火焰往上升的效果。

ShaderMask(
  shaderCallback: (rect) {

    return ImageShader(
        fillImage,
        TileMode.decal,
        TileMode.decal,
        (Matrix4.identity()
              ..translate(-20.0 * _animation.value,
                  -150.0 * _animation.value))
            .storage);
  },
  blendMode: BlendMode.srcIn,
  child: Row(
    mainAxisAlignment: MainAxisAlignment.center,
    children: [
      Image.asset(
        'images/logo.png',
        scale: 2,
      ),
      const Text(
        '島上碼農',
        style: TextStyle(
          fontSize: 36.0,
          fontWeight: FontWeight.bold,
        ),
      ),
    ],
  ),
)

總結

本篇介紹了 ShaderMask 元件的應用，通過 ShaderMask 元件我們可以對子元件進行著色，從而改變子元件原來的顏色，實現如漸變色填充、圖片填充等效果。本篇完整原始碼已提交至：實用元件相關原始碼。

到此這篇關於Android利用ShaderMask實現花裡胡哨的文字特效的文章就介紹到這了,更多相關Android ShaderMask文字特效內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com！

Android利用ShaderMask實現花裡胡哨的文字特效

目錄

前言

ShaderMask 實現漸變色文字

讓漸變色動起來

圖片填充

總結

熱門文章