Flutter – 径向英雄动画

简介

Flutter 是一种用于构建跨平台移动应用的开源框架，它能够在 iOS、Android、Web 和桌面平台上创建高度美观且高性能的应用程序。徑向英雄动画是一种动画效果，它允许页面之间的元素在平滑的过渡中进行动画变换。

动画效果

徑向英雄动画是在两个页面之间实现的，通常用于在页面切换时，将共享的元素根据其位置和大小进行无缝转换。这些共享元素之间的动画效果可以创建无缝的用户体验，并增强应用程序的视觉吸引力。

如何实现徑向英雄动画

实现徑向英雄动画需要以下步骤：

1. 在源页面中，将要共享动画的元素包装在一个 Hero widget 中，并为其提供一个唯一的标识符。
2. 在目标页面中，也使用一个 Hero widget 来包装要展示的共享元素，并以相同的标识符进行匹配。
3. 当用户从源页面切换到目标页面时，Flutter 会自动在两个页面之间创建一个动画来平滑地转换共享的元素。

以下是一个简单的示例代码：

// 源页面
class SourcePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('源页面'),
      ),
      body: Center(
        child: Hero(
          tag: 'myHero',
          child: Container(
            width: 100,
            height: 100,
            color: Colors.blue,
          ),
        ),
      ),
    );
  }
}

// 目标页面
class DestinationPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('目标页面'),
      ),
      body: Center(
        child: Hero(
          tag: 'myHero',
          child: Container(
            width: 200,
            height: 200,
            color: Colors.red,
          ),
        ),
      ),
    );
  }
}

// 主函数
void main() {
  runApp(MaterialApp(
    home: SourcePage(),
    routes: {
      '/destination': (context) => DestinationPage(),
    },
  ));
}

在上面的示例中，源页面中的蓝色正方形将会在页面切换时以动画的形式变为目标页面中红色正方形。

注意事项

• Hero widget 会根据其标识符和位置匹配源页面和目标页面的共享元素。标识符必须在两个页面中保持一致。
• 共享元素的大小和位置可以不同，徑向英雄动画会自动调整其大小和位置以实现平滑的过渡效果。

详细的 Flutter Hero 动画文档请参考 官方文档。