写点什么

❤️❤️❤️爱了爱了!这样的文字动画让你爱不释手!

作者:岛上码农
  • 2022 年 7 月 08 日
  • 本文字数:2156 字

    阅读完需:约 7 分钟

❤️❤️❤️爱了爱了!这样的文字动画让你爱不释手!

前言

偶然逛国外博客,看到了一个介绍文字动画的库,进入 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,可以说十分强大的。更重要的是它的使用非常简洁,文档完善,基本上拿来即用,喜欢的朋友赶紧用起来,让你的文字酷炫起来!


发布于: 刚刚阅读数: 3
用户头像

岛上码农

关注

用代码连接孤岛,公众号@岛上码农 2022.03.03 加入

从南漂到北,从北漂到南的业余码农

评论

发布
暂无评论
❤️❤️❤️爱了爱了!这样的文字动画让你爱不释手!_flutter_岛上码农_InfoQ写作社区