Flutter 动画文本

一个 Flutter 包，其中包含一些炫酷且出色的文本动画。在 Codemagic 的电子书《我们喜爱的 Flutter 库》中推荐的文本动画包。试试我们的实时示例应用程序。

安装

  1. 依赖它

将此添加到您的包的pubspec.yaml文件中

dependencies:
animated_text_kit: ^4.2.2
  1. 安装它

您可以从命令行安装包

通过 pub

$ pub get

使用 Flutter

$ flutter pub get
  1. 导入它

现在，在您的 Dart 代码中，您可以使用

import 'package:animated_text_kit/animated_text_kit.dart';

用法

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,
)

它有许多可配置的属性，包括：

  1. pause – 动画文本之间的暂停时间

  2. displayFullTextOnTap – 点击动画将使其快速完成

  3. isRepeatingAnimation – 控制动画是否重复

  4. repeatForever – 控制动画是否永远重复

  5. totalRepeatCount – 动画应重复的次数（当 repeatForever 为 false 时）

还有自定义回调函数：

  1. onTap – 当用户点击动画文本时调用此函数

  2. onNext(int index, bool isLast) – 在前一个文本暂停后，在下一个文本动画之前调用

  3. onNextBeforePause(int index, bool isLast) – 在前一个文本暂停之前，在下一个文本动画之前调用

  4. onFinished – 当 isRepeatingAnimation 参数设置为 false 时，在结束时调用

注意：你可能会遇到一个问题，即文本没有像这里所示的那样通过 setState 进行更新。解决方案是使用一个基于文本变化的 key。有关参考，请观看此视频。

3.0 版本新增功能

3.0 版本重构了代码，将公共动画控件移至 AnimatedTextKit，并且除 TextLiquidFill 外，所有动画都继承自 AnimatedText。这节省了数百行重复的代码，提高了动画之间的一致性，并使创建新动画更加容易。

它还使动画更加灵活，因为现在可以轻松组合多种动画。例如：

AnimatedTextKit(
animatedTexts: [
 FadeAnimatedText(
   'Fade First',
   textStyle: TextStyle(fontSize: 32.0, fontWeight: FontWeight.bold),
 ),
 ScaleAnimatedText(
   'Then Scale',
   textStyle: TextStyle(fontSize: 70.0, fontFamily: 'Canterbury'),
 ),
],
),

使用旧的 FadeAnimatedTextKit 等同于将 AnimatedTextKit 与 FadeAnimatedText 一起使用。AnimatedTextKit 的一个优点是 animatedTexts 可以是 AnimatedText 的任何子类，而使用 FadeAnimatedTextKit essentially 将你限制为仅使用 FadeAnimatedText。

旧的 AnimatedTextKit 类

你是否注意到动画类成对出现？例如，有 FadeAnimatedText 和 FadeAnimatedTextKit。3.0 版本的重要重构将原始的 FadeAnimatedTextKit 分裂为 FadeAnimatedText 和一个可重用的 AnimatedTextKit，然后调整了 FadeAnimatedTextKit 以向后兼容。

当引入新的 AnimationText 子类时，你可能会想知道是否也需要引入一个额外的 Kit 类。答案是 NO。？

今后，我们将提倡采用 3.0 版本的方法，并已弃用旧的 Kit 类。这将使创建新动画更容易。我们知道这会让一些旧代码变得冗长，但灵活性和简洁性是一个有意识的权衡。

动画

提供了许多动画，但你也可以创建自己的动画。

旋转

Row(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
 const SizedBox(width: 20.0, height: 100.0),
 const Text(
   'Be',
   style: TextStyle(fontSize: 43.0),
 ),
 const SizedBox(width: 20.0, height: 100.0),
 DefaultTextStyle(
   style: const TextStyle(
     fontSize: 40.0,
     fontFamily: 'Horizon',
   ),
   child: AnimatedTextKit(
     animatedTexts: [
       RotateAnimatedText('AWESOME'),
       RotateAnimatedText('OPTIMISTIC'),
       RotateAnimatedText('DIFFERENT'),
     ],
     onTap: () {
       print("Tap Event");
     },
   ),
 ),
],
);

注意：你可以通过为 RotateAnimatedTextKit 类设置 transitionHeight 参数的值来覆盖过渡高度。

淡入淡出

return SizedBox(
width: 250.0,
child: DefaultTextStyle(
 style: const TextStyle(
   fontSize: 32.0,
   fontWeight: FontWeight.bold,
 ),
 child: AnimatedTextKit(
   animatedTexts: [
     FadeAnimatedText('do IT!'),
     FadeAnimatedText('do it RIGHT!!'),
     FadeAnimatedText('do it RIGHT NOW!!!'),
   ],
   onTap: () {
     print("Tap Event");
   },
 ),
),
);

打字机

return SizedBox(
width: 250.0,
child: DefaultTextStyle(
 style: const TextStyle(
   fontSize: 30.0,
   fontFamily: 'Bobbers',
 ),
 child: AnimatedTextKit(
   animatedTexts: [
     TyperAnimatedText('It is not enough to do your best,'),
     TyperAnimatedText('you must know what to do,'),
     TyperAnimatedText('and then do your best'),
     TyperAnimatedText('- W.Edwards Deming'),
   ],
   onTap: () {
     print("Tap Event");
   },
 ),
),
);

GitHub

查看 Github