Animated-Text-Kit 动画文本组件使用指南

原创于 2025-06-28 09:07:51 发布 · 310 阅读

CC 4.0 BY-SA版权

Animated-Text-Kit 动画文本组件使用指南

Animated-Text-Kit 🔔 A flutter package to create cool and beautiful text animations. [Flutter Favorite Package] 项目地址: https://gitcode.com/gh_mirrors/an/Animated-Text-Kit

概述

Animated-Text-Kit 是一个强大的 Flutter 动画文本库，提供了多种炫酷的文本动画效果。本文将详细介绍如何使用这个库中的各种动画组件，帮助开发者快速实现专业级的文本动画效果。

基础配置

所有动画组件都支持以下基础配置参数：

duration: Duration(milliseconds: 2000), // 控制动画持续时间
isRepeatingAnimation: true, // 是否循环播放动画
text: ["文本1", "文本2"], // 动画显示的文本数组
textStyle: TextStyle(fontSize: 32.0), // 文本样式
onTap: () { print("点击事件"); }, // 点击回调

旋转动画 (Rotate)

旋转动画让文本以旋转的方式切换，适合需要强调的标题或标语。

特性

支持自定义旋转高度(transitionHeight)
可与其他静态文本组合使用
提供流畅的3D旋转效果

示例代码

Row(
  children: <Widget>[
    Text("欢迎"),
    RotateAnimatedTextKit(
      text: ["创新", "突破", "超越"],
      textStyle: TextStyle(fontSize: 40.0),
      transitionHeight: 60, // 控制旋转高度
    ),
  ],
);

淡入淡出动画 (Fade)

淡入淡出动画通过透明度变化实现文本切换，适合需要柔和过渡的场景。

特性

平滑的透明度过渡
可控制动画持续时间
支持文本对齐方式设置

示例代码

FadeAnimatedTextKit(
  text: ["加载中", "请稍候", "即将完成"],
  textStyle: TextStyle(fontSize: 32.0),
  duration: Duration(seconds: 1), // 每段动画1秒
);

打字机动画 (Typer)

模拟打字机效果，逐字显示文本，适合需要模拟输入的场景。

特性

可调节打字速度
支持光标显示
提供真实的打字体验

示例代码

TyperAnimatedTextKit(
  text: ["系统正在初始化...", "加载配置文件...", "准备就绪"],
  speed: Duration(milliseconds: 100), // 控制打字速度
);

老式打字机动画 (Typewriter)

与Typer类似，但带有更复古的打字机效果，包括光标闪烁和字符回退。

特性

复古风格动画
光标闪烁效果
可自定义停顿时间

示例代码

TypewriterAnimatedTextKit(
  text: ["欢迎来到控制台", "> 输入命令开始_"],
  pause: Duration(milliseconds: 500), // 每段结束停顿时间
);

缩放动画 (Scale)

文本以缩放方式切换，适合需要强调重点的场景。

特性

可控制缩放比例
支持多种缓动曲线
视觉效果突出

示例代码

ScaleAnimatedTextKit(
  text: ["注意", "警告", "危险"],
  textStyle: TextStyle(fontSize: 70.0, color: Colors.red),
);

渐变色动画 (Colorize)

文本颜色渐变过渡，创建霓虹灯般的视觉效果。

特性

自定义颜色列表
平滑的颜色过渡
至少需要两种颜色

示例代码

ColorizeAnimatedTextKit(
  text: ["科技", "创新", "未来"],
  colors: [
    Colors.blue,
    Colors.purple,
    Colors.red,
    Colors.orange,
  ],
  textStyle: TextStyle(fontSize: 50.0),
);