导语

用户体验（UX）的提升往往蕴藏在细节之中。一个优秀的 App 不仅需要功能完备，更需要交互流畅、视觉愉悦。在本次的实战中，我们将聚焦于 动效能力 的集成，让 TechHub 应用“动”起来。

本篇将重点介绍如何通过 Hero 动画、骨架屏加载 和 列表交错动画 三大“利器”，显著提升应用的视觉品质。

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

一、 页面转场：Hero 动画的妙用

在资讯列表页点击卡片跳转到详情页时，如果只是生硬的页面切换，体验会显得割裂。我们利用 Flutter 强大的 Hero 动画，实现了元素在两个页面间的平滑飞跃。

实现原理

Hero 动画的核心在于“共享元素”。我们在列表页（源页面）和详情页（目标页面）中，将需要过渡的组件（如头像、标题）用相同的 tag 包裹。

代码实现：

// 1. 列表页 (PostCard)
Hero(
  tag: 'avatar_${post.id}', // 唯一的 tag
  child: CircleAvatar(...),
)

// 2. 详情页 (PostDetailPage)
// 在详情页的对应位置，使用相同的 tag
Hero(
  tag: 'avatar_${post.id}',
  child: CircleAvatar(...),
)

当路由发生跳转时，Flutter 框架会自动计算两个 Hero 组件的位置差，并生成补间动画，让头像仿佛直接从列表中“飞”到了详情页顶部。

二、 数据加载：告别转圈圈，拥抱骨架屏

在数据加载过程中，传统的 CircularProgressIndicator（转圈圈）虽然能提示状态，但无法让用户预知内容结构。我们引入了 shimmer 库来实现 骨架屏（Skeleton Screen）。

• 优化前：屏幕中心一个孤零零的进度条，用户不知道加载完会显示什么。
• 优化后：屏幕上展示出灰色闪烁的卡片占位符，模拟了最终内容的布局（头像、标题、正文），大大降低了用户的心理等待时长。

实现逻辑：

Widget _buildSkeleton() {
  return ListView.builder(
    itemCount: 6,
    itemBuilder: (context, index) {
      return Shimmer.fromColors(
        baseColor: Colors.grey.shade300,
        highlightColor: Colors.grey.shade100,
        child: Card(...), // 模拟卡片布局
      );
    },
  );
}

三、 列表交互：优雅的入场动画

为了避免列表数据生硬地出现在屏幕上，我们使用了 flutter_staggered_animations 库，为资讯列表添加了 交错入场动画。

视觉效果

当数据加载完成后，列表项不会同时出现，而是按照索引顺序，依次带有轻微的 滑动（Slide） 和 淡入（Fade） 效果。这种“阶梯式”的呈现方式，引导了用户的视线流动。

代码集成：

AnimationLimiter(
  child: ListView.builder(
    itemBuilder: (context, index) {
      return AnimationConfiguration.staggeredList(
        position: index,
        duration: const Duration(milliseconds: 375),
        child: SlideAnimation(
          verticalOffset: 50.0,
          child: FadeInAnimation(
            child: PostCard(...),
          ),
        ),
      );
    },
  ),
)

四、 总结

通过这三项基础动效的集成，TechHub 的质感得到了明显提升：

1. 连贯性：Hero 动画连接了上下文。
2. 确定性：骨架屏预示了内容结构。
3. 愉悦感：交错动画丰富了视觉层次。

在接下来的 Day 18-19 中，我们将进一步探索全局动效管理与性能优化，确保这些动效在 OpenHarmony 设备上也能流畅运行。

参考资源：

• Flutter Hero Animations
• shimmer 包

本项目代码已托管至 AtomGit：https://atomgit.com/Betelgeuse76/my_first_ohos_app