花里胡哨的文字特效，你学会了吗？

本文正在参加「金石方案 . 分割6万现金大奖」

前言

咱们的 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 组件咱们能够对子组件进行上色，然后改变子组件本来的色彩，完成如突变色填充、图片填充等作用。

---

本篇源码已上传至：有用组件相关代码。

我是岛上码农，微信大众号同名。如有问题能够加自己微信沟通，微信号：island-coder。

：觉得有收成请点个赞鼓励一下！

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

：评论沟通，互相前进！

本文正在参加「金石方案 . 分割6万现金大奖」