Flutter AnimatedTextExample文本动画组件

在创建Flutter应用程序的时候，你有没有想过，如果能够增加一些文本的炫酷动画，会不会使得自己的APP体验感更强大呢？

我们通过今天的教程，一起来探索一些解决方案和包，以及如何使用它们实现文本动画的制作。

使用Animated Text Kit

这个插件包含了很多种炫酷的文本动画效果

来看看如何使用。

第一步，装它！

进入pubspec.yaml文件，并添加依赖如下：

dependencies: animated_text_kit: ^4.2.1

第二步，导入！

安装完毕之后，你需要在使用的Dart代码文件中引用一下，就像下边这个样子：

import 'package:animated_text_kit/animated_text_kit.dart';

第三步，让文字炫动起来

导入之后，你就可以让你的文字动起来了。接下来的这一段使用Typewiter Animation控制字符串“Hello World”。

AnimatedTextKit( animatedTexts: [ TypewriterAnimatedText( 'Hello world!', textStyle: const TextStyle( fontSize: 32.0, fontWeight: FontWeight.bold, ), speed: const Duration(milliseconds: 2000), ), ], totalRepeatCount: 4, pause: const Duration(milliseconds: 1000), displayFullTextOnTap: true, stopPauseOnTap: true,)

来解释一下参数：

1. pause：文本动画切换间隔时间长度
2. displayFullTextOnTap：是否通过点击动画，已实现快速完成效果
3. isRepeatingAnimation：控制动画是否重复展现
4. repeatForever 控制动画是否永远重复
5. totalRepeatCount 总共重复次数（PS：repeatForever参数必须设置为false）

接下来看看能够实现的多种效果吧：

文本旋转

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: TextStyle( fontSize: 40.0, fontFamily: 'Horizon', ), child: AnimatedTextKit( animatedTexts: [ RotateAnimatedText('AWESOME'), RotateAnimatedText('OPTIMISTIC'), RotateAnimatedText( 'DIFFERENT', textStyle: const TextStyle( decoration: TextDecoration.underline, ), ), ], onTap: onTap, isRepeatingAnimation: true, totalRepeatCount: 10, ), ), ],),

文本淡化

AnimatedTextExample( label: 'Fade', color: Colors.brown[600], child: DefaultTextStyle( style: const TextStyle( fontSize: 32.0, fontWeight: FontWeight.bold, ), child: AnimatedTextKit( animatedTexts: [ FadeAnimatedText('do IT!'), FadeAnimatedText('do it RIGHT!!'), FadeAnimatedText('do it RIGHT NOW!!!'), ], onTap: onTap, ), ),),

输入文字动画

AnimatedTextExample( label: 'Typer', color: Colors.lightGreen[800], child: SizedBox( width: 250.0, child: DefaultTextStyle( style: const TextStyle( fontSize: 30.0, fontFamily: 'Bobbers', ), child: AnimatedTextKit( animatedTexts: [ TyperAnimatedText('It is not enough to do your best,'), TyperAnimatedText('you must know what to do,'), TyperAnimatedText('and then do your best'), TyperAnimatedText('- W.Edwards Deming'), ], onTap: onTap, ), ), ),),

打字机文字动画

AnimatedTextExample( label: 'Typewriter', color: Colors.teal[700], child: SizedBox( width: 250.0, child: DefaultTextStyle( style: const TextStyle( fontSize: 30.0, fontFamily: 'Agne', ), child: AnimatedTextKit( animatedTexts: [ TypewriterAnimatedText('Discipline is the best tool'), TypewriterAnimatedText('Design first, then code', cursor: '|'), TypewriterAnimatedText('Do not patch bugs out, rewrite them', cursor: '<|>'), TypewriterAnimatedText('Do not test bugs out, design them out', cursor: ''), ], onTap: onTap, ), ), ),),

文本缩放动画

AnimatedTextExample( label: 'Scale', color: Colors.blue[700], child: DefaultTextStyle( style: const TextStyle( fontSize: 70.0, fontFamily: 'Canterbury', ), child: AnimatedTextKit( animatedTexts: [ ScaleAnimatedText('Think'), ScaleAnimatedText('Build'), ScaleAnimatedText('Ship'), ], onTap: onTap, ), ),),

文字液体填充效果

AnimatedTextExample( label: 'TextLiquidFill', color: Colors.white, child: TextLiquidFill( text: 'LIQUIDY', waveColor: Colors.blueAccent, boxBackgroundColor: Colors.redAccent, textStyle: const TextStyle( fontSize: 70, fontWeight: FontWeight.bold, ), boxHeight: 300, ),),

波浪文本动画

AnimatedTextExample( label: 'Wavy Text', color: Colors.purple, child: DefaultTextStyle( style: const TextStyle( fontSize: 20.0, ), child: AnimatedTextKit( animatedTexts: [ WavyAnimatedText( 'Hello World', textStyle: const TextStyle( fontSize: 24.0, fontWeight: FontWeight.bold, ), ), WavyAnimatedText('Look at the waves'), WavyAnimatedText('They look so Amazing'), ], onTap: onTap, ), ),),

文字闪烁动画

AnimatedTextExample( label: 'Flicker', color: Colors.pink[300], child: DefaultTextStyle( style: const TextStyle( fontSize: 35, color: Colors.white, shadows: [ Shadow( blurRadius: 7.0, color: Colors.white, offset: Offset(0, 0), ), ], ), child: AnimatedTextKit( repeatForever: true, animatedTexts: [ FlickerAnimatedText('Flicker Frenzy'), FlickerAnimatedText('Night Vibes On'), FlickerAnimatedText("C'est La Vie !"), ], onTap: onTap, ), ),),

通过以上几个效果，是不是被如此炫酷的库迷住了呢，更多特效大家一起去摸索吧。