HarmonyOS实战开发-如何实现页面间转场动画

2024-03-29 19:44
文章标签 实战 实现 开发 页面 动画 harmonyos 转场

本文主要是介绍HarmonyOS实战开发-如何实现页面间转场动画，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

介绍

在本教程中，我们将会通过一个简单的样例，学习如何基于ArkTS的声明式开发范式开发转场动画。其中包含页面间转场、组件内转场以及共享元素转场。效果如图所示：

说明： 本Codelab使用的display接口处于mock阶段，在预览器上使用会显示白屏现象，可选择在真机或模拟器上运行。

相关概念

  • 页面间转场：页面转场通过在全局pageTransition方法内配置页面入场组件和页面退场组件来自定义页面转场动效。
  • 组件内转场：组件转场主要通过transition属性进行配置转场参数，在组件插入和删除时进行过渡动效，主要用于容器组件子组件插入删除时提升用户体验（需要配合animateTo才能生效，动效时长、曲线、延时跟随animateTo中的配置）。
  • 共享元素转场：通过修改共享元素的sharedTransition属性设置元素在不同页面之间过渡动效。例如，如果两个页面使用相同的图片（但位置和大小不同），图片就会在这两个页面之间流畅地平移和缩放。

环境搭建

软件要求

  • DevEco Studio版本：DevEco Studio 3.1 Release。
  • OpenHarmony SDK版本：API version 9。

硬件要求

  • 开发板类型：润和RK3568开发板。
  • OpenHarmony系统：3.2 Release。

环境搭建

完成本篇Codelab我们首先要完成开发环境的搭建，本示例以RK3568开发板为例，参照以下步骤进行：

  1. 获取OpenHarmony系统版本：标准系统解决方案（二进制）。以3.2 Release版本为例：

2.搭建烧录环境。

  1. 完成DevEco Device Tool的安装
  2. 完成RK3568开发板的烧录

3.搭建开发环境。

  1. 开始前请参考工具准备，完成DevEco Studio的安装和开发环境配置。
  2. 开发环境配置完成后，请参考使用工程向导创建工程（模板选择“Empty Ability”）。
  3. 工程创建完成后，选择使用真机进行调测。

代码结构解读

本篇Codelab只对核心代码进行讲解。

├──entry/src/main/ets                      // 代码区
│  ├──common
│  │  ├──constants
│  │  │  └──CommonConstants.ets            // 公共常量类
│  │  └──utils           
│  │     ├──DimensionUtil.ets              // 屏幕适配工具类
│  │     └──GlobalContext.ets              // 全局上下文工具类
│  ├──entryability
│  │  └──EntryAbility.ets                  // 程序入口类
│  ├──pages
│  │  ├──BottomTransition.ets              // 底部滑出页面
│  │  ├──ComponentTransition.ets           // 移动动画转场页面
│  │  ├──CustomTransition.ets              // 放缩动画转场页面
│  │  ├──FullCustomTransition.ets          // 旋转动画转场页面
│  │  ├──Index.ets                         // 应用首页
│  │  ├──ShareItem.ets                     // 共享元素转场部件
│  │  └──SharePage.ets                     // 共享元素转场页面
│  ├──view
│  │  ├──BackContainer.ets                 // 自定义头部返回组件
│  │  └──TransitionElement.ets             // 自定义动画元素
│  └──viewmodel
│     └──AnimationModel.ets                // 动画封装的model类
└──entry/src/main/resources                // 资源文件目录

构建主界面

在这个任务中，我们将完成主界面的设计和开发，效果如图所示：

从上面效果图可以看出，主界面主要由5个相同样式的功能菜单组成，我们可以将这些菜单抽取成一个子组件Item。

  1. 将所需要的图片添加到resources > base > media目录下。

2.在Index.ets中引入首页所需要图片和路由信息，声明子组件的UI布局并添加样式，使用ForEach方法循环渲染首页列表常量数据“INDEX_ANIMATION_MODE”，其中imgRes是设置按钮的背景图片，url用于设置页面路由的地址。

// Index.ets
import { INDEX_ANIMATION_MODE } from '../common/constants/CommonConstants';Column() {ForEach(INDEX_ANIMATION_MODE, (item: AnimationModel) => {Row().backgroundImage(item.imgRes).backgroundImageSize(ImageSize.Cover).backgroundColor($r('app.color.trans_parent')).height(DimensionUtil.getVp($r('app.float.main_page_body_height'))).margin({ bottom: DimensionUtil.getVp($r('app.float.main_page_body_margin')) }).width(FULL_LENGTH).borderRadius(BORDER_RADIUS).onClick(() => {router.pushUrl({ url: item.url }).catch((err: Error) => {hilog.error(DOMAIN, PREFIX, FORMAT, err);});})}, (item: AnimationModel) => JSON.stringify(item))
}

页面间转场

实现“底部滑入”效果

在BottomTransition申明pageTransition方法配置转场参数，其中PageTransitionEnter用于自定义当前页面的入场效果，PageTransitionExit用于自定义当前页面的退场效果。效果如图所示：

通过设置PageTransitionEnter和PageTransitionExit的slide属性为SlideEffect.Bottom，来实现BottomTransition入场时从底部滑入，退场时从底部滑出。

// BottomTransition.ets
@Entry
@Component
struct BottomTransition {build() {Column() {TransitionElement()}}/*** 页面转场通过全局pageTransition方法进行配置转场参数** SlideEffect.Bottom 入场时从屏幕下方滑入。* SlideEffect.Bottom 退场时从屏幕下方滑出。*/pageTransition() {PageTransitionEnter({ duration: TRANSITION_ANIMATION_DURATION, curve: Curve.Smooth }).slide(SlideEffect.Bottom);PageTransitionExit({ duration: TRANSITION_ANIMATION_DURATION, curve: Curve.Smooth }).slide(SlideEffect.Bottom);}
}

实现”页面转场：自定义1“效果

本节实现的效果，页面入场时为淡入和放大，退场时从右下角滑出。效果如图所示：

在CustomTransition.ets的Column组件中添加TransitionElement组件，并且定义pageTransition方法。

// CustomTransition.ets
@Entry
@Component
struct CustomTransition {build() {Column() {TransitionElement()}}/*** 页面转场通过全局pageTransition方法进行配置转场参数** 进场时透明度设置从0.2到1；x、y轴缩放从0变化到1* 退场时x、y轴的偏移量为500*/pageTransition() {PageTransitionEnter({ duration: TRANSITION_ANIMATION_DURATION, curve: Curve.Smooth }).opacity(CUSTOM_TRANSITION_OPACITY).scale(CUSTOM_TRANSITION_SCALE)PageTransitionExit({ duration: TRANSITION_ANIMATION_DURATION, curve: Curve.Smooth }).translate(CUSTOM_TRANSITION_TRANSLATE)}
}

说明： translate设置页面转场时的平移效果，为入场时起点和退场时终点的值，和slide同时设置时默认生效slide。

实现”页面转场：自定义2“动效

本节实现的效果，页面入场时淡入和放大，同时顺时针旋转；退场时淡出和缩小，同时逆时针旋转。效果如图所示：

在FullCustomTransition.ets的Column组件中添加TransitionElement组件，并且定义pageTransition方法。给Stack组件添加opacity、scale、rotate属性，定义变量animValue用来控制Stack组件的动效，在PageTransitionEnter和PageTransitionExit组件中动态改变myProgress的值。

// FullCustomTransition.ets
@Entry
@Component
struct FullCustomTransition {@State animValue: number = FULL_CUSTOM_TRANSITION_DEFAULT_ANIM_VALUE;build() {Column() {TransitionElement()}.opacity(this.animValue).scale({ x: this.animValue, y: this.animValue }).rotate({z: FULL_CUSTOM_TRANSITION_ROTATE_Z,angle: FULL_CUSTOM_TRANSITION_ANGLE * this.animValue})}/*** 页面转场通过全局pageTransition方法进行配置转场参数** 进场过程中会逐帧触发onEnter回调，入参为动效的归一化进度(0 - 1)* 进场过程中会逐帧触发onExit回调，入参为动效的归一化进度(0 - 1)*/pageTransition() {PageTransitionEnter({ duration: TRANSITION_ANIMATION_DURATION, curve: Curve.Smooth }).onEnter((type?: RouteType, progress?: number) => {if (!progress) {return;}this.animValue = progress;});PageTransitionExit({ duration: TRANSITION_ANIMATION_DURATION, curve: Curve.Smooth }).onExit((type?: RouteType, progress?: number) => {if (!progress) {return;}this.animValue = FULL_CUSTOM_TRANSITION_DEFAULT_ANIM_VALUE - progress;});}
}

组件内转场

本节实现组件内转场动效，通过一个按钮来控制组件的添加和移除，呈现容器组件子组件添加和移除时的动效。效果如图所示：

组件转场主要通过transition属性方法配置转场参数，在组件添加和移除时会执行过渡动效，需要配合animateTo才能生效。动效时长、曲线、延时跟随animateTo中的配置。

  1. 在ComponentTransition.ets文件中，新建Image子组件，并添加两个transition属性，分别用于定义组件的添加动效和移除动效。
// ComponentTransition.ets
Image($r('app.media.bg_element')).TransitionEleStyles().transition({type: TransitionType.Insert,scale: COMPONENT_TRANSITION_SCALE,opacity: COMPONENT_TRANSITION_OPACITY}).transition({type: TransitionType.Delete,rotate: COMPONENT_TRANSITION_ROTATE,opacity: COMPONENT_TRANSITION_OPACITY})

2.在ComponentTransition代码中，定义一个isShow变量，用于控制Image子组件的添加和移除，在Button组件的onClick事件中添加animateTo方法，来使Image子组件子组件动效生效。

// ComponentTransition.ets
@State isShow: boolean = false;Button($r('app.string.Component_transition_toggle')).height(DimensionUtil.getVp($r('app.float.element_trans_btn_height'))).width(DimensionUtil.getVp($r('app.float.element_trans_btn_width'))).fontColor(Color.White).backgroundColor($r('app.color.light_blue')).onClick(() => {animateTo({ duration: TRANSITION_ANIMATION_DURATION }, () => {this.isShow = !this.isShow;})})

共享元素转场

效果如图所示：

共享元素转场通过给组件设置sharedTransition属性来实现，两个页面的组件配置为同一个id，则转场过程中会执行共享元素转场。sharedTransition可以设置动效的时长、动画曲线和延时，实现步骤如下：

  1. 在ShareItem.ets中给Image组件设置sharedTransition属性，组件转场id设置为“SHARE_TRANSITION_ID”。
// ShareItem.ets
Image($r('app.media.bg_transition')).width(FULL_LENGTH).height(DimensionUtil.getVp($r('app.float.share_item_element_height'))).borderRadius(DimensionUtil.getVp($r('app.float.share_item_radius'))).margin({ bottom: DimensionUtil.getVp($r('app.float.share_item_element_margin_bottom')) }).sharedTransition(SHARE_TRANSITION_ID, {duration: TRANSITION_ANIMATION_DURATION,curve: Curve.Smooth,delay: SHARE_ITEM_ANIMATION_DELAY}).onClick(() => {router.pushUrl({ url: SHARE_PAGE_URL }).catch((err: Error) => {hilog.error(DOMAIN, PREFIX, FORMAT, err);});})

2.在SharePage.ets中给Image组件设置sharedTransition属性，组件转场id设置为“SHARE_TRANSITION_ID”。

// SharePage.ets
@Entry
@Component
struct SharePage {build() {Column() {TransitionElement({ imgFit: ImageFit.Cover }).sharedTransition(SHARE_TRANSITION_ID, {duration: SHARE_ITEM_DURATION,curve: Curve.Smooth,delay: SHARE_ITEM_ANIMATION_DELAY})}}
}

说明： 两个页面的组件配置为同一个id，则转场过程中会执行共享元素转场，配置为空字符串时不会有共享元素转场效果。

总结

您已经完成了本次Codelab的学习，并了解到以下知识点：

  1. 如何实现页面间转场动画。
  2. 如何实现组件内转场动画。
  3. 如何实现共享元素转场动画。

为了帮助大家更深入有效的学习到鸿蒙开发知识点，小编特意给大家准备了一份全套最新版的HarmonyOS NEXT学习资源，获取完整版方式请点击→《HarmonyOS教学视频》

HarmonyOS教学视频：语法ArkTS、TypeScript、ArkUI等.....视频教程

鸿蒙生态应用开发白皮书V2.0PDF：

获取完整版白皮书方式请点击→《鸿蒙生态应用开发白皮书V2.0PDF》

鸿蒙 (Harmony OS)开发学习手册

一、入门必看

  1. 应用开发导读(ArkTS)
  2. ……

二、HarmonyOS 概念

  1. 系统定义
  2. 技术架构
  3. 技术特性
  4. 系统安全
  5. ........

三、如何快速入门？《做鸿蒙应用开发到底学习些啥？》

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

四、开发基础知识

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

五、基于ArkTS 开发

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

更多了解更多鸿蒙开发的相关知识可以参考：《鸿蒙 (Harmony OS)开发学习手册》

这篇关于HarmonyOS实战开发-如何实现页面间转场动画的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/859465。

相关文章

windos server2022里的DFS配置的实现

windos server2022里的DFS配置的实现

《windosserver2022里的DFS配置的实现》DFS是WindowsServer操作系统提供的一种功能,用于在多台服务器上集中管理共享文件夹和文件的分布式存储解决方案,本文就来介绍一下wi... 目录什么是DFS？优势：应用场景：DFS配置步骤什么是DFS？DFS指的是分布式文件系统（Distr
阅读更多...
Golang操作DuckDB实战案例分享

Golang操作DuckDB实战案例分享

《Golang操作DuckDB实战案例分享》DuckDB是一个嵌入式SQL数据库引擎,它与众所周知的SQLite非常相似,但它是为olap风格的工作负载设计的,DuckDB支持各种数据类型和SQL特性... 目录DuckDB的主要优点环境准备初始化表和数据查询单行或多行错误处理和事务完整代码最后总结Duck
阅读更多...
NFS实现多服务器文件的共享的方法步骤

NFS实现多服务器文件的共享的方法步骤

《NFS实现多服务器文件的共享的方法步骤》NFS允许网络中的计算机之间共享资源,客户端可以透明地读写远端NFS服务器上的文件,本文就来介绍一下NFS实现多服务器文件的共享的方法步骤,感兴趣的可以了解一... 目录一、简介二、部署1、准备1、服务端和客户端：安装nfs-utils2、服务端：创建共享目录3、服
阅读更多...
基于Python开发电脑定时关机工具

基于Python开发电脑定时关机工具

《基于Python开发电脑定时关机工具》这篇文章主要为大家详细介绍了如何基于Python开发一个电脑定时关机工具,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录1. 简介2. 运行效果3. 相关源码1. 简介这个程序就像一个“忠实的管家”，帮你按时关掉电脑，而且全程不需要你多做
阅读更多...
C#使用yield关键字实现提升迭代性能与效率

C#使用yield关键字实现提升迭代性能与效率

《C#使用yield关键字实现提升迭代性能与效率》yield关键字在C#中简化了数据迭代的方式,实现了按需生成数据,自动维护迭代状态,本文主要来聊聊如何使用yield关键字实现提升迭代性能与效率,感兴... 目录前言传统迭代和yield迭代方式对比yield延迟加载按需获取数据yield break显式示迭
阅读更多...
Python实现高效地读写大型文件

Python实现高效地读写大型文件

《Python实现高效地读写大型文件》Python如何读写的是大型文件,有没有什么方法来提高效率呢,这篇文章就来和大家聊聊如何在Python中高效地读写大型文件,需要的可以了解下... 目录一、逐行读取大型文件二、分块读取大型文件三、使用 mmap 模块进行内存映射文件操作（适用于大文件）四、使用 pand
阅读更多...
python实现pdf转word和excel的示例代码

python实现pdf转word和excel的示例代码

《python实现pdf转word和excel的示例代码》本文主要介绍了python实现pdf转word和excel的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价... 目录一、引言二、python编程1，PDF转Word2，PDF转Excel三、前端页面效果展示总结一
阅读更多...
Python xmltodict实现简化XML数据处理

Python xmltodict实现简化XML数据处理

《Pythonxmltodict实现简化XML数据处理》Python社区为提供了xmltodict库,它专为简化XML与Python数据结构的转换而设计,本文主要来为大家介绍一下如何使用xmltod... 目录一、引言二、XMLtodict介绍设计理念适用场景三、功能参数与属性1、parse函数2、unpa
阅读更多...
C#实现获得某个枚举的所有名称

C#实现获得某个枚举的所有名称

《C#实现获得某个枚举的所有名称》这篇文章主要为大家详细介绍了C#如何实现获得某个枚举的所有名称,文中的示例代码讲解详细,具有一定的借鉴价值,有需要的小伙伴可以参考一下... C#中获得某个枚举的所有名称using System;using System.Collections.Generic;usi
阅读更多...
Go语言实现将中文转化为拼音功能

Go语言实现将中文转化为拼音功能

《Go语言实现将中文转化为拼音功能》这篇文章主要为大家详细介绍了Go语言中如何实现将中文转化为拼音功能,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 有这么一个需求：新用户入职 创建一系列账号比较麻烦，打算通过接口传入姓名进行初始化。想把姓名转化成拼音。因为有些账号即需要中文也需要英
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2