在鸿蒙系统上使用 Flutter Animations 动画包-优快云博客

插件介绍

Flutter Animations 是一个高质量的预构建动画包，提供了常见的动画效果，可以帮助开发者轻松地为其应用添加专业的交互动画。该包实现了 Material Design 规范中定义的所有标准过渡模式，包括容器变换、共享轴、淡入淡出和淡入四种核心动画模式。

这些动画可以很好地提升用户体验，使界面转换更加自然流畅。由于 Flutter 本身的跨平台特性，Animations 包也能够良好地运行在鸿蒙平台上，为鸿蒙应用带来同样精美的动画体验。

如何使用插件

1. 添加依赖

由于这个三方库为自定义修改版本，需要以 git 形式引入。在引用的项目中，pubspec.yaml 中 dependencies 新增配置：

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

然后运行以下命令获取依赖：

flutter pub get

2. 导入包

在需要使用的 Dart 文件中导入动画包：

import 'package:animations/animations.dart';

3. 四种主要动画类型的使用

容器变换(Container Transform)

容器变换用于具有容器关系的 UI 元素之间的过渡，比如从卡片到详情页的过渡：

OpenContainer(
  closedBuilder: (context, openContainer) {
    return Card(
      child: ListTile(
        title: Text('点击查看详情'),
        onTap: openContainer,
      ),
    );
  },
  openBuilder: (context, _) {
    return DetailPage();
  },
)

共享轴(Shared Axis)

共享轴用于具有空间或导航关系的页面间过渡，比如列表项间的导航：

PageTransitionSwitcher(
  transitionBuilder: (
    Widget child,
    Animation<double> animation,
    Animation<double> secondaryAnimation,
  ) {
    return SharedAxisTransition(
      fillColor: Colors.white,
      transitionType: SharedAxisTransitionType.scaled,
      animation: animation,
      secondaryAnimation: secondaryAnimation,
      child: child,
    );
  },
  child: currentPage,
)

淡入淡出(Fade Through)

淡入淡出用于没有强关联关系的元素之间的过渡：

PageTransitionSwitcher(
  transitionBuilder: (
    Widget child,
    Animation<double> animation,
    Animation<double> secondaryAnimation,
  ) {
    return FadeThroughTransition(
      animation: animation,
      secondaryAnimation: secondaryAnimation,
      child: child,
    );
  },
  child: currentWidget,
)

淡入(Fade)

淡入动画适用于屏幕内的元素进出动画，如对话框、菜单等：

showModal(
  context: context,
  configuration: FadeScaleTransitionConfiguration(),
  builder: (context) {
    return AlertDialog(
      title: Text('标题'),
      content: Text('这是对话框内容'),
      actions: [
        TextButton(
          onPressed: () => Navigator.of(context).pop(),
          child: Text('确定'),
        ),
      ],
    );
  },
)

4. 在鸿蒙项目中的特殊配置

针对鸿蒙平台，您可能需要确保 Flutter 项目正确配置了鸿蒙支持。这通常涉及以下几个步骤：

确保您的 Flutter SDK 版本满足要求（>=3.7.0）
如果使用 DevEco Studio，创建支持鸿蒙平台的 Flutter 项目：
```
flutter create --platforms=ohos your_project_name
```
在鸿蒙设备或模拟器上运行：
```
flutter run -d harmony
```

总结

Flutter Animations 包为开发者提供了简单易用且高质量的动画解决方案，能够在鸿蒙平台上完美运行。通过四种核心的 Material Design 动画模式，开发者可以显著提升应用的用户体验和视觉吸引力。

该包的主要优势包括：

易于集成：只需添加依赖即可使用
高质量动画：遵循 Material Design 规范
跨平台支持：天然支持鸿蒙系统
灵活定制：可自定义各种动画参数

在鸿蒙应用开发中使用 Flutter Animations 包，可以让您的应用在保持高性能的同时拥有流畅美观的动画效果，从而提升用户的整体使用体验。无论是简单的页面切换还是复杂的交互动画，这个包都能为您提供可靠的解决方案。通过 Git 方式引入自定义修改版本，还能让您获得针对鸿蒙平台优化的特定功能和修复。