文章目录
前言
一、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 可以制作出很多很好看的文字特效。