嗨，这里是甜瓜看代码。今天，我们来聊聊共享元素转场动画。你是否曾经在应用中遇到这样的情况？当你从一个页面切换到另一个页面时，想要实现平滑而华丽的过渡效果，让某个元素在两个页面之间保持一致？如果是这样，那本文可能对你会有所帮助，我们开始吧！

什么是共享元素转场动画？

  共享元素转场动画是一种动画效果，它允许我们在两个页面之间共享一个元素，并在切换过程中保持该元素的连续性。换句话说，当我们从一个页面跳转到另一个页面时，选定的元素会在两个页面之间进行平滑的过渡动画，给用户带来无缝的视觉体验。

添加所需依赖

  在项目目录中打开pubspec.yaml文件，并添加flutter_staggered_animations和animated_text_kit依赖。这些依赖将帮助我们实现动画效果。

dependencies:
  flutter:
    sdk: flutter
  flutter_staggered_animations: ^1.1.1
  animated_text_kit: ^4.2.2

创建两个页面

  在pages文件夹中创建两个新文件：home_page.dart和details_page.dart。

home_page.dart

  在home_page.dart中，我们将创建一个简单的页面，其中包含一个共享的元素。

import 'package:flutter/material.dart';

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Shared Element Transition'),
      ),
      body: GestureDetector(
        onTap: () {
          Navigator.push(
              context,
              MaterialPageRoute(
                builder: (context) => DetailsPage(),
                settings: RouteSettings(
                  arguments: Hero(
                    tag: 'avatar',
                    child: CircleAvatar(
                      backgroundImage: AssetImage('assets/cat_1.jpg'),
                      radius: 50,
                    ),
                  ),
                ),
              ));
        },
        child: Hero(
          tag: 'avatar',
          child: CircleAvatar(
            foregroundImage: AssetImage('assets/cat.jpg'),
            radius: 50,
          ),
        ),
      ),
    );
  }
}

  在这段代码中，我们创建了一个HomePage小部件，其中包含一个CircleAvatar小部件，它代表了我们要共享的元素，即头像。我们将该元素包装在一个Hero小部件中，为它设置了一个标签tag，以便在切换页面时进行匹配。

  同时，我们为GestureDetector小部件添加了一个onTap回调，用于导航到DetailsPage页面。在导航过程中，我们将Hero小部件作为参数传递给RouteSettings，以便在目标页面中匹配共享元素。

details_page.dart

  接下来，我们来创建DetailsPage页面，该页面将展示共享的元素，并实现共享元素转场动画。

import 'package:flutter/material.dart';

class DetailsPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final hero = ModalRoute.of(context)!.settings.arguments as Hero;

    return Scaffold(
      appBar: AppBar(
        title: Text('Details'),
      ),
      body: Container(
        margin: EdgeInsets.only(top: 300,left: 188),
        child: GestureDetector(
          onTap: () {
            Navigator.pop(context);
          },
          child: Hero(
            tag: hero.tag,
            child: hero.child,
          ),
        ),
      ),
    );
  }
}

  在这里，我们创建了一个DetailsPage小部件，其中包含了一个AppBar和一个居中的GestureDetector小部件。在GestureDetector小部件中，我们使用了与HomePage页面中相同的Hero小部件，以便匹配共享元素。

  当应用程序启动后，你应该能够看到一个包含头像的首页。点击头像，你将看到一个平滑的过渡动画，将头像展示在新的页面上。点击新页面上的头像，将会返回到首页。

总结

  通过使用Hero小部件，我们能够在页面切换时保持元素的连续性，为用户提供更加流畅的过渡效果。

  希望本篇文章能帮助到你。这里是甜瓜看代码，期待你的关注！