Flutter开发之——动画-过渡动画Hero

在Flutter中，Hero动画用于实现不同页面间的共享元素过渡效果。以下是一个简单的Hero动画示例：

import 'package:flutter/material.dart';
 
void main() => runApp(MyApp());
 
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomePage(),
    );
  }
}
 
class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Hero(
          tag: 'hero-image',
          child: Image.network(
            'https://flutter.github.io/assets-for-api-docs/assets/widgets/owl-2.jpg',
            width: 100.0,
            height: 100.0,
          ),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          Navigator.push(context, MaterialPageRoute(builder: (context) => DetailPage()));
        },
        child: Icon(Icons.open_in_new),
      ),
    );
  } }
 
class DetailPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Hero(
          tag: 'hero-image',
          child: Image.network(
            'https://flutter.github.io/assets-for-api-docs/assets/widgets/owl-2.jpg',
            width: 300.0,
            height: 300.0,
            fit: BoxFit.cover,
          ),
        ),
      ),
    );
  }
}

在这个例子中，我们有一个HomePage和一个DetailPage。在HomePage中，我们有一个Hero组件，它包含一个图片。在DetailPage中，我们也有一个Hero组件，它包含一个尺寸更大的同一张图片。通过给两个Hero组件设置相同的tag，Flutter会自动处理从HomePage到DetailPage过渡期间图片的过渡动画，使其从一个小尺寸平滑过渡到一个大尺寸。