【Flutte】【package】animated_text_kit 漂亮的动态文字效果，功能很多

---

前言

---

一、animated_text_kit 是什么？

第三方插件，能让你快速的拥有动态文件效果的功能，效果很多，还可以各种功能叠加。

二、使用步骤

包地址：https://pub.flutter-io.cn/packages/animated_text_kit

1.引入库

代码如下：

animated_text_kit: ^4.2.2

2.基础参数

代码如下（示例）：

totalRepeatCount: 4,//重复多少次animatedTexts 列表里面的数据
pause: const Duration(milliseconds: 1000),//每个动画之间的间隔
displayFullTextOnTap: true,//点击动画，让动画加速完成
stopPauseOnTap: true,//点击是否停止动画，true 就会点击停止动画
repeatForever:true//动画循环是否永不停止停止
onFinished： //动画结束之后的操作
onTap //点击
onNext //下一个文本动画之前调用

AnimatedTextKit(
  animatedTexts: [
  //里面可以存放多种效果，会从上到下的运行这些效果
    TypewriterAnimatedText(
      'Hello world!',
      textStyle: const TextStyle(
        fontSize: 32.0,
        fontWeight: FontWeight.bold,
      ),
      speed: const Duration(milliseconds: 2000),
    ),
  ],
  
  totalRepeatCount: 4,//重复多少次animatedTexts 列表里面的数据
  pause: const Duration(milliseconds: 1000),//每个动画之间的间隔
  displayFullTextOnTap: true,//点击动画，让动画加速完成
  stopPauseOnTap: true,//点击是否停止动画，true 就会点击停止动画
)

该处使用的url网络请求的数据。

3.具体效果

1.滚动效果（具体运行查看）

         SizedBox(
              height: 200,
              width: double.infinity,
              child: Card(
                elevation: 10,
                child:
                    //旋转的文字效果，可以自己组合
                    Row(
                  mainAxisSize: MainAxisSize.min,
                  children: <Widget>[
                    const SizedBox(width: 20.0, height: 100.0),
                    //固定位置的文字，不滚动
                    const Text(
                      'Be',
                      style: TextStyle(fontSize: 43.0),
                    ),
                    //间隔
                    const SizedBox(width: 20.0, height: 100.0),
                    DefaultTextStyle(
                      style: const TextStyle(
                          fontSize: 40.0,
                          fontFamily: 'Horizon',
                          color: Colors.red),
                      child: AnimatedTextKit(
                        animatedTexts: [
                          RotateAnimatedText('AWESOME'),
                          RotateAnimatedText('OPTIMISTIC'),
                          RotateAnimatedText('DIFFERENT'),
                        ],
                        onTap: () {
                          print("Tap Event");
                        },
                      ),
                    ),
                  ],
                ),
              ),
            ),

2.渐入渐出的效果（具体运行查看）

    //渐入渐出的效果
            SizedBox(
              width: double.infinity,
              child: Card(
                elevation: 10,
                child: DefaultTextStyle(
                  style: const TextStyle(
                      fontSize: 32.0,
                      fontWeight: FontWeight.bold,
                      color: Colors.red),
                  child: AnimatedTextKit(
                    animatedTexts: [
                      FadeAnimatedText('do IT!'),
                      FadeAnimatedText('do it RIGHT!!'),
                      FadeAnimatedText('do it RIGHT NOW!!!'),
                    ],
                    onTap: () {
                      print("Tap Event");
                    },
                  ),
                ),
              ),
            ),

![在这里插入图片描述](https://img-blog.csdnimg.cn/d64cf5ab7f5749a5a626f3b9cb1796f4.png

3.打字机的效果（具体运行查看），一个一个字出现

          SizedBox(
              width: 250.0,
              child: Card(
                child: DefaultTextStyle(
                  style: const TextStyle(
                      fontSize: 30.0, fontFamily: 'Bobbers', color: Colors.red),
                  child: AnimatedTextKit(
                    animatedTexts: [
                      TyperAnimatedText('我是打字机的效果1'),
                      TyperAnimatedText('我 是 打 字 机 的 效 果 2'),
                      TyperAnimatedText('我 是 打 字 机 的 效 果 2'),
                      TyperAnimatedText('我 是 打 字 机 的 效 果 2'),
                    ],
                    onTap: () {
                      print("Tap Event");
                    },
                  ),
                ),
              ),
            ),

4.TypewriterAnimatedText也是打字机的效果（具体运行查看），一个一个字出现

            SizedBox(
              width: 250.0,
              child: DefaultTextStyle(
                style: const TextStyle(
                    fontSize: 30.0, fontFamily: 'Agne', color: Colors.red),
                child: AnimatedTextKit(
                  animatedTexts: [
                    TypewriterAnimatedText('Discipline is the best tool'),
                    TypewriterAnimatedText('Design first, then code'),
                    TypewriterAnimatedText(
                        'Do not patch bugs out, rewrite them'),
                    TypewriterAnimatedText(
                        'Do not test bugs out, design them out'),
                  ],
                  onTap: () {
                    print("Tap Event");
                  },
                ),
              ),
            ),

5.发大缩小的效果（具体运行查看）

SizedBox(
   width: 250.0,
   child: DefaultTextStyle(
     style: const TextStyle(
         fontSize: 70.0,
         fontFamily: 'Canterbury',
         color: Colors.red),
     child: AnimatedTextKit(
       animatedTexts: [
         ScaleAnimatedText('Think'),
         ScaleAnimatedText('Build'),
         ScaleAnimatedText('Ship'),
       ],
       onTap: () {
         print("Tap Event");
       },
     ),
   ),
 ),

6.颜色渐变的效果（具体运行查看）

  List<Color> colorizeColors = [
    Colors.purple,
    Colors.blue,
    Colors.yellow,
    Colors.red,
  ];

  TextStyle colorizeTextStyle = TextStyle(
    fontSize: 50.0,
    fontFamily: 'Horizon',
  );
 SizedBox(
    width: 250.0,
    child: AnimatedTextKit(
      animatedTexts: [
        ColorizeAnimatedText(
          'Larry Page',
          textStyle: colorizeTextStyle,
          colors: colorizeColors,
        ),
        ColorizeAnimatedText(
          'Bill Gates',
          textStyle: colorizeTextStyle,
          colors: colorizeColors,
        ),
        ColorizeAnimatedText(
          'Steve Jobs',
          textStyle: colorizeTextStyle,
          colors: colorizeColors,
        ),
      ],
      isRepeatingAnimation: true,
      onTap: () {
        print("Tap Event");
      },
    ),
  ),

7.液态的效果（具体运行查看）

            SizedBox(
              // width: 250.0,
              child: TextLiquidFill(
                text: '液态的效果',
                waveColor: Colors.blueAccent,
                boxBackgroundColor: Colors.redAccent,
                textStyle: TextStyle(
                  fontSize: 80.0,
                  fontWeight: FontWeight.bold,
                ),
                boxHeight: 300.0,
              ),
            ),

8.跳动文字的效果（具体运行查看）

         SizedBox(
              height: 200,
              child: DefaultTextStyle(
                style: const TextStyle(fontSize: 20.0, color: Colors.red),
                child: AnimatedTextKit(
                  animatedTexts: [
                    WavyAnimatedText('跳动文字'),
                    WavyAnimatedText('看我跳动的很快乐吧！'),
                  ],
                  isRepeatingAnimation: true,
                  onTap: () {
                    print("Tap Event");
                  },
                ),
              ),
            ),

9.忽隐忽现的效果（具体运行查看）

         SizedBox(
              // width: 250.0,
              child: DefaultTextStyle(
                style: const TextStyle(
                  fontSize: 35,
                  color: Colors.pink,
                  shadows: [
                    Shadow(
                      blurRadius: 7.0,
                      color: Colors.white,
                      offset: Offset(0, 0),
                    ),
                  ],
                ),
                child: AnimatedTextKit(
                  repeatForever: true,
                  animatedTexts: [
                    FlickerAnimatedText('忽隐忽现 忽隐忽现'),
                    FlickerAnimatedText('效果'),
                    FlickerAnimatedText("是这样的啊啊啊啊啊啊啊啊啊"),
                  ],
                  onTap: () {
                    print("Tap Event");
                  },
                ),
              ),
            ),

注意：
你可以多个效果结合使用，TextLiquidFill 不能

AnimatedTextKit(
  animatedTexts: [
    FadeAnimatedText(
      'Fade First',
      textStyle: TextStyle(fontSize: 32.0, fontWeight: FontWeight.bold),
    ),
    ScaleAnimatedText(
      'Then Scale',
      textStyle: TextStyle(fontSize: 70.0, fontFamily: 'Canterbury'),
    ),
  ],
),

---

总结

animated_text_kit 可以制作出很多很好看的文字特效。