Android利用ShaderMask實現花裡胡哨的文字特效
前言
我們的 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文字特效內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!
推薦閱讀:
- 在Flutter中制作翻轉卡片動畫的完整實例代碼
- Flutter加載圖片的多樣玩法匯總
- Flutter懸浮按鈕FloatingActionButton使用詳解
- Flutter實現自定義篩選框的示例代碼
- Flutter給控件實現鉆石般的微光特效