Flutter 如何实现图片或Widget的动画移动效果？

实现效果说明 #

可以实现启动后延迟指定时间（比如3秒），Logo从屏幕顶部外平滑移动到屏幕正中心，全程不需要引入第三方依赖，用Flutter内置动画组件即可完成。

完整可运行示例代码 #

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: 'Logo 滑入动画',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: const SplashPage(),
    );
  }
}

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

  @override
  State<SplashPage> createState() => _SplashPageState();
}

class _SplashPageState extends State<SplashPage> {
  // 控制Logo是否移动到中心的标识
  bool _moveToCenter = false;
  // 固定Logo的尺寸，可自行修改
  final double _logoSize = 120;

  @override
  void initState() {
    super.initState();
    // 启动后延迟3秒触发动画，时长可自行修改
    Future.delayed(const Duration(seconds: 3), () {
      setState(() {
        _moveToCenter = true;
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    // 获取屏幕尺寸
    final screenHeight = MediaQuery.of(context).size.height;

    return Scaffold(
      body: Stack(
        children: [
          // 用AnimatedPositioned实现自动位移动画
          AnimatedPositioned(
            // 动画时长，设置为1秒，可自行调整快慢
            duration: const Duration(milliseconds: 1000),
            // 动画曲线，默认线性，这里用easeOut更符合自然动效
            curve: Curves.easeOut,
            left: 0,
            right: 0,
            // 初始状态top为负的Logo高度，完全在屏幕顶部外侧
            // 触发后top为(屏幕高度-Logo高度)/2，实现垂直居中
            top: _moveToCenter ? (screenHeight - _logoSize) / 2 : -_logoSize,
            child: Center(
              // 这里替换成你自己的Logo组件即可
              child: FlutterLogo(size: _logoSize),
            ),
          )
        ],
      ),
    );
  }
}

核心逻辑说明 #

• 你可以直接替换示例中的FlutterLogo为任意自定义Widget，不管是图片、容器还是其他组合组件都可以复用这个动效逻辑
• 延迟时长、动画时长、动效曲线都可以按需调整：修改Future.delayed的duration参数改等待时间，修改AnimatedPositioned的duration参数改动画速度，修改curve参数调整动效节奏
• 如果需要额外的透明度、缩放等组合动效，可以嵌套AnimatedOpacity、AnimatedScale等其他隐式动画组件，和位移逻辑完全兼容

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