花裡胡哨的文字特效，你學會了嗎？

語言: CN / TW / HK
時間 2022-12-03 03:15:11

theme: v-green highlight: atom-one-dark

本文正在參加「金石計劃 . 瓜分6萬現金大獎」

前言

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

ShaderMask 實現漸變色文字

ShaderMask 的建構函式定義如下。 dart const ShaderMask({ Key? key, required this.shaderCallback, this.blendMode = BlendMode.modulate, Widget? child, }) 其中關鍵的引數是 shaderCallback回撥方法，通過 回撥方法可以構建一個著色器來為子元件著色，典型的做法是使用 Gradient 的子類（如 LinearGradient 和 RadialGradial）來建立著色器。blendMode 引數則用於設定著色的方式。 因此，我們可以利用LinearGradient來實現漸變色文字，示例程式碼如下，其中 blendMode 選擇為 BlendMode.srcIn 是忽略子元件原有的顏色，使用著色器來對子元件著色。 dart 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, ), ), ), 實現效果如下圖。

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

image.png

讓漸變色動起來

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

漸變動畫.gif 這裡其實就是使用了動畫控制 transform 實現橫向平移。由於 transform 是一個 GradientTransform 類，實現這樣的效果需要定義一個GradientTransform子類，如下所示。 ```dart @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` 動畫物件的值控制漸變色平移的距離就可以實現漸變色橫向掃過的效果了，程式碼如下所示。dart 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 使用圖片填充文字，實現一些其他的文字特效，比如用火焰圖片作為背景，讓文字看起來像燃燒了一樣。

圖片背景填充.gif

實現的程式碼如下，其中動效是通過 ImageShader 的建構函式的第4個引數的矩陣matrix4運算實現的，相當於是讓填充圖片移動來實現火焰往上升的效果。 ```dart 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 元件我們可以對子元件進行著色，從而改變子元件原來的顏色，實現如漸變色填充、圖片填充等效果。本篇完整原始碼已提交至：實用元件相關原始碼。

本篇原始碼已上傳至：實用元件相關程式碼。

我是島上碼農，微信公眾號同名。如有問題可以加本人微信交流，微訊號：island-coder。

👍🏻：覺得有收穫請點個贊鼓勵一下！

🌟：收藏文章，方便回看哦！

💬：評論交流，互相進步！

本文正在參加「金石計劃 . 瓜分6萬現金大獎」

「」
「」