如何在Flutter应用首页添加启动时自动播放的自定义缩放动画？

你提供的代码仅包含State逻辑部分，缺少对应的StatefulWidget声明，下面是完整的集成方案，直接复制到项目即可运行：

1. 先定义完整的可复用缩放动画组件 #

class CustomScaleAnimation extends StatefulWidget {
  /// 要执行缩放动画的子组件
  final Widget child;
  /// 动画时长，默认1000ms
  final Duration duration;

  const CustomScaleAnimation({
    super.key,
    required this.child,
    this.duration = const Duration(milliseconds: 1000),
  });

  @override
  State<CustomScaleAnimation> createState() => _CustomScaleAnimationState();
}

class _CustomScaleAnimationState extends State<CustomScaleAnimation>
    with TickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<double> _animation;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
        duration: widget.duration, vsync: this, value: 0);
    _animation = CurvedAnimation(parent: _controller, curve: Curves.easeIn);
    // 组件初始化时自动播放动画
    _controller.forward();
  }

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

  @override
  Widget build(BuildContext context) {
    return ScaleTransition(
      scale: _animation,
      alignment: Alignment.center,
      child: widget.child,
    );
  }
}

2. 集成到首页的完整示例 #

下面是完整的main.dart代码，替换你项目里的对应文件即可看到效果：

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '启动动画演示',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: const HomePage(),
    );
  }
}

// 应用首页
class HomePage extends StatefulWidget {
  const HomePage({super.key});

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('首页')),
      // 用自定义动画组件包裹你要播放动画的内容即可
      body: CustomScaleAnimation(
        // 替换为你自己的首页内容即可
        child: const Center(
          child: Text(
            'Test',
            style: TextStyle(fontSize: 50),
          ),
        ),
      ),
    );
  }
}

// 把上面定义的CustomScaleAnimation组件代码放在这里即可

常见调整方案 #

• 如果你要让整个首页（包括顶部导航栏）都做缩放动画，直接把Scaffold作为child参数传给CustomScaleAnimation即可
• 如果你不需要抽离通用组件，直接把动画的AnimationController、Animation逻辑写在首页的State中，效果完全一致
• 如果你需要在动画播放完成后执行其他逻辑，可以在initState中给动画控制器添加状态监听：

_controller.addStatusListener((status) {
  if (status == AnimationStatus.completed) {
    // 动画播放完成后的逻辑写在这里，比如加载首页数据、跳转页面等
  }
});

内容的提问来源于stack exchange，提问作者Sultan ul Arefin