Flutter：如何在页面跳转时实现图片缩放动画

要实现启动页图片先执行缩放动画，再跳转到登录页，你可以通过Flutter的AnimationController和Animation控制动画流程，具体修改如下：

完整修改代码 #

import 'package:flutter/material.dart';

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

  @override
  State<SplashScreen> createState() => _SplashScreenState();
}

class _SplashScreenState extends State<SplashScreen> with SingleTickerProviderStateMixin {
  late AnimationController _animationController;
  late Animation<double> _scaleAnimation;

  @override
  void initState() {
    super.initState();
    // 初始化动画控制器，设置动画时长
    _animationController = AnimationController(
      vsync: this,
      duration: const Duration(seconds: 1),
    );

    // 创建缩放动画：从原始大小放大到1.5倍
    _scaleAnimation = Tween<double>(begin: 1.0, end: 1.5).animate(
      CurvedAnimation(parent: _animationController, curve: Curves.easeInOut),
    );

    // 先等待3秒，启动动画后再跳转登录页
    Future.delayed(const Duration(seconds: 3), () {
      _animationController.forward().then((_) {
        Navigator.of(context).pushReplacement(
          MaterialPageRoute(builder: (context) => const LoginScreen()),
        );
      });
    });
  }

  @override
  void dispose() {
    // 销毁动画控制器，避免内存泄漏
    _animationController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        // 通过AnimatedBuilder将缩放动画绑定到图片
        child: AnimatedBuilder(
          animation: _scaleAnimation,
          builder: (context, child) {
            return Transform.scale(
              scale: _scaleAnimation.value,
              child: child,
            );
          },
          child: Image.asset("assets/logo.png"),
        ),
      ),
    );
  }
}

// 示例登录页（请确保项目中已有该类或替换为你的实际登录页）
class LoginScreen extends StatelessWidget {
  const LoginScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("登录页")),
      body: const Center(child: Text("登录页面内容")),
    );
  }
}

关键修改说明 #

• 混入SingleTickerProviderStateMixin：为动画控制器提供帧同步支持，保证动画流畅运行。
• 动画配置：AnimationController控制动画时长，Tween定义缩放的起始/结束比例，CurvedAnimation添加缓动效果让动画更自然。
• 跳转逻辑调整：先等待3秒，启动缩放动画；动画执行完成后，用pushReplacement跳转登录页（避免返回启动页，符合启动页的常规逻辑）。
• 资源释放：在dispose方法中销毁动画控制器，防止内存泄漏。

你可根据需求自定义：

• 动画时长（修改AnimationController的duration参数）
• 缩放比例（调整Tween的begin和end值）
• 动画曲线（替换Curves.easeInOut为其他曲线，比如Curves.bounceOut）

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