鸿蒙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

相关文章

Java中的Lambda表达式及其应用小结

《Java中的Lambda表达式及其应用小结》Java中的Lambda表达式是一项极具创新性的特性,它使得Java代码更加简洁和高效,尤其是在集合操作和并行处理方面,:本文主要介绍Java中的La... 目录前言1. 什么是Lambda表达式?2. Lambda表达式的基本语法例子1:最简单的Lambda表

Python结合PyWebView库打造跨平台桌面应用

《Python结合PyWebView库打造跨平台桌面应用》随着Web技术的发展,将HTML/CSS/JavaScript与Python结合构建桌面应用成为可能,本文将系统讲解如何使用PyWebView... 目录一、技术原理与优势分析1.1 架构原理1.2 核心优势二、开发环境搭建2.1 安装依赖2.2 验

Java字符串操作技巧之语法、示例与应用场景分析

《Java字符串操作技巧之语法、示例与应用场景分析》在Java算法题和日常开发中,字符串处理是必备的核心技能,本文全面梳理Java中字符串的常用操作语法,结合代码示例、应用场景和避坑指南,可快速掌握字... 目录引言1. 基础操作1.1 创建字符串1.2 获取长度1.3 访问字符2. 字符串处理2.1 子字

使用Python开发一个带EPUB转换功能的Markdown编辑器

《使用Python开发一个带EPUB转换功能的Markdown编辑器》Markdown因其简单易用和强大的格式支持,成为了写作者、开发者及内容创作者的首选格式,本文将通过Python开发一个Markd... 目录应用概览代码结构与核心组件1. 初始化与布局 (__init__)2. 工具栏 (setup_t

SpringShell命令行之交互式Shell应用开发方式

《SpringShell命令行之交互式Shell应用开发方式》本文将深入探讨SpringShell的核心特性、实现方式及应用场景,帮助开发者掌握这一强大工具,具有很好的参考价值,希望对大家有所帮助,如... 目录引言一、Spring Shell概述二、创建命令类三、命令参数处理四、命令分组与帮助系统五、自定

SpringBoot应用中出现的Full GC问题的场景与解决

《SpringBoot应用中出现的FullGC问题的场景与解决》这篇文章主要为大家详细介绍了SpringBoot应用中出现的FullGC问题的场景与解决方法,文中的示例代码讲解详细,感兴趣的小伙伴可... 目录Full GC的原理与触发条件原理触发条件对Spring Boot应用的影响示例代码优化建议结论F

MySQL 分区与分库分表策略应用小结

《MySQL分区与分库分表策略应用小结》在大数据量、复杂查询和高并发的应用场景下,单一数据库往往难以满足性能和扩展性的要求,本文将详细介绍这两种策略的基本概念、实现方法及优缺点,并通过实际案例展示如... 目录mysql 分区与分库分表策略1. 数据库水平拆分的背景2. MySQL 分区策略2.1 分区概念

Spring Shell 命令行实现交互式Shell应用开发

《SpringShell命令行实现交互式Shell应用开发》本文主要介绍了SpringShell命令行实现交互式Shell应用开发,能够帮助开发者快速构建功能丰富的命令行应用程序,具有一定的参考价... 目录引言一、Spring Shell概述二、创建命令类三、命令参数处理四、命令分组与帮助系统五、自定义S

鸿蒙中Axios数据请求的封装和配置方法

《鸿蒙中Axios数据请求的封装和配置方法》:本文主要介绍鸿蒙中Axios数据请求的封装和配置方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧... 目录1.配置权限 应用级权限和系统级权限2.配置网络请求的代码3.下载在Entry中 下载AxIOS4.封装Htt

鸿蒙中@State的原理使用详解(HarmonyOS 5)

《鸿蒙中@State的原理使用详解(HarmonyOS5)》@State是HarmonyOSArkTS框架中用于管理组件状态的核心装饰器,其核心作用是实现数据驱动UI的响应式编程模式,本文给大家介绍... 目录一、@State在鸿蒙中是做什么的?二、@Spythontate的基本原理1. 依赖关系的收集2.