Flutter动画效果插件animations的使用

高质量预构建的Flutter动画

此包包含了一些常见的动画效果，这些动画可以自定义内容并直接应用到您的应用程序中以吸引用户。

要查看以下动画在设备或模拟器上的示例，请执行以下命令：

cd example/
flutter run --release

Material 动效为 Flutter 设计

Material 动效是一组过渡模式，有助于用户理解和导航应用程序。有关模式及其选择方法的更多信息，请参阅 Material 动效系统规范。 还有一个Codelab，使用Material Motion for Flutter构建漂亮的过渡，可供学习。

Material motion 定义了以下过渡模式：

1. 容器转换 (Container transform): 用于具有容器的UI元素之间的过渡。这种模式在两个UI元素之间创建可见的连接。
2. 共享轴 (Shared axis): 用于具有空间或导航关系的UI元素之间的过渡。这种模式使用x、y或z轴上的共享变换来强化元素之间的关系。
3. 淡入淡出 (Fade through): 用于没有强关联的UI元素之间的过渡。
4. 淡入/淡出 (Fade): 用于屏幕范围内进入或退出的UI元素，如居中淡入的对话框。

容器转换 (Container transform)

• 卡片变为详情页
• 列表项变为详情页
• FAB变为详情页
• 搜索栏展开为扩展搜索

共享轴 (Shared axis)

• 新手引导流程沿X轴过渡
• 步骤条沿Y轴过渡
• 父子导航沿Z轴过渡

淡入淡出 (Fade through)

• 底部导航栏中的目的地点击
• 刷新图标点击
• 账户切换器点击

淡入/淡出 (Fade)

• 对话框
• 菜单
• Snackbar
• FAB

示例代码

以下是 main.dart 文件的完整示例代码，展示了如何使用 animations 插件实现上述四种动画模式：

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

import 'container_transition.dart';
import 'fade_scale_transition.dart';
import 'fade_through_transition.dart';
import 'shared_axis_transition.dart';

void main() {
  runApp(
    MaterialApp(
      theme: ThemeData.from(
        colorScheme: const ColorScheme.light(),
      ).copyWith(
        pageTransitionsTheme: const PageTransitionsTheme(
          builders: <TargetPlatform, PageTransitionsBuilder>{
            TargetPlatform.android: ZoomPageTransitionsBuilder(),
          },
        ),
      ),
      home: _TransitionsHomePage(),
    ),
  );
}

class _TransitionsHomePage extends StatefulWidget {
  @override
  _TransitionsHomePageState createState() => _TransitionsHomePageState();
}

class _TransitionsHomePageState extends State<_TransitionsHomePage> {
  bool _slowAnimations = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Material Transitions')),
      body: Column(
        children: <Widget>[
          Expanded(
            child: ListView(
              children: <Widget>[
                _TransitionListTile(
                  title: 'Container transform',
                  subtitle: 'OpenContainer',
                  onTap: () {
                    Navigator.of(context).push(
                      MaterialPageRoute<void>(
                        builder: (BuildContext context) {
                          return const OpenContainerTransformDemo();
                        },
                      ),
                    );
                  },
                ),
                _TransitionListTile(
                  title: 'Shared axis',
                  subtitle: 'SharedAxisTransition',
                  onTap: () {
                    Navigator.of(context).push(
                      MaterialPageRoute<void>(
                        builder: (BuildContext context) {
                          return const SharedAxisTransitionDemo();
                        },
                      ),
                    );
                  },
                ),
                _TransitionListTile(
                  title: 'Fade through',
                  subtitle: 'FadeThroughTransition',
                  onTap: () {
                    Navigator.of(context).push(
                      MaterialPageRoute<void>(
                        builder: (BuildContext context) {
                          return const FadeThroughTransitionDemo();
                        },
                      ),
                    );
                  },
                ),
                _TransitionListTile(
                  title: 'Fade',
                  subtitle: 'FadeScaleTransition',
                  onTap: () {
                    Navigator.of(context).push(
                      MaterialPageRoute<void>(
                        builder: (BuildContext context) {
                          return const FadeScaleTransitionDemo();
                        },
                      ),
                    );
                  },
                ),
              ],
            ),
          ),
          const Divider(height: 0.0),
          SafeArea(
            child: SwitchListTile(
              value: _slowAnimations,
              onChanged: (bool value) async {
                setState(() {
                  _slowAnimations = value;
                });
                if (_slowAnimations) {
                  await Future<void>.delayed(const Duration(milliseconds: 300));
                }
                timeDilation = _slowAnimations ? 20.0 : 1.0;
              },
              title: const Text('Slow animations'),
            ),
          ),
        ],
      ),
    );
  }
}

class _TransitionListTile extends StatelessWidget {
  const _TransitionListTile({
    this.onTap,
    required this.title,
    required this.subtitle,
  });

  final GestureTapCallback? onTap;
  final String title;
  final String subtitle;

  @override
  Widget build(BuildContext context) {
    return ListTile(
      contentPadding: const EdgeInsets.symmetric(
        horizontal: 15.0,
      ),
      leading: Container(
        width: 40.0,
        height: 40.0,
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(20.0),
          border: Border.all(
            color: Colors.black54,
          ),
        ),
        child: const Icon(
          Icons.play_arrow,
          size: 35,
        ),
      ),
      onTap: onTap,
      title: Text(title),
      subtitle: Text(subtitle),
    );
  }
}

通过以上代码和解释，您可以了解如何在Flutter项目中使用animations插件实现高质量的预构建动画效果。希望这对您有所帮助！