如何像这个游戏截图一样在 Flutter 中对 TextSpan 或部分文本进行动画处理？

Question

您是否有关于如何在 Flutter 中对 TextSpan 或部分文本进行动画处理以达到与此游戏屏幕截图相同的效果的指导？

我知道如何使用打字机效果对整个文本进行动画处理，但不知道如何仅对文本的一部分进行动画处理。

任何帮助将不胜感激。非常感谢！

Answer 1

有一些软件包可以做到这一点，例如 https://www.geeksforgeeks.org/animated-text-in-flutter/ 使用

animated_text_kit

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");
                 },
               ),

Answer 2

查看此包：https://pub.dev/packages/typethis

它允许您添加具有不同样式的richTextMatcher：

TypeThis(
  string: 'Welcome to the typethis package.',
  richTextMatchers: const [
    TypeThisMatcher(
      'typethis',
      style: TextStyle(
        fontWeight: FontWeight.bold,
        fontStyle: FontStyle.italic,
      ),
    ),
  ],
);