鸿蒙开发-UI-动画-页面间动画

鸿蒙开发-UI-组件导航-Navigation

鸿蒙开发-UI-组件导航-Tabs

鸿蒙开发-UI-图形-图片

鸿蒙开发-UI-图形-绘制几何图形

鸿蒙开发-UI-图形-绘制自定义图形

鸿蒙开发-UI-图形-页面内动画

鸿蒙开发-UI-图形-组件内转场动画

鸿蒙开发-UI-图形-弹簧曲线动画

文章目录

前言

一、放大缩小视图

1.Exchange类型

2.Static类型

3.示例

二、页面内转场动画

1. type配置为RouteType.None

2. type配置为RouteType.Push或RouteType.Pop

3. 禁用某页面的页面转场

4. 代码示例

总结


前言

上文详细学习了鸿蒙开发UI弹簧曲线动画,了解弹簧曲线的概念,学习了弹簧曲线两种实现方式以及使用场景,本文将学习页面间动画。

一、放大缩小视图

不同页面间,使用相同的元素的场景,可以使用共享元素转场动画衔接。突出不同页面间相同元素关联性,可以为它们添加共享元素转场动画,如果相同元素在不同页面间大小有明显差异,可达到放大缩小视图的效果。

接口

sharedTransition(id: string, options?: sharedTransitionOptions)

根据sharedTransitionOptions中的type参数,共享元素转场分为Exchange类型的共享元素转场和Static类型的共享元素转场。

1.Exchange类型

2.Static类型

3.示例

起始页

import router from '@ohos.router';@Entry
@Component
struct SharedTransitionSrc {build() {Column() {
//step1:配置Exchange类型的共享元素转场,共享元素id为"sharedImage1"Image($r('app.media.mountain')).width(50).height(50).sharedTransition('sharedImage1', { duration: 1000, curve: Curve.Linear }).onClick(() => {
//step2:页面路由实现页面跳转,点击小图时路由跳转至下一页面router.pushUrl({ url: 'pages/myTest/sharedTransitionDst' });})}.padding(10).width("100%").alignItems(HorizontalAlign.Start)}
}

 目标页

import router from '@ohos.router';
@Entry
@Component
struct SharedTransitionDest {build() {Column() {
//step1:配置Static类型的共享元素转场,必须通过type属性显示指定 type: SharedTransitionEffectType.StaticText("SharedTransition dest page").fontSize(16).sharedTransition('text', { duration: 500, curve: Curve.Linear, type: SharedTransitionEffectType.Static }).margin({ top: 10 })//step2:配置Exchange类型的共享元素转场,共享元素id为"sharedImage1",与起始页指定id保持一致Image($r('app.media.mountain')).width(150).height(150).sharedTransition('sharedImage1', { duration: 500, curve: Curve.Linear }).onClick(() => {
//step3:点击图片时路由返回至上一页面,当前页Text组件文本显示效果逐渐消失router.back();})}.width("100%").alignItems(HorizontalAlign.Center)}
}

二、页面内转场动画

两个页面间发生跳转,一个页面消失,另一个页面出现,可以配置各自页面的页面转场参数实现自定义的页面转场效果。

1. type配置为RouteType.None

//step1:定义第一个页面A的pageTransition函数,并定义页面进入退出效果
pageTransition() {// 定义页面进入时的效果,从左侧滑入,时长为1200ms,无论页面栈发生push还是pop操作均可生效PageTransitionEnter({ type: RouteType.None, duration: 1200 }).slide(SlideEffect.Left)// 定义页面退出时的效果,向左侧滑出,时长为1000ms,无论页面栈发生push还是pop操作均可生效PageTransitionExit({ type: RouteType.None, duration: 1000 }).slide(SlideEffect.Left)
}//step2:定义第一个页面B的pageTransition函数,并定义页面进入退出效果
pageTransition() {// 定义页面进入时的效果,从右侧滑入,时长为1000ms,无论页面栈发生push还是pop操作均可生效PageTransitionEnter({ type: RouteType.None, duration: 1000 }).slide(SlideEffect.Right)// 定义页面退出时的效果,向右侧滑出,时长为1200ms,无论页面栈发生push还是pop操作均可生效PageTransitionExit({ type: RouteType.None, duration: 1200 }).slide(SlideEffect.Right)
}

假设页面栈为标准实例模式,即页面栈中允许存在重复的页面。可能会有4种场景,对应的页面转场效果如下表

路由操作

页面A转场效果

页面B转场效果

router.pushUrl,从页面A跳转到新增的页面B

页面退出,PageTransitionExit生效,向左侧滑出屏幕

页面进入,PageTransitionEnter生效,从右侧滑入屏幕

router.back,从页面B返回到页面A

页面进入,PageTransitionEnter生效,从左侧滑入屏幕

页面退出,PageTransitionExit生效,向右侧滑出屏幕

router.pushUrl,从页面B跳转到新增的页面A

页面进入,PageTransitionEnter生效,从左侧滑入屏幕

页面退出,PageTransitionExit生效,向右侧滑出屏幕

router.back,从页面A返回到页面B

页面退出,PageTransitionExit生效,向左侧滑出屏幕

页面进入,PageTransitionEnter生效,从右侧滑入屏幕

2. type配置为RouteType.Push或RouteType.Pop

//step1:定义页面A的pageTransition函数,并指定页面A两种进入(1.push 2.pop)两种退出(1.push 2.pop)方式下的动画效果
pageTransition() {// 定义页面进入时的效果,从右侧滑入,时长为1200ms,页面栈发生push操作时该效果才生效PageTransitionEnter({ type: RouteType.Push, duration: 1200 }).slide(SlideEffect.Right)// 定义页面进入时的效果,从左侧滑入,时长为1200ms,页面栈发生pop操作时该效果才生效PageTransitionEnter({ type: RouteType.Pop, duration: 1200 }).slide(SlideEffect.Left)// 定义页面退出时的效果,向左侧滑出,时长为1000ms,页面栈发生push操作时该效果才生效PageTransitionExit({ type: RouteType.Push, duration: 1000 }).slide(SlideEffect.Left)// 定义页面退出时的效果,向右侧滑出,时长为1000ms,页面栈发生pop操作时该效果才生效PageTransitionExit({ type: RouteType.Pop, duration: 1000 }).slide(SlideEffect.Right)
}//step2:定义页面B的pageTransition函数,并指定页面B两种进入(1.push 2.pop)两种退出(1.push 2.pop)方式下的动画效果
pageTransition() {// 定义页面进入时的效果,从右侧滑入,时长为1000ms,页面栈发生push操作时该效果才生效PageTransitionEnter({ type: RouteType.Push, duration: 1000 }).slide(SlideEffect.Right)// 定义页面进入时的效果,从左侧滑入,时长为1000ms,页面栈发生pop操作时该效果才生效PageTransitionEnter({ type: RouteType.Pop, duration: 1000 }).slide(SlideEffect.Left)// 定义页面退出时的效果,向左侧滑出,时长为1200ms,页面栈发生push操作时该效果才生效PageTransitionExit({ type: RouteType.Push, duration: 1200 }).slide(SlideEffect.Left)// 定义页面退出时的效果,向右侧滑出,时长为1200ms,页面栈发生pop操作时该效果才生效PageTransitionExit({ type: RouteType.Pop, duration: 1200 }).slide(SlideEffect.Right)
}

以上代码则完整的定义了所有可能的页面转场样式。假设页面栈为标准实例模式,即页面栈中允许存在重复的页面。可能会有4种场景,对应的页面转场效果如下表

路由操作

页面A转场效果

页面B转场效果

router.pushUrl,从页面A跳转到新增的页面B

页面退出,PageTransitionExit且type为RouteType.Push的转场样式生效,向左侧滑出屏幕

页面进入,PageTransitionEnter且type为RouteType.Push的转场样式生效,从右侧滑入屏幕

router.back,从页面B返回到页面A

页面进入,PageTransitionEnter且type为RouteType.Pop的转场样式生效,从左侧滑入屏幕

页面退出,PageTransitionExit且type为RouteType.Pop的转场样式生效,向右侧滑出屏幕

router.pushUrl,从页面B跳转到新增的页面A

页面进入,PageTransitionEnter且type为RouteType.Push的转场样式生效,从右侧滑入屏幕

页面退出,PageTransitionExit且type为RouteType.Push的转场样式生效,向左侧滑出屏幕

router.back,从页面A返回到页面B

页面退出,PageTransitionExit且type为RouteType.Pop的转场样式生效,向右侧滑出屏幕

页面进入,PageTransitionEnter且type为RouteType.Pop的转场样式生效,从左侧滑入屏幕

3. 禁用某页面的页面转场

//step1:通过定义duration属性为0实现禁用
pageTransition() {PageTransitionEnter({ type: RouteType.None, duration: 0 })PageTransitionExit({ type: RouteType.None, duration: 0 })
}

4. 代码示例

页面A

//step1:定义页面A 
import router from '@ohos.router';
@Entry
@Component
struct PageTransitionSrc1 {build() {Column() {Image($r('app.media.mountain')).width('90%').height('80%').objectFit(ImageFit.Fill).syncLoad(true) // 同步加载图片,使页面出现时图片已经加载完成.margin(30)Row({ space: 10 }) {Button("pushUrl").onClick(() => {// 路由到下一个页面,push操作router.pushUrl({ url: 'pages/myTest/pageTransitionDst1' });})Button("back").onClick(() => {// 返回到上一页面,相当于pop操作router.back();})}.justifyContent(FlexAlign.Center)}.width("100%").height("100%").alignItems(HorizontalAlign.Center)}
//step2:定义页面A的进入退出效果 pageTransition() {// 定义页面进入时的效果,从右侧滑入,时长为1000ms,页面栈发生push操作时该效果才生效PageTransitionEnter({ type: RouteType.Push, duration: 1000 }).slide(SlideEffect.Right)// 定义页面进入时的效果,从左侧滑入,时长为1000ms,页面栈发生pop操作时该效果才生效PageTransitionEnter({ type: RouteType.Pop, duration: 1000 }).slide(SlideEffect.Left)// 定义页面退出时的效果,向左侧滑出,时长为1000ms,页面栈发生push操作时该效果才生效PageTransitionExit({ type: RouteType.Push, duration: 1000 }).slide(SlideEffect.Left)// 定义页面退出时的效果,向右侧滑出,时长为1000ms,页面栈发生pop操作时该效果才生效PageTransitionExit({ type: RouteType.Pop, duration: 1000 }).slide(SlideEffect.Right)}
}

页面B

//step1:定义页面B
import router from '@ohos.router';
@Entry
@Component
struct PageTransitionDst1 {build() {Column() {Image($r('app.media.forest')).width('90%').height('80%').objectFit(ImageFit.Fill).syncLoad(true) // 同步加载图片,使页面出现时图片已经加载完成.margin(30)Row({ space: 10 }) {Button("pushUrl").onClick(() => {// 路由到下一页面,push操作router.pushUrl({ url: 'pages/myTest/pageTransitionSrc1' });})Button("back").onClick(() => {// 返回到上一页面,相当于pop操作router.back();})}.justifyContent(FlexAlign.Center)}.width("100%").height("100%").alignItems(HorizontalAlign.Center)}
//step2:定义页面B的进入退出效果pageTransition() {// 定义页面进入时的效果,从右侧滑入,时长为1000ms,页面栈发生push操作时该效果才生效PageTransitionEnter({ type: RouteType.Push, duration: 1000 }).slide(SlideEffect.Right)// 定义页面进入时的效果,从左侧滑入,时长为1000ms,页面栈发生pop操作时该效果才生效PageTransitionEnter({ type: RouteType.Pop, duration: 1000 }).slide(SlideEffect.Left)// 定义页面退出时的效果,向左侧滑出,时长为1000ms,页面栈发生push操作时该效果才生效PageTransitionExit({ type: RouteType.Push, duration: 1000 }).slide(SlideEffect.Left)// 定义页面退出时的效果,向右侧滑出,时长为1000ms,页面栈发生pop操作时该效果才生效PageTransitionExit({ type: RouteType.Pop, duration: 1000 }).slide(SlideEffect.Right)}
}

总结

本文详细学习了鸿蒙开发UI页面见的动画,了解了页面间动画的两种形式,一种用于页面间有相同元素场景,另一种是应用于页面转场时,随着一个页面出现另一个页面消失产生转场效果的场景。同时详细学习了页面进入时的和退出时分别对应的两种RouteType的类型的设置方式很效果,下文将学习鸿蒙开发UI交互事件相关知识。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/763227.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【TD3思路及代码】【自用笔记】

1 组成(Target Network Delayed Training) Actor网络:这个网络负责根据当前的状态输出动作值。在训练过程中,Actor网络会不断地学习和优化,以输出更合适的动作。Critic网络:TD3中有两个Critic网络&#xff…

自然拼读-26个字母发音

自然拼读-26个字母发音 26个字母 Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz 元音和辅音 辅音 元音 单词 元音 Aa Ee Li Oo Uu 另外:Yy是半元音 辅音 Bb Cc Dd Ff Gg Hh Jj Kk Ll Mm Nn Pp Qq Rr Ss Tt Vv Ww X…

利用二分法求方程在某个范围内的根

问题描述: 利用二分法求方程在(-10,10)的根。 方法:先求出两端点的中点,然后将中点带入方程中检查是否等于0,如果等于0说明找到了根,如果大于0,说明根在左半部分,将rig…

Linux-网络层IP协议、链路层以太网协议解析

目录 网络层:IP协议地址管理路由选择 链路层 网络层: 网络层:负责地址管理与路由选择 — IP协议,地址管理,路由选择 IP协议 数据格式: 4位协议版本:4-ipv4协议版本 4位首部长度:以…

2024计算机二级Python 11和12

单向列表不能再回头,只有从头指针开始才可以,双向列表会出现重复访问,二叉树节点从根开始可以达到目的 面向对象的主要特征:抽象、封装、继承、多态 Python通过解释方式执行,执行速度没有采用编译方式的语言执行的快 f…

混合像元分解:Matlab如何帮助揭示地表组成?

光谱和图像是人们观察世界的两种方式,高光谱遥感通过“图谱合一”的技术创新将两者结合起来,大大提高了人们对客观世界的认知能力,本来在宽波段遥感中不可探测的物质,在高光谱遥感中能被探测。以高光谱遥感为核心,构建…

c++21,22多肽

普通人买全价,学生半价 多肽 构成条件 1.虚函数重写 2.父类的指针或者引用去调用虚函数 两个virtual没有关联 函数前面增加virtual虚函数,p是父类的引用,既可以传父类对象也可以传子类对象 去掉引用(子类传给父类&#xff…

云手机为电商提供五大出海优势

出海电商行业中,各大电商平台的账号安全是每一个电商运营者的重中之重,账号安全是第一生产力,也是店铺运营的基础。因此多平台多账号的防关联管理工具成了所有电商大卖家的必备工具。云手机最核心的优势就是账户安全体系,本文将对…

linux系统----------MySQL索引浅探索

目录 一、数据库索引介绍 二、索引的作用 索引的副作用 (缺点) 三、创建索引的原则依据 四、索引的分类和创建 4.1普通索引 4.1.1直接创建索引 4.1.2修改表方式创建 4.1.3创建表的时候指定索引 4.2唯一索引 4.2.1直接创建唯一索引 4.2.2修改表方式创建 4.2.3创建表…

Go语言hash库完全教程:从基础到高级应用

Go语言hash库完全教程:从基础到高级应用 简介hash库概览hash接口常用的哈希函数实现应用场景性能特点字符串哈希计算 使用hash库进行数据哈希文件哈希计算 hash库在数据校验中的应用使用SHA256进行文件完整性验证 hash库在安全加密中的应用生成安全的密码哈希使用HM…

cmd窗口运行jar程序,点击一下cmd窗口后java程序就暂停了

cmd窗口运行jar程序时,在cmd窗口点击了一下,如果你选中了(页面会有个白色的选中内容),java程序就会暂停,这是只有按一下鼠标右键或着CtrlC才能取消选中,程序才会继续运行,如果java程…

视频素材库哪家好?我给大家来分享

视频素材库哪家好?这是很多短视频创作者都会遇到的问题。别着急,今天我就来给大家介绍几个视频素材库哪家好的推荐,让你的视频创作更加轻松有趣! 视频素材库哪家好的首选当然是蛙学网啦!这里有大量的高质量视频素材&am…

学成在线_视频处理_视频转码不成功

问题 当我们用xxljob进行视频处理中的转码操作时会发现视频转码不成功。即程序会进入下图所示的if语句内。 问题原因 在进行视频转码时程序会调用Mp4VideoUtil类下的 generateMp4方法,而result接收的正是该方法的返回值。那么什么时候generateMp4方法的返回值会…

基于转录组计算的肿瘤纯度与病理肿瘤纯度一致性差异

实体瘤组织由肿瘤和非肿瘤细胞组成,如基质细胞和免疫细胞。这些非肿瘤细胞构成肿瘤微环境(TME)的重要组成部分,可降低肿瘤纯度,并在癌变、恶性肿瘤进展、治疗耐药性和预后评估中发挥重要作用。 肿瘤间质比的预后影响 …

【数据结构】直接插入排序

大家好,我是苏貝,本篇博客带大家了解插入排序,如果你觉得我写的还不错的话,可以给我一个赞👍吗,感谢❤️ 目录 一. 基本思想二. 插入排序详解(以升序为例)三. 对比冒泡排序 一. 基本…

Mysql数据库的SQL语言详解

目录 一、数据库的基础操作 1、数据库的基本查看和切换 1.1 查看数据库信息 1.2 切换数据库 1.3 查看数据库中的表信息 1.4 查看数据库或数据库中表的结构(字段) 1.5 数据类型 1.5.1 整数型 1.5.2 浮点型(float和double) 1.5.3 定点数 1.5.4…

134. 加油站(力扣LeetCode)

文章目录 134. 加油站暴力枚举(超时)代码一代码二(优化) 贪心算法方法一方法二 134. 加油站 在一条环路上有 n 个加油站,其中第 i 个加油站有汽油 gas[i] 升。 你有一辆油箱容量无限的的汽车,从第 i 个加…

ng发布静态资源 发布项目 发布数据

描述:把一个项目或者数据发布出来,通过http的形式访问,比如发布一个js文件,用http://localhost:6060/data/jquery/jquery.min.js访问。 步骤:配置nginx.conf文件,nginx.conf位于conf目录下,在se…

ROS机器人虚拟仿真挑战赛本地电脑环境配置测试

预备基础 此案例需要完成: ROS机器人虚拟仿真挑战赛本地电脑环境配置记录-CSDN博客 ROS机器人虚拟仿真挑战赛本地电脑环境配置个人问题汇总-CSDN博客 命令测试 在不同的终端窗口分别输入: 标签1: roslaunch tianracer_gazebo demo_tian…

分享|大数据信用风险测评多久做一次比较好?

大数据信用风险测评多久做一次比较好?对于个人大数据信用风险测评,一般来说,多久做一次并没有固定的时间间隔。这取决于许多因素,包括个人信用状况、数据更新频率、个人需求等等。 首先,个人的信用状况是决定测评频率的一个重要因…