在前段時間寫程式碼的時候,碰到個需求:給這個文字加上漸變色!
當時我心裡只有一張圖:
先看一下效果圖:
嘿,你別說還挺好看。
話不多說,瞭解一下是如何實現的吧。
請出今天的主角:ShaderMask
。
官方介紹
按照慣例,我們還是先來看一下官方的介紹:
A widget that applies a mask generated by a Shader to its child.
一個小部件,將由著色器生成的遮罩應用於其子級。
官方示例
知道了ShaderMask
的作用之後我們就接著來看一下官方的示例:
ShaderMask(
shaderCallback: (Rect bounds) {
return RadialGradient(
center: Alignment.topLeft,
radius: 1.0,
colors: <Color>[Colors.yellow, Colors.deepOrange.shade900],
tileMode: TileMode.mirror,
).createShader(bounds);
},
child: const Text('I’m burning the memories'),
)
複製程式碼
然而,當我們把這段程式碼複製到編輯器,執行後:
什麼也沒有發生,因為我們的字是黑色的!
改一下,改成白色:
這就是官方demo的例子,也是 ShaderMask
最基礎的用法,下面就來說一下進階的用法。
會動的漸變
先看一下效果:
其實這個和 ShaderMask
本身沒有什麼關係了,是「著色器」和「動畫」的合作後,最後遮罩在一個 Widget 上所達到了現在的效果。
關鍵程式碼如下:
shaderCallback: (Rect bounds) {
return LinearGradient(colors: _colors, stops: [
0 + _gradientValue * 0.2,
_gradientValue * 0.8,
1 - _gradientValue * 0.3
]).createShader(bounds);
}
複製程式碼
最重要的是 stops
引數,他規定了漸變的顏色所在區域,值從0到1.
這樣再加上動畫,就完成了一個會動的漸變色這樣的效果。
萬物皆可 ShaderMask
前面我只是用了一個文字來演示 ShaderMask
的基礎用法,然而 ShaderMask
的 child 可以是任意 Widget。
比如:
結語
ShaderMask
可以很方便的為我們新增顏色,但是我們需要注意其中一點:
shader
是處於下層的,child
處於上層,也就是說,是我們的 child
蓋住了 shader
。
我們可以通過 blendMode
來控制他倆重疊部分的效果,如下:
圖來自張風捷特烈