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文字特效内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
Android 8.1 Launcher3实现动态指针时钟功能
这篇文章主要介绍了Android 8.1 Launcher3实现动态指针时钟功能，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2018-07-07
这篇文章主要为大家详细介绍了Android原生视频播放VideoView的使用，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-05-05
今天小编就为大家分享一篇android camera yuv帧水平翻转实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
这篇文章主要为大家详细介绍了Android页面中的引导蒙层使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-03-03
这篇文章主要介绍了Android 7.0 运行时权限弹窗问题的解决，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-03-03
这篇文章主要总结了Android中自定义View的实现方式的相关资料，文中介绍的非常详细，对各位Android开发者们学习或者使用自定义View具有一定的参考学习价值，需要的朋友们下面来一起看看吧。2017-04-04
这篇文章主要为大家详细介绍了Android Checkbox的使用方法，感兴趣的小伙伴们可以参考一下2016-02-02
这篇文章主要介绍了Android自定义ScrollView使用自定义监听 ，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-12-12
这篇文章主要给大家介绍了关于android仿微信表情雨下落效果的实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2018-09-09
Android自定义ViewGroup嵌套与交互实现幕布全屏滚动
这篇文章主要为大家介绍了Android自定义ViewGroup嵌套与交互实现幕布全屏滚动效果示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-01-01
最新评论