Android Flutter实现五种酷炫文字动画效果详解
作者:岛上码农 发布时间:2023-06-27 02:57:16
前言
偶然逛国外博客,看到了一个介绍文字动画的库,进入 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
:动画完成后的组件,默认是返回一个具有样式修饰的文字。
来源:https://mp.weixin.qq.com/s/x9lINsXvcBAlk7wNu5aP3A
猜你喜欢
- 1.任何一门编程语言均有相关数据类型。C#也不例外,其基本数据类型有int,short,long,float,double,string等。
- 概要笔者近期做到对天气预报JSON数据解析,在此小记。天气预报接口:http://wthrcdn.etouch.cn/weather_min
- 什么是有序性在开发中,我们通常按照从上到下的顺序编写程序指令,并且希望cpu和编译器按照我们预先编写的顺序去执。但往往cpu和编译器为了提高
- 之前我们在使用vue进行 h5 表单录入的过程中,遇到了Android软键盘弹出,覆盖 h5页面 输入框 问题,在此进行回顾并分享给大家:系
- 配置不生效的解决办法注意:如果配置不生效,则说明spring优先加载了其他配置:解决办法:添加启动参数 -Dlogging.config=c
- 前言static静态的,不变的,在某个类中只有一个,不会因实例化对象的不同而不同。static可以修饰类、字段、属性、方法等。如一个方法前加
- Pom文件的依赖我们进入POM文件,首先是看到的是Pom文件中的parentparent是Spring Boot的框架版本控制中心<!
- 在java里, 我们可以使用Executors.newFixedThreadPool 来创建线程池, 然后就可以不停的创建新任务,并用线程池
- 本文实例讲述了Android中Service实时向Activity传递数据的方法。分享给大家供大家参考。具体如下:这里演示一个案例,需求如下
- 概述在一个程序执行的过程中,各条语句的执行顺序对程序的结果是有直接影响的。也就是说,程序的流程对运行结果有直接的影响。所以,我们必须清楚每条
- 本文实例为大家分享了Android实现View滑动效果的具体代码,供大家参考,具体内容如下一、View的滑动简介View的滑动是Androi
- 界面效果图如下:报表界面说下关键代码 需要开启 Windows Management Instrumentation服务(默认已经
- 像javascript中有eval()来执行动态代码,c#中是没有的,于是自己动手丰衣足食,先来代码using System;using S
- 最近有个需求,我需要获取所有同一类型的定时任务的对象,并自动执行。我想的方案是:直接获取某个接口下面所有的实现类的对象集合,方便以后只需要
- 前一段时间遇到一个问题,是关于读取项目中文件资源的问题。我是一个maven工程 我把一张照片放到resource下面,然后在本地读取的时候可
- 我们在设计layout的时候,使用Split视图,就是左侧是代码,右侧是设计图,但是我们忽视了最上方的工具栏,这里才是真正的宝藏。下面教大家
- 本文实例讲述了C#获取网页源代码的方法。分享给大家供大家参考。具体如下:public string GetPageHTML(string u
- 今天跟大家分享一个利用外部Jar包来实现Java操作CSV文件一.资源下载1.直接下载Jar包:javacsv-2.0.jar2.利用Mav
- RestTemplate未设置超时时间,导致RabbitMQ队列大量堆积,消费者假死,不进行消费,类似线程堵塞。排查:从日志排查问题,在从进
- 一、使用swing嵌套浏览器要实现的功能:通过java的swing实现在一个窗体中嵌套一个浏览器,可以在这个浏览器中将另一个项目的内容显示出