344.在鸿蒙上使用 animations Flutter 包的指南

插件介绍

animations 是一个提供高质量预构建动画效果的 Flutter 包，它允许开发者轻松地将精美的动画集成到应用程序中，为用户提供愉悦的交互体验。

该包实现了 Material Design 中的多种过渡动画模式，包括：

容器变换动画（Container Transform）：创建两个 UI 元素之间的可见连接，适用于卡片展开为详情页、列表项展开为详情页、FAB 展开为详情页等场景。
共享轴动画（Shared Axis）：用于在具有空间或导航关系的 UI 元素之间进行过渡，使用共享的 x、y 或 z 轴变换来强化元素之间的关系，适用于引导流程、步骤指示器、父子导航等场景。
淡入淡出动画（Fade Through）：用于在没有强关联的 UI 元素之间进行过渡，先淡出当前元素，然后淡入新元素，适用于底部导航栏切换、刷新图标点击、账户切换等场景。
淡入动画（Fade）：用于 UI 元素在屏幕边界内进入或退出，如对话框淡入屏幕中心，适用于对话框、菜单、 snackbar、FAB 等场景。

如何使用插件

1. 包的引入

由于这是一个自定义修改版本的三方库，需要以 git 形式引入。在项目的 pubspec.yaml 文件中添加以下依赖配置：

yaml 复制代码

dependencies:
  animations:
    git:
      url: "https://gitcode.com/openharmony-tpc/flutter_packages.git"
      path: "packages/animations/animations"

然后执行 flutter pub get 命令来获取依赖包。

2. API 的调用

OpenContainer（容器变换动画）

OpenContainer 是一个容器组件，点击时会展开并填充整个屏幕以显示新内容。

dart 复制代码

OpenContainer(
  transitionDuration: const Duration(milliseconds: 300),
  closedBuilder: (context, openContainer) {
    return Container(
      width: 100,
      height: 100,
      color: Colors.blue,
      child: Center(
        child: Text('点击展开'),
      ),
    );
  },
  openBuilder: (context, closeContainer) {
    return Scaffold(
      appBar: AppBar(
        title: Text('详情页面'),
        leading: IconButton(
          icon: Icon(Icons.close),
          onPressed: closeContainer,
        ),
      ),
      body: Center(
        child: Text('这是展开后的详情页面'),
      ),
    );
  },
  onClosed: (data) {
    // 处理关闭时的回调
    print('容器已关闭，返回数据：$data');
  },
)

SharedAxisTransition（共享轴动画）

SharedAxisTransition 用于在具有共享轴关系的两个视图之间进行过渡。

dart 复制代码

SharedAxisTransition(
  animation: _animation,
  secondaryAnimation: _secondaryAnimation,
  transitionType: SharedAxisTransitionType.horizontal,
  child: _currentPage,
)

FadeThroughTransition（淡入淡出动画）

FadeThroughTransition 用于在没有强关联的视图之间进行过渡。

dart 复制代码

FadeThroughTransition(
  animation: _animation,
  secondaryAnimation: _secondaryAnimation,
  child: _currentPage,
)

FadeScaleTransition（淡入缩放动画）

FadeScaleTransition 用于在视图进入或退出时同时应用淡入淡出和缩放效果。

dart 复制代码

FadeScaleTransition(
  animation: _animation,
  child: Dialog(
    child: Container(
      width: 200,
      height: 200,
      child: Center(
        child: Text('这是一个对话框'),
      ),
    ),
  ),
)

3. 配置页面过渡主题

可以在应用的 MaterialApp 中配置全局页面过渡主题：

dart 复制代码

MaterialApp(
  theme: ThemeData(
    pageTransitionsTheme: const PageTransitionsTheme(
      builders: <TargetPlatform, PageTransitionsBuilder>{
        TargetPlatform.android: ZoomPageTransitionsBuilder(),
      },
    ),
  ),
  home: HomePage(),
)

完整示例

下面是一个简单的示例，展示了如何在鸿蒙应用中使用 animations 包的主要功能：

dart 复制代码

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

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Animations Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const AnimationDemoHome(),
    );
  }
}

class AnimationDemoHome extends StatelessWidget {
  const AnimationDemoHome({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Animations Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            // OpenContainer 示例
            OpenContainer(
              transitionDuration: const Duration(milliseconds: 300),
              closedBuilder: (context, openContainer) {
                return Container(
                  width: 200,
                  height: 100,
                  margin: const EdgeInsets.all(20),
                  decoration: BoxDecoration(
                    color: Colors.blue,
                    borderRadius: BorderRadius.circular(10),
                  ),
                  child: Center(
                    child: Text(
                      '点击查看详情',
                      style: TextStyle(color: Colors.white, fontSize: 18),
                    ),
                  ),
                );
              },
              openBuilder: (context, closeContainer) {
                return Scaffold(
                  appBar: AppBar(
                    title: const Text('详情页面'),
                    leading: IconButton(
                      icon: const Icon(Icons.close),
                      onPressed: closeContainer,
                    ),
                  ),
                  body: const Center(
                    child: Padding(
                      padding: EdgeInsets.all(20),
                      child: Text(
                        '这是通过容器变换动画展开的详情页面，展示了 animations 包的强大功能。',
                        style: TextStyle(fontSize: 18),
                        textAlign: TextAlign.center,
                      ),
                    ),
                  ),
                );
              },
            ),
            // 其他动画示例可以在这里添加
          ],
        ),
      ),
    );
  }
}

注意事项

版本兼容性：确保使用的 Flutter 版本与 animations 包兼容。根据 pubspec.yaml 文件，该包要求 Flutter 版本 >= 3.7.0，Dart SDK 版本 >= 2.19.0 < 4.0.0。
性能优化：在使用动画时，尤其是复杂动画，要注意性能优化，避免在动画过程中进行大量计算或网络请求。
资源管理：在使用动画时，确保正确管理资源，避免内存泄漏。
鸿蒙平台适配：该包已适配鸿蒙平台，可以在鸿蒙应用中直接使用，但需要注意鸿蒙平台的特殊限制和要求。

总结

animations 是一个功能强大的 Flutter 包，它提供了一系列高质量的预构建动画效果，使开发者能够轻松地为应用添加精美的过渡动画。在鸿蒙平台上使用该包，可以为用户提供与 Material Design 一致的流畅动画体验。

通过本文的介绍，你已经了解了：

animations 包的基本概念和提供的动画类型
如何在鸿蒙应用中以 git 形式引入该包
如何使用该包提供的主要动画组件（OpenContainer、SharedAxisTransition、FadeThroughTransition、FadeScaleTransition）
如何配置全局页面过渡主题
一个完整的示例应用，展示了如何在鸿蒙上使用 animations 包

使用 animations 包，你可以轻松地为鸿蒙应用添加专业级的动画效果，提升用户体验，使应用更加生动和吸引人。

欢迎加入开源鸿蒙跨平台社区：https://openharmonycrossplatform.csdn.net