flutter 实现文字竖排以及动画效果（文字逐一显示）

最新推荐文章于 2024-06-16 15:43:32 发布

宠爱Me

最新推荐文章于 2024-06-16 15:43:32 发布

阅读量2.4k

点赞数

分类专栏：技术点总结分享文章标签： flutter 动画 android

本文链接：https://blog.csdn.net/foreverTimeWGY/article/details/126503868

版权

本文介绍了在Flutter中创建文字竖排以及动画效果的方法，包括动画基础知识、自定义Tween来实现文字逐一显示，详细讲解了如何结合使用实现竖排文字与动画的完美融合。

摘要由CSDN通过智能技术生成

一、动画基础知识

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

二、自定义Tween

class TextTween extends Tween<String> {
  TextTween({String end = ''}) : super(begin: '', end: end);

  @override
  String lerp(double t) {
    // 在动画过程中 t 的值是从 0 到 1
    var cutoff = (end.length * t).round();
    // 返回动画时钟t时刻 对应的文字。
    return end.substring(0, cutoff);
  }
}

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

实现文字逐一显示

class CustomTextAnimationPage extends StatefulWidget {
  const CustomTextAnimationPage({Key? key}) : super(key: key);

  @override
  State<StatefulWidget> createState() => _CustomTextAnimationPageState();
}

class _CustomTextAnimationPageState extends State<CustomTextAnimationPage>
    with SingleTickerProviderStateMixin {
  final String _text = &#