Flutter页面过渡动画插件 hero_animation 的使用

HeroAnimation 是一个用于在同一个路由内实现页面过渡动画的Flutter插件。它允许你将一个子组件从一个布局位置平滑地移动到另一个位置，并且可以在可滚动视图中工作。

如何工作？

你可以通过以下资源了解其具体工作原理：

• YouTube 视频
• 详细文章

使用方法

当两个帧之间，具有相同标签的 HeroAnimation 组件的位置发生变化时，就会触发英雄动画。使用 key 来让Flutter框架检测到同一树节点下的 HeroAnimation 重新定位。

HeroAnimationScene 提供了飞行配置给底层的英雄，这些英雄必须是 HeroAnimation 小部件的祖先。

示例代码：在同一棵树节点下重新定位

import 'package:flutter/material.dart';
import 'package:hero_animation/hero_animation.dart';

class RepositioningExample extends StatefulWidget {
  @override
  _RepositioningExampleState createState() => _RepositioningExampleState();
}

class _RepositioningExampleState extends State<RepositioningExample> {
  Alignment alignment = Alignment.centerLeft;

  @override
  Widget build(BuildContext context) {
    return HeroAnimationScene(
      duration: const Duration(milliseconds: 500),
      curve: Curves.easeIn,
      child: GestureDetector(
        onTap: () {
          setState(() {
            alignment = Alignment.centerRight;
          });
        },
        child: Align(
          alignment: alignment,
          child: HeroAnimation.child(
            tag: 'tag_0',
            child: const Text('SOME TEXT'),
          ),
        ),
      ),
    );
  }
}

在不同树节点间重新定位

HeroAnimation 允许根据 FlightState 重建其子组件。

import 'package:flutter/material.dart';
import 'package:hero_animation/hero_animation.dart';

enum Item { item1, item2, item3 }

extension ItemExtension on Item {
  String getTitle(bool firstFlightEnded) {
    return firstFlightEnded ? "Landed $name" : name;
  }
}

class DifferentTreeNodeExample extends StatefulWidget {
  @override
  _DifferentTreeNodeExampleState createState() => _DifferentTreeNodeExampleState();
}

class _DifferentTreeNodeExampleState extends State<DifferentTreeNodeExample> {
  List<Item> _landedItems = [];
  int _itemPointer = 0;
  Item _currentItem = Item.item1;

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        ..._landedItems.map((item) => HeroAnimation.builder(
              tag: item.name,
              builder: (context, flightState, child) {
                final firstFlightEnded = flightState.firstFlightEnded();
                return AnimatedSwitcher(
                  child: Container(
                    alignment: Alignment.centerLeft,
                    key: ValueKey(firstFlightEnded),
                    child: Text(item.getTitle(firstFlightEnded)),
                  ),
                );
              },
            )),
        ElevatedButton(
          onPressed: () {
            setState(() {
              _landedItems.add(_currentItem);
              _itemPointer++;
              _currentItem = Item.values[_itemPointer];
            });
          },
          child: Text('Add Item'),
        )
      ],
    );
  }
}

完整示例 Demo

以下是完整的示例代码，展示了如何在实际应用中使用 HeroAnimation 插件：

import 'package:flutter/material.dart';
import 'package:hero_animation/hero_animation.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: DefaultTabController(
        length: 2,
        child: Scaffold(
          appBar: AppBar(
            title: TabBar(
              tabs: <Widget>[
                Tab(text: 'Flight state usage'),
                Tab(text: 'Cup Game'),
              ],
            ),
          ),
          body: TabBarView(
            children: <Widget>[
              FlightStateDemoPage(),
              CupGamePage(),
            ],
          ),
        ),
      ),
    );
  }
}

// 这里省略了具体的页面实现细节，例如 FlightStateDemoPage 和 CupGamePage。
// 请参考上面的例子来实现这两个页面。

以上代码展示了如何在一个简单的Flutter应用程序中集成 HeroAnimation 插件，并演示了两种不同的使用场景：在同一棵树节点下重新定位和在不同树节点间重新定位。