Flutter中Animated text kit如何停止动画仅保留淡入缩放显示效果

核心原因 #

你遇到的自动退场问题，是因为animated_text_kit的部分动画组件默认配置了完整的入场+退场动画周期，或者开启了重复播放逻辑。要实现入场后保持常显，按下面两种场景对应修改即可：

场景1：直接修改内置淡入缩放动画配置 #

在AnimatedTextKit组件中添加两个参数即可实现需求：

• 把isRepeatingAnimation设为false，关闭重复播放逻辑
• 把pause设为极长的时长（比如一年），代替默认的退场前短暂停，相当于永久停留在入场完成的状态

注意不要把pause设为Duration.zero，会直接触发退场逻辑

示例代码：

AnimatedTextKit(
  animatedTexts: [
    FadeScaleAnimatedText(
      '目标显示文本',
      textStyle: TextStyle(fontSize: 32, fontWeight: FontWeight.bold),
    ),
  ],
  isRepeatingAnimation: false,
  pause: const Duration(days: 365), // 永久停留在入场完成状态
  displayFullTextOnTap: true, // 可选配置：点击后直接显示完整文本
)

场景2：自定义动画实现更稳定的常显效果 #

如果需要完全避免退场逻辑的触发，可以自定义仅包含入场的动画组件，不需要修改源码：

class FadeInScaleStaticText extends StatefulWidget {
  final String text;
  final TextStyle textStyle;
  final Duration duration;

  const FadeInScaleStaticText({
    super.key,
    required this.text,
    required this.textStyle,
    this.duration = const Duration(milliseconds: 500),
  });

  @override
  State<FadeInScaleStaticText> createState() => _FadeInScaleStaticTextState();
}

class _FadeInScaleStaticTextState extends State<FadeInScaleStaticText> with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<double> _opacityAnimation;
  late Animation<double> _scaleAnimation;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(vsync: this, duration: widget.duration);
    _opacityAnimation = Tween<double>(begin: 0, end: 1).animate(_controller);
    _scaleAnimation = Tween<double>(begin: 0.8, end: 1).animate(_controller);
    _controller.forward(); // 仅执行入场动画，执行完停在最终状态
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return AnimatedBuilder(
      animation: _controller,
      builder: (context, child) {
        return Opacity(
          opacity: _opacityAnimation.value,
          child: Transform.scale(
            scale: _scaleAnimation.value,
            child: Text(widget.text, style: widget.textStyle),
          ),
        );
      },
    );
  }
}

直接调用这个组件即可，动画执行完成后会永久保持文本显示，不会触发任何退场逻辑。

避坑提醒 #

不要设置totalRepeatCount参数，就算设置为1也会触发完整的入场+退场周期；如果使用其他内置动画类型，只要加上isRepeatingAnimation: false和超长pause参数，都可以实现同样的常显效果。

内容的提问来源于stack exchange，提问作者Bn Minki