Android Flutter实现五种酷炫文字动画效果详解

更新时间：2022年03月24日 11:24:10 作者：岛上码农

animated_text_kit这一动画库有多种文字动画效果，文中将利用它实现五种酷炫的文字动画：波浪涌动效果、波浪线跳动文字组、彩虹动效、滚动广告牌效果和打字效果，需要的可以参考一下

前言

偶然逛国外博客，看到了一个介绍文字动画的库，进入 pub 一看，立马就爱上这个动画库了，几乎你能想到的文字动画效果它都有！现在正式给大家安利一下这个库：animated_text_kit。本篇我们介绍几个酷炫的效果，其他的效果大家可以自行查看官网文档使用。

波浪涌动效果

波浪涌动

上面的动画效果只需要下面几行代码，其中loadUntil用于控制波浪最终停留的高度，取值是0-1.0，如果是1.0则会覆盖满整个文字，不足1.0的时候会在文字上一直显示波浪涌动的效果。这种效果用来做页面加载到时候比干巴巴地显示个“加载中”有趣多了！

Widget liquidText(String text) {
    return SizedBox(
      width: 320.0,
      child: TextLiquidFill(
        text: text,
        waveColor: Colors.blue[400]!,
        boxBackgroundColor: Colors.redAccent,
        textStyle: TextStyle(
          fontSize: 80.0,
          fontWeight: FontWeight.bold,
        ),
        boxHeight: 300.0,
        loadUntil: 0.7,
      ),
    );
  }

波浪线跳动文字组

波浪跳动文字

文字按波浪线跳动的感觉是不是很酷，而且还支持文字组哦，可以实现多行文字依次动起来！代码也只有几行，其中repeatForever代表动画是否一直重复，如果为否的话，按设定次数重复（默认3次，可配置）。

Widget wavyText(List<String> texts) {
  return DefaultTextStyle(
    style: const TextStyle(
      color: Colors.blue,
      fontSize: 20.0,
    ),
    child: AnimatedTextKit(
      animatedTexts: texts.map((e) => WavyAnimatedText(e)).toList(),
      isRepeatingAnimation: true,
      repeatForever: true,
      onTap: () {
        print("文字点击事件");
      },
    ),
  );
}

彩虹动效

彩虹文字动效

一道彩虹滑过文字，最终留下渐变的效果，瞬间让文字丰富多彩！动效的颜色可以通过一个Color 数组配置，而文字自身的参数（如字体、尺寸、粗细等）依旧可以保留。代码如下所示：

Widget rainbowText(List<String> texts) {
  const colorizeColors = [
    Colors.purple,
    Colors.blue,
    Colors.yellow,
    Colors.red,
  ];

  const colorizeTextStyle = TextStyle(
    fontSize: 36.0,
    fontWeight: FontWeight.bold,
  );
  return SizedBox(
    width: 320.0,
    child: AnimatedTextKit(
      animatedTexts: texts
          .map((e) => ColorizeAnimatedText(
                e,
                textAlign: TextAlign.center,
                textStyle: colorizeTextStyle,
                colors: colorizeColors,
              ))
          .toList(),
      isRepeatingAnimation: true,
      repeatForever: true,
      onTap: () {
        print("文字点击事件");
      },
    ),
  );
}

滚动广告牌效果

滚动文字

一行文字像滚动广告牌那样滚动下来，非常适合做一些动态信息的播报。代码如下：

Widget rotateText(List<String> texts) {
  return SizedBox(
    width: 320.0,
    height: 100.0,
    child: DefaultTextStyle(
      style: const TextStyle(
        fontSize: 36.0,
        fontFamily: 'Horizon',
        fontWeight: FontWeight.bold,
        color: Colors.blue,
      ),
      child: AnimatedTextKit(
        animatedTexts: texts.map((e) => RotateAnimatedText(e)).toList(),
        onTap: () {
          print("点击事件");
        },
        repeatForever: true,
      ),
    ),
  );
}

打字效果

一个个文字像敲击键盘一样出现在屏幕上，如果配送机械键盘“啪啦啪啦”的声音，简直就感觉是真的在敲代码一样！代码一样很简单！

Widget typerText(List<String> texts) {
  return SizedBox(
    width: 320.0,
    child: DefaultTextStyle(
      style: const TextStyle(
        fontSize: 30.0,
        color: Colors.blue,
      ),
      child: AnimatedTextKit(
        animatedTexts: texts
            .map((e) => TyperAnimatedText(
                  e,
                  textAlign: TextAlign.start,
                  speed: Duration(milliseconds: 300),
                ))
            .toList(),
        onTap: () {
          print("文字点击事件");
        },
        repeatForever: true,
      ),
    ),
  );
}

其他效果

animated_text_kit 还提供了其他文字动效，如下所示：

渐现效果（Fade）
打字机效果（Typewriter）
缩放效果（Scale）
闪烁效果（Flicker）

自定义效果

支持自定义效果，只需要动效类继承AnimatedText，然后重载下面的方法就可以了：

构造方法：通过构造方法配置动效参数
initAnimation：初始化 Animation 对象，并将其与 AnimationController 绑定；
animatedBuilder：动效组件构建方法，根据 AnimationController 的值构建当前状态的组件；
completeText：动画完成后的组件，默认是返回一个具有样式修饰的文字。

总结

animated_text_kit 是一个非常受欢迎的文字动画库，在 pub上收获了超过2000个喜欢，Github 上贡献者22人，收获了1.2k Star，可以说十分强大的。更重要的是它的使用非常简洁，文档完善，基本上拿来即用，喜欢的朋友赶紧用起来，让你的文字酷炫起来！

以上就是Android Flutter实现五种酷炫文字动画效果详解的详细内容，更多关于Android Flutter文字动画的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

SharedPreference 初始化源码解析
这篇文章主要为大家介绍了SharedPreference 初始化源码解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-03-03
Android 使用帧动画内存溢出解决方案
这篇文章主要介绍了Android 使用帧动画内存溢出解决方案的相关资料,这里提供了详细的解决办法，具有参考价值，需要的朋友可以参考下
2016-12-12
Android 序列化的存储和读取总结及简单使用
这篇文章主要介绍了Android 序列化的存储和读取总结及简单使用的相关资料,Serializable接口和Parcelable接口，本文对这两种方式进行简单的总结和使用，需要的朋友可以参考下
2016-12-12
Android sd卡读取数据库实例代码
这篇文章主要介绍了Android sd卡读取数据库实例代码的相关资料,需要的朋友可以参考下
2017-02-02
android多开器解析与检测实现方法示例
最近有业务上的要求,要求app在本地进行诸如软件多开、hook框架、模拟器等安全检测,防止作弊行为,下面这篇文章主要给大家介绍了关于android多开器解析与检测实现的相关资料,需要的朋友可以参考下
2021-08-08
Android实现QQ手机管家悬浮小火箭效果
这篇文章主要介绍了Android实现QQ手机管家悬浮小火箭效果，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-05-05
Android使用Realm数据库实现App中的收藏功能(代码详解)
这篇文章主要介绍了Android使用Realm数据库实现App中的收藏功能,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2020-03-03
Android屏幕分辨率工具类使用详解
这篇文章主要为大家详细介绍了Android屏幕分辨率工具类使用，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-09-09
详解App保活技术实现
随着Android阵营的各大手机厂商对于续航的高度重视，两三年前的手机发布会更是把反保活作为一个系统的卖点，不断提出了各种反保活的方案，导致现在想实现应用保活简直难于上青天，甚至都需要一个团队来专门研究这个事情。本文将详细介绍App保活技术实现，给大家一个参考
2021-06-06
Android编程使用Intent传递图片的方法详解
这篇文章主要介绍了Android编程使用Intent传递图片的方法,结合实例形式分析了Android基于Intent传输图片的原理与具体实现技巧,需要的朋友可以参考下
2017-02-02