鸿蒙Harmony应用开发—ArkTS-转场动画(页面间转场)

2024-03-20 21:44

本文主要是介绍鸿蒙Harmony应用开发—ArkTS-转场动画(页面间转场),希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

当路由进行切换时,可以通过在pageTransition函数中自定义页面入场和页面退场的转场动效。详细指导请参考页面转场动画。

说明:

从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。

为了实现更好的转场效果,推荐使用Navigation组件和模态转场。

名称参数必填参数描述
PageTransitionEnter{
type?: RouteType,
duration?: number,
curve?: Curve | string | ICurve10+,
delay?: number
}
设置当前页面的自定义入场动效。
- type:页面转场效果生效的路由类型。
默认值:RouteType.None。
- duration:动画的时长。
单位:毫秒
默认值:1000
- curve:动画曲线。string类型的取值支持"ease"、"ease-in"、"ease-out"、"ease-in-out"、"extreme-deceleration"、"fast-out-linear-in"、"fast-out-slow-in"、"friction"、"linear"、"linear-out-slow-in"、"rhythm"、"sharp"、"smooth"。
默认值:Curve.Linear
- delay:动画延迟时长。
单位:毫秒
默认值:0
说明:
没有匹配时使用系统默认的页面转场效果(根据设备可能会有差异),如需禁用系统默认页面转场效果,可以指定duration为0。
PageTransitionExit{
type?: RouteType,
duration?: number,
curve?: Curve | string | ICurve10+,
delay?: number
}
设置当前页面的自定义退场动效。
- type:页面转场效果生效的路由类型。
默认值:RouteType.None。
- duration:动画的时长。
单位:毫秒
默认值:1000
- curve:动画曲线,string类型取值与PageTransitionEnter相同。
 默认值:Curve.Linear
- delay:动画延迟时长。
单位:毫秒
默认值:0
说明:
没有匹配时使用系统默认的页面转场效果(根据设备可能会有差异),如需禁用系统默认页面转场效果,可以指定duration为0。

RouteType枚举说明

名称描述
Pop重定向指定页面。从PageB回退到之前的页面PageA。对于PageB,指定RouteType为None或者Pop的PageTransitionExit组件样式生效,对于PageA,指定RouteType为None或者Pop的PageTransitionEnter组件样式生效。
Push跳转到下一页面。PageA跳转到下一个新的界面PageB。对于PageA,指定RouteType为None或者Push的PageTransitionExit组件样式生效,对于PageB,指定RouteType为None或者Push的PageTransitionEnter组件样式生效。
None页面未重定向。如Push和Pop描述中RouteType为None的情形,即页面进场时PageTransitionEnter的转场效果生效;退场时PageTransitionExit的转场效果生效。

属性

参数名称参数类型必填参数描述
slideSlideEffect设置页面转场时的滑入滑出效果。
translate{
x? : number | string,
y? : number | string,
z? : number | string
}
设置页面转场时的平移效果,为入场时起点和退场时终点的值,和slide同时设置时默认生效slide。
- x:横向的平移距离。
- y:纵向的平移距离。
- z:竖向的平移距离。
scale{
x? : number,
y? : number,
z? : number,
centerX? : number | string,
centerY? : number | string
}
设置页面转场时的缩放效果,为入场时起点和退场时终点的值。
- x:横向放大倍数(或缩小比例)。
- y:纵向放大倍数(或缩小比例)。
- z:竖向放大倍数(或缩小比例)。
- centerX、centerY缩放中心点。centerX和centerY默认值是"50%",即默认以页面的中心点为旋转中心点。
- 中心点为(0, 0)代表页面的左上角。
opacitynumber设置入场的起点透明度值或者退场的终点透明度值。

SlideEffect枚举说明

名称描述
Left设置到入场时表示从左边滑入,出场时表示滑出到左边。
Right设置到入场时表示从右边滑入,出场时表示滑出到右边。
Top设置到入场时表示从上边滑入,出场时表示滑出到上边。
Bottom设置到入场时表示从下边滑入,出场时表示滑出到下边。

事件

事件功能描述
onEnter(event: (type?: RouteType, progress?: number) => void)回调入参为当前入场动画的归一化进度[0 - 1]。
- type:跳转方法。
- progress:当前进度。
触发该事件的条件:
逐帧回调,直到入场动画结束,progress从0变化到1。
onExit(event: (type?: RouteType, progress?: number) => void)回调入参为当前退场动画的归一化进度[0 - 1]。
- type:跳转方法。
- progress:当前进度。
触发该事件的条件:
逐帧回调,直到退场动画结束,progress从0变化到1。

示例

自定义方式1:配置了当前页面的入场动画为淡入,退场动画为缩小。

// index.ets
@Entry
@Component
struct PageTransitionExample1 {@State scale1: number = 1@State opacity1: number = 1build() {Column() {Navigator({ target: 'pages/page1', type: NavigationType.Push }) {Image($r('app.media.bg1')).width('100%').height('100%')    // 图片存放在media文件夹下}}.scale({ x: this.scale1 }).opacity(this.opacity1)}// 自定义方式1:完全自定义转场过程的效果pageTransition() {PageTransitionEnter({ duration: 1200, curve: Curve.Linear }).onEnter((type?: RouteType, progress?: number) => {this.scale1 = 1this.opacity1 = progress as number}) // 进场过程中会逐帧触发onEnter回调,入参为动效的归一化进度(0% -- 100%)PageTransitionExit({ duration: 1200, curve: Curve.Ease }).onExit((type?: RouteType, progress?: number) => {this.scale1 = 1 - (progress as number)this.opacity1 = 1}) // 退场过程中会逐帧触发onExit回调,入参为动效的归一化进度(0% -- 100%)}
}
// page1.ets
@Entry
@Component
struct AExample {@State scale2: number = 1@State opacity2: number = 1build() {Column() {Navigator({ target: 'pages/index', type: NavigationType.Push }) {Image($r('app.media.bg2')).width('100%').height('100%')   // 图片存放在media文件夹下}}.width('100%').height('100%').scale({ x: this.scale2 }).opacity(this.opacity2)}// 自定义方式1:完全自定义转场过程的效果pageTransition() {PageTransitionEnter({ duration: 1200, curve: Curve.Linear }).onEnter((type?: RouteType, progress?: number) => {this.scale2 = 1this.opacity2 = progress as number}) // 进场过程中会逐帧触发onEnter回调,入参为动效的归一化进度(0% -- 100%)PageTransitionExit({ duration: 1200, curve: Curve.Ease }).onExit((type?: RouteType, progress?: number) => {this.scale2 = 1 - (progress as number)this.opacity2 = 1}) // 退场过程中会逐帧触发onExit回调,入参为动效的归一化进度(0% -- 100%)}
}

pageTransition1

自定义方式2:配置了当前页面的入场动画为从左侧滑入,退场为平移加透明度变化。

// index.ets 
@Entry
@Component
struct PageTransitionExample {build() {Column() {Navigator({ target: 'pages/page1', type: NavigationType.Push }) {Image($r('app.media.bg1')).width('100%').height('100%')   // 图片存放在media文件夹下}}}// 自定义方式2:使用系统提供的多种默认效果(平移、缩放、透明度等)pageTransition() {// 该页面进入动画时长为1200ms,尽量与另一页面的退出动画时长匹配PageTransitionEnter({ duration: 1200 }).slide(SlideEffect.Left)// 该页面退出动画时长为1000ms,尽量与另一页面的进入动画时长匹配PageTransitionExit({ duration: 1000 }).translate({ x: 100.0, y: 100.0 }).opacity(0)}
}
// page1.ets
@Entry
@Component
struct PageTransitionExample1 {build() {Column() {Navigator({ target: 'pages/index', type: NavigationType.Push }) {Image($r('app.media.bg2')).width('100%').height('100%')    // 图片存放在media文件夹下}}}// 自定义方式2:使用系统提供的多种默认效果(平移、缩放、透明度等)pageTransition() {// 该页面进入动画时长为1000ms,尽量与另一页面的退出动画时长匹配PageTransitionEnter({ duration: 1000 }).slide(SlideEffect.Left)// 该页面退出动画时长为1200ms,尽量与另一页面的进入动画时长匹配PageTransitionExit({ duration: 1200 }).translate({ x: 100.0, y: 100.0 }).opacity(0)}
}

pageTransition2

最后

有很多小伙伴不知道学习哪些鸿蒙开发技术?不知道需要重点掌握哪些鸿蒙应用开发知识点?而且学习时频繁踩坑,最终浪费大量时间。所以有一份实用的鸿蒙(HarmonyOS NEXT)资料用来跟着学习是非常有必要的。 

这份鸿蒙(HarmonyOS NEXT)资料包含了鸿蒙开发必掌握的核心知识要点,内容包含了ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、Harmony南向开发、鸿蒙项目实战等等)鸿蒙(HarmonyOS NEXT)技术知识点。

希望这一份鸿蒙学习资料能够给大家带来帮助,有需要的小伙伴自行领取,限时开源,先到先得~无套路领取!!

获取这份完整版高清学习路线,请点击→纯血版全套鸿蒙HarmonyOS学习资料

鸿蒙(HarmonyOS NEXT)最新学习路线

  •  HarmonOS基础技能

  • HarmonOS就业必备技能 
  •  HarmonOS多媒体技术

  • 鸿蒙NaPi组件进阶

  • HarmonOS高级技能

  • 初识HarmonOS内核 
  • 实战就业级设备开发

有了路线图,怎么能没有学习资料呢,小编也准备了一份联合鸿蒙官方发布笔记整理收纳的一套系统性的鸿蒙(OpenHarmony )学习手册(共计1236页)鸿蒙(OpenHarmony )开发入门教学视频,内容包含:ArkTS、ArkUI、Web开发、应用模型、资源分类…等知识点。

获取以上完整版高清学习路线,请点击→纯血版全套鸿蒙HarmonyOS学习资料

《鸿蒙 (OpenHarmony)开发入门教学视频》

《鸿蒙生态应用开发V2.0白皮书》

图片

《鸿蒙 (OpenHarmony)开发基础到实战手册》

OpenHarmony北向、南向开发环境搭建

图片

 《鸿蒙开发基础》

  • ArkTS语言
  • 安装DevEco Studio
  • 运用你的第一个ArkTS应用
  • ArkUI声明式UI开发
  • .……

图片

 《鸿蒙开发进阶》

  • Stage模型入门
  • 网络管理
  • 数据管理
  • 电话服务
  • 分布式应用开发
  • 通知与窗口管理
  • 多媒体技术
  • 安全技能
  • 任务管理
  • WebGL
  • 国际化开发
  • 应用测试
  • DFX面向未来设计
  • 鸿蒙系统移植和裁剪定制
  • ……

图片

《鸿蒙进阶实战》

  • ArkTS实践
  • UIAbility应用
  • 网络案例
  • ……

图片

 获取以上完整鸿蒙HarmonyOS学习资料,请点击→纯血版全套鸿蒙HarmonyOS学习资料

总结

总的来说,华为鸿蒙不再兼容安卓,对中年程序员来说是一个挑战,也是一个机会。只有积极应对变化,不断学习和提升自己,他们才能在这个变革的时代中立于不败之地。 

这篇关于鸿蒙Harmony应用开发—ArkTS-转场动画(页面间转场)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/830821

相关文章

Spring Boot + MyBatis Plus 高效开发实战从入门到进阶优化(推荐)

《SpringBoot+MyBatisPlus高效开发实战从入门到进阶优化(推荐)》本文将详细介绍SpringBoot+MyBatisPlus的完整开发流程,并深入剖析分页查询、批量操作、动... 目录Spring Boot + MyBATis Plus 高效开发实战:从入门到进阶优化1. MyBatis

Python基于wxPython和FFmpeg开发一个视频标签工具

《Python基于wxPython和FFmpeg开发一个视频标签工具》在当今数字媒体时代,视频内容的管理和标记变得越来越重要,无论是研究人员需要对实验视频进行时间点标记,还是个人用户希望对家庭视频进行... 目录引言1. 应用概述2. 技术栈分析2.1 核心库和模块2.2 wxpython作为GUI选择的优

Python中随机休眠技术原理与应用详解

《Python中随机休眠技术原理与应用详解》在编程中,让程序暂停执行特定时间是常见需求,当需要引入不确定性时,随机休眠就成为关键技巧,下面我们就来看看Python中随机休眠技术的具体实现与应用吧... 目录引言一、实现原理与基础方法1.1 核心函数解析1.2 基础实现模板1.3 整数版实现二、典型应用场景2

Python Dash框架在数据可视化仪表板中的应用与实践记录

《PythonDash框架在数据可视化仪表板中的应用与实践记录》Python的PlotlyDash库提供了一种简便且强大的方式来构建和展示互动式数据仪表板,本篇文章将深入探讨如何使用Dash设计一... 目录python Dash框架在数据可视化仪表板中的应用与实践1. 什么是Plotly Dash?1.1

利用Python开发Markdown表格结构转换为Excel工具

《利用Python开发Markdown表格结构转换为Excel工具》在数据管理和文档编写过程中,我们经常使用Markdown来记录表格数据,但它没有Excel使用方便,所以本文将使用Python编写一... 目录1.完整代码2. 项目概述3. 代码解析3.1 依赖库3.2 GUI 设计3.3 解析 Mark

Android Kotlin 高阶函数详解及其在协程中的应用小结

《AndroidKotlin高阶函数详解及其在协程中的应用小结》高阶函数是Kotlin中的一个重要特性,它能够将函数作为一等公民(First-ClassCitizen),使得代码更加简洁、灵活和可... 目录1. 引言2. 什么是高阶函数?3. 高阶函数的基础用法3.1 传递函数作为参数3.2 Lambda

利用Go语言开发文件操作工具轻松处理所有文件

《利用Go语言开发文件操作工具轻松处理所有文件》在后端开发中,文件操作是一个非常常见但又容易出错的场景,本文小编要向大家介绍一个强大的Go语言文件操作工具库,它能帮你轻松处理各种文件操作场景... 目录为什么需要这个工具?核心功能详解1. 文件/目录存javascript在性检查2. 批量创建目录3. 文件

Java中&和&&以及|和||的区别、应用场景和代码示例

《Java中&和&&以及|和||的区别、应用场景和代码示例》:本文主要介绍Java中的逻辑运算符&、&&、|和||的区别,包括它们在布尔和整数类型上的应用,文中通过代码介绍的非常详细,需要的朋友可... 目录前言1. & 和 &&代码示例2. | 和 ||代码示例3. 为什么要使用 & 和 | 而不是总是使

Python循环缓冲区的应用详解

《Python循环缓冲区的应用详解》循环缓冲区是一个线性缓冲区,逻辑上被视为一个循环的结构,本文主要为大家介绍了Python中循环缓冲区的相关应用,有兴趣的小伙伴可以了解一下... 目录什么是循环缓冲区循环缓冲区的结构python中的循环缓冲区实现运行循环缓冲区循环缓冲区的优势应用案例Python中的实现库

SpringBoot整合MybatisPlus的基本应用指南

《SpringBoot整合MybatisPlus的基本应用指南》MyBatis-Plus,简称MP,是一个MyBatis的增强工具,在MyBatis的基础上只做增强不做改变,下面小编就来和大家介绍一下... 目录一、MyBATisPlus简介二、SpringBoot整合MybatisPlus1、创建数据库和