鸿蒙(HarmonyOS)应用开发实战————一镜到底“页面转场”动画

本文链接：https://blog.youkuaiyun.com/CTrup/article/details/142740690

往期知识点整理

介绍

本方案做的是页面点击卡片跳转到详情预览的转场动画效果

效果图预览

使用说明

点击首页卡片跳转到详情页，再点击进入路由页面按钮，进入新的路由页面

实现思路

首页使用了一种视觉上看起来像是组件的转场动画，这种转场动画通常是通过组件的动态加载和切换来实现的，不是路由页面转场动画。

实现方案如下：

1、入场动画：采用stack布局，容器内有瀑布流卡片列表CardList和卡片详情页DetailPage（展开时是详情页，未展开是卡片组件）

  build() {
   
   
    Stack() {
   
   
      this.CardList();
      this.DetailPage();
    }
  }

2、入场动画：点击卡片后，记录当前被点击卡片在数组中的索引，DetailPage渲染被点击卡片组件，使用onAreaChange存储每个Card被点击时的位置、宽高信息，用于设置返回动画卡片组件的结束状态位置尺寸信息；

  LazyForEach(this.dataSource, (item: CardData, index) => {
   
   
    FlowItem() {
   
   
      CardPage({
   
   cardData: item})
        .onClick(() => {
   
   
          this.clickedCardIndex = index;
        })
    }
    .onAreaChange((oldValue, newValue) => {
   
   
      this.da