Flutter中的动画文本

动画使 UI 更具交互性并增强了用户体验。在动画或使应用程序更具交互性方面没有创造力的限制。在Flutter中，我们得到了一种显示动画文本的简单方法。在本文中，我们将了解如何使用 animated_text_kit 为文本设置动画。

文本动画的类型：

以下是 animated_text_kit 包提供的文本动画类型：

1. 旋转动画文本（）
2. ScaleAnimatedText()
3. FadeAnimatedText()
4. TyperAnimatedText()
5. 波浪动画文本（）
6. 闪烁动画文本（）

我们还可以创建自定义的动画文本。让我们转到这个包的实现部分。

安装包：

将 animated_text_kit 包添加到pubspec.yaml文件中：

然后使用 pub get 对其进行配置。您还可以通过运行以下命令从命令行安装软件包：

flutter pub add animated_text_kit

导入依赖：

现在，主要。 dart文件，导入包使用。

Dart

import 'package:animated_text_kit/animated_text_kit.dart';

执行：

我们使用 AnimatedTextKit() 小部件来创建动画文本。在animatedTexts属性中，我们可以添加尽可能多的文本和任何类型的动画文本，例如 RotatedAnimatedText、FlickerAnimatedText 等。

AnimatedTextKit 的一些属性是——

• 动画文本
• 点按
• 总重复次数
• 永远重复
• 暂停
• displayFullTextOnTap
• 是重复动画

旋转动画文本：

Dart

AnimatedTextKit(
                animatedTexts: [
                  RotateAnimatedText('AWESOME',
                      textStyle: TextStyle(
                          fontSize: 30,
                          color: Colors.white,
                          backgroundColor: Colors.blue)),
                  RotateAnimatedText('OPTIMISTIC',
                      textStyle: TextStyle(
                          letterSpacing: 3,
                          fontSize: 30,
                          fontWeight: FontWeight.bold,
                          color: Colors.orange)),
                  RotateAnimatedText(
                    'DIFFERENT',
                    textStyle: TextStyle(
                      fontSize: 30,
                      decoration: TextDecoration.underline,
                    ),
                  ),
                ],
                isRepeatingAnimation: true,
                totalRepeatCount: 10,
                pause: Duration(milliseconds: 1000),
              ),

输出：

FadeAnimatedText 和 ScaleAnimatedText：

Dart

Center(
                child: AnimatedTextKit(
                  totalRepeatCount: 40,
                  animatedTexts: [
                    FadeAnimatedText(
                      'First Fade',
                      textStyle: const TextStyle(
                          backgroundColor: Colors.green,
                          color: Colors.white,
                          fontSize: 32.0,
                          fontWeight: FontWeight.bold),
                    ),
                    ScaleAnimatedText(
                      'Then Get Bigger',
                      duration: Duration(milliseconds: 4000),
                      textStyle:
                          const TextStyle(color: Colors.indigo, fontSize: 50.0),
                    ),
                  ],
                ),
              ),

输出：

TyperAnimatedText：

Dart

AnimatedTextKit(
                 animatedTexts: [
                   TyperAnimatedText('This is Animated text,',
                       textStyle: const TextStyle(
                           color: Colors.white,
                           fontSize: 30,
                           backgroundColor: Colors.purple)),
                   TyperAnimatedText('You are viewing it here.',
                       textStyle: const TextStyle(
                           fontSize: 20, fontWeight: FontWeight.bold)),
                 ],
                 onTap: () {
                   print("I am executing");
                 },
               ),

输出：

波浪动画文本：

Dart

AnimatedTextKit(
                  animatedTexts: [
                    WavyAnimatedText('Hello World',
                        textStyle: TextStyle(
                          color: Colors.blue,
                          fontSize: 30,
                        )),
                    WavyAnimatedText('Look at the waves',
                        textStyle: TextStyle(
                          color: Colors.green[600],
                          fontSize: 30,
                        )),
                  ],
                  repeatForever: true,
                  onTap: () {
                    print("Tap Event");
                  },
                ),

输出：

完整源代码：

Dart

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:animated_text_kit/animated_text_kit.dart';
  
void main() => runApp(MyApp());
  
class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}
  
class _MyAppState extends State {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Animated Text Kit',
        debugShowCheckedModeBanner: false,
        theme: ThemeData(primarySwatch: Colors.green),
        home: Scaffold(
          appBar: AppBar(
            title: const Text("GeeksForGeeks"),
            centerTitle: true,
          ),
          body: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              AnimatedTextKit(
                animatedTexts: [
                  RotateAnimatedText('AWESOME',
                      textStyle: TextStyle(
                          fontSize: 30,
                          color: Colors.white,
                          backgroundColor: Colors.blue)),
                  RotateAnimatedText('OPTIMISTIC',
                      textStyle: TextStyle(
                          letterSpacing: 3,
                          fontSize: 30,
                          fontWeight: FontWeight.bold,
                          color: Colors.orange)),
                  RotateAnimatedText(
                    'GeeksForGeeks',
                    textStyle: TextStyle(
                      fontSize: 30,
                      decoration: TextDecoration.underline,
                    ),
                  ),
                ],
                isRepeatingAnimation: true,
                totalRepeatCount: 10,
                pause: Duration(milliseconds: 1000),
              ),
              //  SizedBox(height: 10),
              Center(
                child: AnimatedTextKit(
                  totalRepeatCount: 40,
                  animatedTexts: [
                    FadeAnimatedText(
                      'First Fade',
                      textStyle: const TextStyle(
                          backgroundColor: Colors.green,
                          color: Colors.white,
                          fontSize: 32.0,
                          fontWeight: FontWeight.bold),
                    ),
                    ScaleAnimatedText(
                      'Then Get Bigger',
                      duration: Duration(milliseconds: 4000),
                      textStyle:
                          const TextStyle(color: Colors.indigo, fontSize: 50.0),
                    ),
                  ],
                ),
              ),
  
              SizedBox(height: 10),
              AnimatedTextKit(
                animatedTexts: [
                  TyperAnimatedText('This is Animated text,',
                      textStyle: const TextStyle(
                          color: Colors.white,
                          fontSize: 30,
                          backgroundColor: Colors.purple)),
                  TyperAnimatedText('You are viewing it here.',
                      textStyle: const TextStyle(
                          fontSize: 20, fontWeight: FontWeight.bold)),
                ],
                onTap: () {
                  print("I am executing");
                },
              ),
  
              SizedBox(height: 10),
              Center(
                child: AnimatedTextKit(
                  animatedTexts: [
                    WavyAnimatedText('Hello World',
                        textStyle: TextStyle(
                          color: Colors.blue,
                          fontSize: 30,
                        )),
                    WavyAnimatedText('Look at the waves',
                        textStyle: TextStyle(
                          color: Colors.green[600],
                          fontSize: 30,
                        )),
                  ],
                  repeatForever: true,
                  onTap: () {
                    print("Tap Event");
                  },
                ),
              ),
            ],
          ),
        ));
  }
}

输出：