系列文章

Flutter 旋转动画 — RotationTransition
Flutter 平移动画 — 4种实现方式
Flutter 淡入淡出与逐渐出现动画
Flutter 尺寸缩放、形状、颜色、阴影变换动画
Flutter 列表Item动画 — AnimatedList实现Item左进左出、淡入淡出
Flutter Hero 实现共享元素转场动画
Flutter Hero 实现径向变换动画 — 圆形变成矩形的转场动画
Flutter 自定义动画 — 数字递增动画和文字逐行逐字出现或消失动画

文章目录

系列文章
1 文字变换动画效果图
2 动画基础知识
3 使用AnimatedBuilder 实现数字递增动画
4 自定义Tween实现文字逐行逐字出现或消失动画
- 4.1 自定义Tween
- 4.2 结合AnimatedBuilder实现文字逐字出现或消失
- 4.3 动画效果

1 文字变换动画效果图

2 动画基础知识

Animation 是 Flutter 动画库中的核心类，它插入用于引导动画的值。
AnimationController 管理动画。例如控制动画开始、停止、前进、后退等。
CurvedAnimation 将进程定义为非线性曲线。
Tween 在被动画对象使用的数据范围之间进行插值。例如，Tween 可以定义从红色到蓝色或从 0 到 255 的插值。
Listeners 和 StatusListeners 可监控动画状态的变化。
AnimatedWidget 是展示动画的Widget，Flutter提供一些动画Widget让我们快速实现动画效果。例如：DecoratedBoxTransition、FadeTransition、PositionedTransition、RelativePositionedTransition、RotationTransition、ScaleTransition、SizeTransition、SlideTransition
AnimatedBuilder 可自定义AnimatedWidget，实现自定义动画效果

3 使用AnimatedBuilder 实现数字递增动画

实现动画的步骤和前文中提到的使用 FadeTransition、SizeTransition、SlideTransition等AnimatedWidget类似。

定义AnimationController与Animation，在此处使用Tween补间动画。
构建AnimatedBuilder，将 Animation 的值显示出来即可。

完整的代码

class NumAnimationPage extends StatefulWidget {const NumAnimationPage({Key? key}) : super(key: key);@overrideState<StatefulWidget> createState() => _NumAnimationPageState();
}class _NumAnimationPageState extends State<NumAnimationPage>with SingleTickerProviderStateMixin {/// 持续时间为5秒的动画控制器late final AnimationController _controller = AnimationController(vsync: this,duration: const Duration(seconds: 5),)..forward();/// 数字从100 到 99999的补间动画late final Animation<num> _animation =Tween<num>(begin: 100, end: 99999).animate(_controller);@overrideWidget build(BuildContext context) {return Scaffold(body: Center(// 是一个AnimatedWidget，可自定义动画效果child: AnimatedBuilder(animation: _animation,builder: (context, child) {return Text(// 忽略小数点_animation.value.toStringAsFixed(0),style: const TextStyle(color: Colors.red, fontSize: 48),);},),),);}
}

动画效果

4 自定义Tween实现文字逐行逐字出现或消失动画

4.1 自定义Tween

自定义补间动画，接收的参数是字符串，返回的值是某个时刻对应的字符串内容。

class TextTween extends Tween<String> {TextTween({String end = ''}) : super(begin: '', end: end);@overrideString lerp(double t) {// 在动画过程中 t 的值是从 0 到 1var cutoff = (end!.length * t).round();// 返回动画时钟t时刻 对应的文字。return end!.substring(0, cutoff);}
}

4.2 结合AnimatedBuilder实现文字逐字出现或消失

这里用到了2个AnimationController的函数

AnimationController.forward(from: 0); 动画从头再次播放
AnimationController.reverse(); 动画反向播放

class CustomTextAnimationPage extends StatefulWidget {const CustomTextAnimationPage({Key? key}) : super(key: key);@overrideState<StatefulWidget> createState() => _CustomTextAnimationPageState();
}class _CustomTextAnimationPageState extends State<CustomTextAnimationPage>with SingleTickerProviderStateMixin {final String _text = '风急天高猿啸哀，渚清沙白鸟飞回。''\n无边落木萧萧下，不尽长江滚滚来。''\n万里悲秋常作客，百年多病独登台。''\n艰难苦恨繁霜鬓，潦倒新停浊酒杯。';/// 持续时间为10秒的动画控制器late final AnimationController _controller = AnimationController(vsync: this,duration: const Duration(seconds: 10),)..forward();late final Animation<String> _animation =TextTween(end: _text).animate(_controller);@overrideWidget build(BuildContext context) {return Scaffold(body: Center(child: Column(mainAxisSize: MainAxisSize.min,children: [AnimatedBuilder(animation: _animation,builder: (context, child) {return Text(_animation.value,style: const TextStyle(fontSize: 20, fontWeight: FontWeight.bold),);},),const SizedBox(height: 20),Row(mainAxisAlignment: MainAxisAlignment.center,children: [IconButton(tooltip: '重复一次',onPressed: () {_controller.forward(from: 0);},icon: const Icon(Icons.repeat_one),),IconButton(tooltip: '删除古诗',onPressed: () {_controller.reverse();},icon: const Icon(Icons.delete),)],),],),),);}
}

4.3 动画效果

Flutter 自定义动画 — 数字递增动画和文字逐行逐字出现或消失动画相关推荐

Flutter 自定义路由动画案例
前言: 各位同学大家好,最近国庆放假期间因为没有回老家过节(没买到车票啊)就写了一些flutter小案例就分享给大家 (Flutter 自定义路由动画案例),那么废话不多说我们正式开始准备工作需要 ...
swiftui动画之tab自定义切换动画_Unity动画系统详解1：在Unity中如何制作动画？
摘要:在场景中加入动态的物体,可以让整个场景更加生动.真实.Unity场景中的物体可以通过制作动画,让物体动起来.简单的动画如物体的移动.旋转(比如旋转的风扇.闪烁不定的灯泡等),复杂的动画如游戏中角 ...
Table表格文字超出后循环滚动的动画实现方案核心逻辑
需求前几天公司要求做一个动态表格:大概就是可配置的(颜色,字体,行数等等),用作屏幕展示.因此就要求表格文字在超出宽度时候可以有动画循环滚动展示内容.大概这个样子: 项目使用vue框架,动画因为涉及 ...
ae制h5文字动画_大杀器Bodymovin和Lottie：把AE动画转换成HTML5/Android/iOS原生动画
前段时间听部门老大说,Airbnb出了个移动端的动画库Lottie,可以和一个名叫Bodymovin的AE插件结合起来,把在AE上做好的动画导出为json文件,然后以Android/iOS原生动画的形 ...
Unity动画系统详解1：在Unity中如何制作动画？
摘要:在场景中加入动态的物体,可以让整个场景更加生动.真实.Unity场景中的物体可以通过制作动画,让物体动起来.简单的动画如物体的移动.旋转(比如旋转的风扇.闪烁不定的灯泡等),复杂的动画如游戏中角 ...
Flutter 自定义Widget——风车实现
最近在做一个天气模块的时候,风力需要显示一个旋转的风车,实现效果如下: 需求分析我们可以把上面的效果拆分为两个部分实现: 1.画一个风车的FanWidget 2.旋转动画一.风车Widget实现 ...
android 缩小消失动画,Android本身View的拉长缩短动画
作者:XINHAO_HAN 在Android中所熟悉的动画基本分为四种,无论是View动画还是属性动画 1.平移 2.透明 2.缩放 4.旋转附加项:插入器在这里我放一个简单的Demo或许能转变你 ...
axture动画原型制作_5个方法让你入门 Figma 了解APP动画制作
APP设计软件中 Figma 是云瑞设计比较推崇的一个软件,而今天分享的是,5个方法让你入门 Figma APP 了解动作制作,这绝对是这个软件的高阶运用之一,肯定值得您去了解,enjoy! 我喜欢F ...
flutter 自定义绘制_自定义可绘制
flutter 自定义绘制 I love our new designs! Recently I've been working on user interactions. One of them i ...

Flutter 自定义动画 — 数字递增动画和文字逐行逐字出现或消失动画

系列文章

文章目录

1 文字变换动画效果图

2 动画基础知识

3 使用AnimatedBuilder 实现数字递增动画

4 自定义Tween实现文字逐行逐字出现或消失动画

4.1 自定义Tween

4.2 结合AnimatedBuilder实现文字逐字出现或消失

4.3 动画效果

Flutter 自定义动画 — 数字递增动画和文字逐行逐字出现或消失动画相关推荐

最新文章

热门文章