Flutter中如何实现AnimatedTextKit文本动画依次执行？

方法一：利用AnimatedTextKit的原生序列支持 #

AnimatedTextKit的animatedTexts参数本身支持传入多个动画文本对象，默认会按顺序依次执行，不需要额外逻辑处理。直接把第二个文本动画加入数组即可：

import 'package:flutter/material.dart';
import 'package:animated_text_kit/animated_text_kit.dart';

class SignupScreen extends StatefulWidget {
  const SignupScreen({super.key});

  @override
  State<SignupScreen> createState() => _SignupScreenState();
}

class _SignupScreenState extends State<SignupScreen> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Column(
          children: [
            const SizedBox(height: 80),
            AnimatedTextKit(
              animatedTexts: [
                TyperAnimatedText(
                  'It all started with an',
                  textStyle: const TextStyle(fontFamily: "Itim", fontSize: 40),
                ),
                // 第二个动画会在第一个执行完毕后自动启动
                TyperAnimatedText(
                  'idea that changed everything',
                  textStyle: const TextStyle(fontFamily: "Itim", fontSize: 40),
                ),
              ],
              isRepeatingAnimation: false,
            ),
          ],
        ),
      ),
    );
  }
}

方法二：监听动画结束事件控制独立组件 #

如果需要两个完全独立的AnimatedTextKit组件依次执行，可以通过onFinished回调更新状态，控制第二个组件的显示时机：

import 'package:flutter/material.dart';
import 'package:animated_text_kit/animated_text_kit.dart';

class SignupScreen extends StatefulWidget {
  const SignupScreen({super.key});

  @override
  State<SignupScreen> createState() => _SignupScreenState();
}

class _SignupScreenState extends State<SignupScreen> {
  bool showSecondAnimation = false;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Column(
          children: [
            const SizedBox(height: 80),
            AnimatedTextKit(
              animatedTexts: [
                TyperAnimatedText(
                  'It all started with an',
                  textStyle: const TextStyle(fontFamily: "Itim", fontSize: 40),
                ),
              ],
              isRepeatingAnimation: false,
              // 第一个动画结束后触发状态更新，显示第二个动画
              onFinished: () {
                setState(() {
                  showSecondAnimation = true;
                });
              },
            ),
            // 仅在第一个动画结束后渲染第二个组件
            if (showSecondAnimation)
              AnimatedTextKit(
                animatedTexts: [
                  TyperAnimatedText(
                    'spark of creativity',
                    textStyle: const TextStyle(fontFamily: "Itim", fontSize: 40),
                  ),
                ],
                isRepeatingAnimation: false,
              ),
          ],
        ),
      ),
    );
  }
}

选择建议 #

• 方法一适合同容器、同类型的连续动画，代码最简洁；
• 方法二适合需要对两个动画做独立布局、样式控制的场景，灵活性更高。

内容的提问来源于stack exchange，提问作者jana Diriyeh