脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 软件编程 → Android → Android ShaderMask文字特效

Android利用ShaderMask实现花里胡哨的文字特效

 更新时间：2022年12月04日 08:46:05   作者：岛上码农  
我们的 App 大部分时候的文字都是一种颜色，实际上，文字的颜色也可以多姿多彩。我们今天就来介绍一个能够轻松实现文字渐变色的组件 —— 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 Jetpack组件库LiveData源码深入探究

    Android Jetpack组件库LiveData源码深入探究

    LiveData是Jetpack组件的一部分，更多的时候是搭配ViewModel来使用，相对于Observable，LiveData的最大优势是其具有生命感知的，换句话说，LiveData可以保证只有在组件（ Activity、Fragment、Service）处于活动生命周期状态的时候才会更新数据
    2022-09-09
  • Flutter UI实现侧拉抽屉菜单

    Flutter UI实现侧拉抽屉菜单

    这篇文章主要为大家详细介绍了Flutter UI实现侧拉抽屉菜单，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-03-03
  • Android ExpandableListView单选以及多选实现代码

    Android ExpandableListView单选以及多选实现代码

    这篇文章主要为大家详细介绍了Android ExpandableListView单选以及多选的实现代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2018-06-06
  • Android仿外卖购物车功能

    Android仿外卖购物车功能

    这篇文章主要为大家详细介绍了Android仿外卖购物车功能的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-06-06
  • Android Retrofit使用详细教程

    Android Retrofit使用详细教程

    Retrofit是Android用来接口请求的网络框架，内部是基于OkHttp实现的，retrofit负责接口请求的封装，retrofit可以直接将接口数据解析为Bean类、List集合等，直接简化了中间繁琐的数据解析过程，这篇文章主要介绍了Android Retrofit使用详情,需要的朋友可以参考下
    2024-03-03
  • Android移动应用开发指南之六种布局详解

    Android移动应用开发指南之六种布局详解

    Android应用界面要美观好看,就需要运用到一定的布局技术,Android布局是不可忽视的,是android应用界面开发的重要一环,这篇文章主要给大家介绍了关于Android移动应用开发指南之六种布局的相关资料,需要的朋友可以参考下
    2022-09-09
  • Android编程使用内容提供者方式(ContentProvider)进行存储的方法

    Android编程使用内容提供者方式(ContentProvider)进行存储的方法

    这篇文章主要介绍了Android编程使用内容提供者方式进行存储的方法,涉及Android内容提供者的创建,配置及针对数据的增删改查等操作技巧,需要的朋友可以参考下
    2016-01-01
  • Android使用自定义字体的方法

    Android使用自定义字体的方法

    这篇文章主要介绍了Android使用自定义字体的方法,涉及Android字体设置的步骤与相关注意事项,需要的朋友可以参考下
    2016-01-01
  • Android自定义videoview仿抖音界面

    Android自定义videoview仿抖音界面

    这篇文章主要为大家详细介绍了Android自定义videoview仿抖音界面，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-05-05
  • Android 添加TextView删除线(代码简单)

    Android 添加TextView删除线(代码简单)

    最近接了个项目，其中有项目需求是这样的，有这么个需求，就是一个产品下有两个价格，一个是市场价，一个是销售价，这时要把市场价添加个删除线；怎么实现呢？下面小编给大家分享一段简单的代码实现Android 添加TextView删除线
    2016-02-02

最新评论