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

往期知识点整理

介绍

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

效果图预览

使用说明

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

实现思路

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

实现方案如下:

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
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值