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.dataSource.getData(index).cardArea = newValue;
    })
    .width('100%')
  })

3、入场动画:onCardReadyExpand回调在DetailPage内部Image渲染结束时触发;(用于解决 Image 组件的渲染期间就发生页面转场导致的白色闪屏问题)
使用Stack布局,动态设置DetailPage zIndex值大于CardList,使DetailPage覆盖到CardList上;
设置expandCardId为被点击的卡片Id,触发DetailPage卡片组件-> DetailPage详情页的属性动画;(显式动画改变宽高)

  CardPage({
    cardData: this.dataSource.getData(this.clickedCardIndex),
    expandCardId: this.expandCardId,
    onCardReadyExpand: () => {
      if (!this.isDetailPageShow) {
        animateTo({duration: 5,onFinish: ()=>{
          this.expandCardId = this.dataSource.getData(this.clickedCardIndex).id;
        }}, ()=> { 
          this.isDetailPageShow = true
        })
      }
    },
    onBack: () => {
      this.expandCardId = -1;
    },
    onAnimationFinish: () => {
      if (this.expandCardId < 0) {
          this.clickedCardIndex = -1;
          this.isDetailPageShow = false;
      }
    }
  })
  .width(this.expandCardId > -1 ? '100%' : this.dataSource.getData(this.clickedCardIndex).cardArea.width)
  .height(this.expandCardId > -1 ? px2vp( this.currentDisplayHeight as number) : this.dataSource.getData(this.clickedCardIndex).cardArea.height)
  .position({
    x: this.expandCardId > -1 ? 0 : this.dataSource.getData(this.clickedCardIndex).cardArea.position.x,
    y: this.expandCardId > -1 ? 0 : (this.dataSource.getData(this.clickedCardIndex).cardArea.position.y)
  })
  .animation({duration: 200})
  .backgroundColor(Color.White)

  .zIndex(this.isDetailPageShow ? 2 : 0)

4、入场动画:CardPage内部监听expandCardId值变化,触发expandCardId相关的显式动画,透明度动画控制卡片组件和卡片详情页不共用组件的显隐

    @Prop @Watch('onExpandCardIdChange') expandCardId?: number = -1;
    onExpandCardIdChange() {
      animateTo({duration:200, onFinish: this.onAnimationFinish}, ()=>{
        this.isCardExpand = this.expandCardId === this.cardData.id
      })
    }

5、出场动画:点击返回按钮,触发重置为this.expandCardId = -1,卡片组件宽高动画和卡片组件和卡片详情页不共用组件的显隐动画,都关联expandCardId属性。即可实现出场动画。

6、一镜到底实际上是在动画开始前将UI显示相同的A组件覆盖到B卡片组件上,入场动画和出场动画作用A一个组件上。

高性能知识点

本示例使用了LazyForEach进行数据懒加载以降低内存占用。

工程结构&模块类型

  transitionanimation             // har包
     |---model
     |   |---CardData.ets          // 卡片页面的model层数据结构
     |   |---WaterFlowDataSource.ets    // 瀑布流列表 model 数据层      
     |---pages
     |   |---TransitionAnimationPage.ets           // 转场动画效果实现页面
     |   |---CardPage.ets                            // 卡片和卡片详情页面
     |   |---NewNavPage.ets                        // 从卡片详情页面使用路由跳转到的页面

为了能让大家更好的学习鸿蒙(HarmonyOS NEXT)开发技术,这边特意整理了《鸿蒙开发学习手册》(共计890页),希望对大家有所帮助:https://qr21.cn/FV7h05

《鸿蒙开发学习手册》:

如何快速入门:https://qr21.cn/FV7h05

  1. 基本概念
  2. 构建第一个ArkTS应用
  3. ……

开发基础知识:https://qr21.cn/FV7h05

  1. 应用基础知识
  2. 配置文件
  3. 应用数据管理
  4. 应用安全管理
  5. 应用隐私保护
  6. 三方应用调用管控机制
  7. 资源分类与访问
  8. 学习ArkTS语言
  9. ……

基于ArkTS 开发:https://qr21.cn/FV7h05

  1. Ability开发
  2. UI开发
  3. 公共事件与通知
  4. 窗口管理
  5. 媒体
  6. 安全
  7. 网络与链接
  8. 电话服务
  9. 数据管理
  10. 后台任务(Background Task)管理
  11. 设备管理
  12. 设备使用信息统计
  13. DFX
  14. 国际化开发
  15. 折叠屏系列
  16. ……

鸿蒙开发面试真题(含参考答案):https://qr18.cn/F781PH

鸿蒙开发面试大盘集篇(共计319页):https://qr18.cn/F781PH

1.项目开发必备面试题
2.性能优化方向
3.架构方向
4.鸿蒙开发系统底层方向
5.鸿蒙音视频开发方向
6.鸿蒙车载开发方向
7.鸿蒙南向开发方向

<think>嗯,用户想了解如何在HarmonyOS 2.0上使用Theme Studio开发到底的效果。首先,我需要回忆HarmonyOS 2.0的相关文档和Theme Studio的功能。到底通常指的是在界面切换时,元素平滑过渡,形成连贯的视觉效果,类似电影中的长头。这在移动应用中常用于提升用户体验,比如打开应用时的动画效果。 首先,用户可能需要知道Theme Studio的基本操作,比如如何创建项目、配置动画资源。然后,到底涉及到页面间的转场动画,可能需要使用到Page Transition和Component Transition。HarmonyOS动画机制是基于ArkUI的,所以需要确认Theme Studio是否支持这些动画的配置,或者是否需要结合代码来实现。 接下来,具体步骤可能包括:在Theme Studio中设计动画的关键帧,定义起始和结束状态,设置动画的持续时间和缓动函数。可能还需要处理不同页面之间的元素关联,确保它们在转场时能够正确对应。此外,资源文件的处理也很重要,比如图片的尺寸优化,避免动画卡顿。 用户可能遇到的问题包括动画不流畅、元素错位等,这时候需要检查动画的帧率和资源加载情况,或者使用性能分析工具来优化。另外,HarmonyOS的文档是否有相关的案例或最佳实践,这需要查阅官方资料,确保提供的信息准确。 最后,生成的相关问题需要考虑用户可能进步的需求,比如性能优化方法、与其他动画效果的结合,或者在不同设备上的适配问题。需要确保这些问题能够帮助用户深入理解和应用到底效果。</think># 使用Theme Studio在HarmonyOS 2.0开发到底效果 ## 开发基础 1. **环境搭建** - 安装Huawei Theme Studio 3.0.1及以上版本 - 配置HarmonyOS SDK 2.0 API Version 5 - 创建新工程时选择"Motion Theme"模板 2. **核心原理** 到底通过`Page Transition`和`Component Transition`实现视觉连贯性,使用ArkUI动画插值器完成坐标转换计算: $$x_{new} = x_{start} + (x_{end} - x_{start}) \cdot \frac{t}{T}$$ 其中$t$为当前时间,$T$为动画总时长[^1] ## 二、实现步骤 ```xml <!-- 转场动画定义 --> <transition src_page="entry/MainAbility/pages/index" dst_page="entry/MainAbility/pages/detail" type="push"> <motion duration="500" interpolator="cubic-bezier(0.33,0.04,0.63,0.28)"> <shared-element src_id="hero_image" dst_id="detail_header"/> </motion> </transition> ``` 1. **关键帧配置** - 在`resources/animator`目录创建XML动画描述文件 - 使用`<objectAnimator>`定义缩放/位移/透明度复合动画 - 设置`android:propertyName="bounds"`实现元素匹配 2. **性能优化** - 启用硬件加速:在config.json添加`"hwcAccelerated": true` - 图片资源尺寸控制在$1024 \times 1024$像素以内 - 使用Lottie动画时限制帧率不超过60fps ## 三、调试技巧 1. **实时预览** 通过`Shift+F10`启动本地模拟器,使用`Motion Preview`工具逐帧分析动画路径 2. **常见问题处理** - 元素错位:检查DP单位转换,确保使用`vp2px()`函数 - 动画卡顿:在DevEco Studio中启用`HiLog`日志过滤`ANIMATION_PERF`标签
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值