Animated Text Kit 技术文档

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

1. 安装指南

1.1 依赖添加

首先，在你的项目 pubspec.yaml 文件中添加 animated_text_kit 依赖：

dependencies:
  animated_text_kit: ^4.2.2

1.2 安装依赖

通过命令行安装依赖包：

使用 pub：

$ pub get

使用 Flutter：

$ flutter pub get

1.3 导入包

在你的 Dart 代码中导入 animated_text_kit：

import 'package:animated_text_kit/animated_text_kit.dart';

2. 项目使用说明

AnimatedTextKit 是一个状态组件，用于生成文本动画。你可以在 build 方法中像这样使用它：

AnimatedTextKit(
  animatedTexts: [
    TypewriterAnimatedText(
      'Hello world!',
      textStyle: const TextStyle(
        fontSize: 32.0,
        fontWeight: FontWeight.bold,
      ),
      speed: const Duration(milliseconds: 2000),
    ),
  ],
  
  totalRepeatCount: 4,
  pause: const Duration(milliseconds: 1000),
  displayFullTextOnTap: true,
  stopPauseOnTap: true,
)

2.1 配置属性

• pause：动画文本之间的暂停时间。
• displayFullTextOnTap：点击动画时，动画会立即完成。
• isRepeatingAnimation：控制动画是否重复。
• repeatForever：控制动画是否无限重复。
• totalRepeatCount：动画重复的次数（当 repeatForever 为 false 时）。

2.2 自定义回调

• onTap：当用户点击动画文本时调用。
• onNext(int index, bool isLast)：在下一个文本动画之前，上一个动画的暂停之后调用。
• onNextBeforePause(int index, bool isLast)：在下一个文本动画之前，上一个动画的暂停之前调用。
• onFinished：当 isRepeatingAnimation 设置为 false 时，动画结束时调用。

3. 项目API使用文档

3.1 AnimatedTextKit 类

AnimatedTextKit 是所有动画文本的基类，提供了多种动画效果。

属性

• animatedTexts：包含所有动画文本的列表。
• pause：动画之间的暂停时间。
• displayFullTextOnTap：点击动画时是否立即显示完整文本。
• isRepeatingAnimation：是否重复动画。
• repeatForever：是否无限重复动画。
• totalRepeatCount：动画重复的次数。

回调

• onTap：点击动画文本时的回调。
• onNext：下一个动画开始前的回调。
• onNextBeforePause：下一个动画开始前的回调，但在暂停之前。
• onFinished：动画结束时的回调。

3.2 动画类型

3.2.1 RotateAnimatedText

旋转动画文本。

RotateAnimatedText('AWESOME')

3.2.2 FadeAnimatedText

淡入淡出动画文本。

FadeAnimatedText('do IT!')

3.2.3 TyperAnimatedText

打字机效果动画文本。

TyperAnimatedText('It is not enough to do your best,')

3.2.4 TypewriterAnimatedText

打字机效果动画文本。

TypewriterAnimatedText('Discipline is the best tool')

3.2.5 ScaleAnimatedText

缩放动画文本。

ScaleAnimatedText('Then Scale')

4. 项目安装方式

4.1 使用 pub 安装

$ pub get

4.2 使用 Flutter 安装

$ flutter pub get

通过以上步骤，你可以轻松地将 Animated Text Kit 集成到你的 Flutter 项目中，并使用其丰富的文本动画效果。

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