如何制作类似TED应用加载的气泡弹出式Logo动画？

针对你要做的「气泡状圆形弹出后显示应用名称」的启动动画，下面提供两种可行方案：

一、原生组件组合实现（无第三方依赖） #

Flutter没有直接匹配的现成Widget，但可以通过基础动画组件组合实现，核心用到AnimationController、ScaleTransition和FadeTransition：

核心思路 #

1. 气泡圆形：通过ScaleTransition让圆形从0倍缩放至1倍，模拟弹出效果；
2. 应用名称：在圆形动画接近完成时，通过FadeTransition让文本从透明渐变为不透明，搭配时序控制增强流畅感。

代码示例 #

import 'package:flutter/material.dart';

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

  @override
  State<TedSplashAnimation> createState() => _TedSplashAnimationState();
}

class _TedSplashAnimationState extends State<TedSplashAnimation> with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<double> _circleScaleAnim;
  late Animation<double> _textFadeAnim;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      vsync: this,
      duration: const Duration(milliseconds: 1200), // 总动画时长
    );

    // 圆形缩放动画：0.0 → 1.0，前800ms完成
    _circleScaleAnim = Tween<double>(begin: 0.0, end: 1.0).animate(
      CurvedAnimation(parent: _controller, curve: const Interval(0.0, 0.7, curve: Curves.easeOut)),
    );

    // 文本渐显动画：0.0 → 1.0，圆形动画进入后半段时启动
    _textFadeAnim = Tween<double>(begin: 0.0, end: 1.0).animate(
      CurvedAnimation(parent: _controller, curve: const Interval(0.6, 1.0, curve: Curves.easeIn)),
    );

    // 启动动画
    _controller.forward();
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: Center(
        child: Stack(
          alignment: Alignment.center,
          children: [
            // 气泡圆形
            ScaleTransition(
              scale: _circleScaleAnim,
              child: Container(
                width: 200,
                height: 200,
                decoration: const BoxDecoration(
                  color: Colors.blueAccent,
                  shape: BoxShape.circle,
                ),
              ),
            ),
            // 应用名称
            FadeTransition(
              opacity: _textFadeAnim,
              child: const Text(
                "TED",
                style: TextStyle(
                  fontSize: 48,
                  fontWeight: FontWeight.bold,
                  color: Colors.white,
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

二、第三方库简化实现 #

如果想减少自定义代码，可以使用flutter_animate库，它封装了多种动画效果，能快速组合出目标动画：

步骤 #

1. 添加依赖：在pubspec.yaml中加入flutter_animate: ^4.2.0（版本以最新为准）；
2. 编写代码：通过链式调用实现缩放+渐显动画

代码示例 #

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

class TedSplashWithLibrary extends StatelessWidget {
  const TedSplashWithLibrary({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: Center(
        child: Stack(
          alignment: Alignment.center,
          children: [
            Container(
              width: 200,
              height: 200,
              decoration: const BoxDecoration(
                color: Colors.blueAccent,
                shape: BoxShape.circle,
              ),
            )
                .animate()
                .scale(begin: 0.0, end: 1.0, duration: 800.ms, curve: Curves.easeOut),
            const Text(
              "TED",
              style: TextStyle(
                fontSize: 48,
                fontWeight: FontWeight.bold,
                color: Colors.white,
              ),
            )
                .animate()
                .fadeIn(begin: 0.0, end: 1.0, duration: 400.ms)
                .scale(begin: 0.8, end: 1.0, duration: 400.ms)
                .delay(600.ms), // 延迟启动文本动画
          ],
        ),
      ),
    );
  }
}

额外优化建议 #

• 可以给圆形动画换成Curves.bounceOut曲线，让弹出效果更有气泡弹性；
• 若需要圆形颜色渐变，可搭配ColorTween实现动态色彩变化；
• 启动页可配合Future.delayed在动画结束后自动跳转到首页。

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