页面间动画之放大缩小视图

        

目录

1、Exchange类型的共享元素转场

2、Static类型的共享元素转场

3、场景示例


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

        共享元素转场的接口为:

sharedTransition(id: string, options?: sharedTransitionOptions)

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

1、Exchange类型的共享元素转场

        交换型的共享元素转场,需要两个页面中,存在通过sharedTransition函数配置为相同id的组件,它们称为共享元素。这种类型的共享元素转场适用于两个页面间相同元素的衔接,会从起始页共享元素的位置、大小过渡到目标页的共享元素的位置、大小。如果不指定type,默认为Exchange类型的共享元素转场,这也是最常见的共享元素转场的方式。使用Exchange类型的共享元素转场时,共享元素转场的动画参数由目标页options中的动画参数决定。

2、Static类型的共享元素转场

        静态型的共享元素转场通常用于页面跳转时,标题逐渐出现或隐藏的场景,只需要在一个页面中有Static的共享元素,不能在两个页面中出现相同id的Static类型的共享元素。在跳转到该页面(即目标页)时,配置Static类型sharedTransition的组件做透明度从0到该组件设定的透明度的动画,位置保持不变。在该页面(即起始页)消失时,做透明度逐渐变为0的动画,位置保持不变。

        共享元素转场的动画参数由该组件sharedTransition属性中的动画参数决定。

3、场景示例

        下面介绍使用共享元素转场进行放大缩小图片的示例。

下面是起始页代码:

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

下面如目标页代码:

// dest page
import router from '@ohos.router';
@Entry
@Component
struct SharedTransitionDest {build() {Column() {// 配置Static类型的共享元素转场Text("SharedTransition dest page").fontSize(16).sharedTransition('text', { duration: 500, curve: Curve.Linear, type: SharedTransitionEffectType.Static }).margin({ top: 10 })// 配置Exchange类型的共享元素转场,共享元素id为"sharedImage1"Image($r('app.media.girl10')).width(150).height(150).sharedTransition('sharedImage1', { duration: 500, curve: Curve.Linear }).onClick(() => {// 点击图片时路由返回至上一页面router.back();})}.width("100%").alignItems(HorizontalAlign.Center)}
}

        运行效果如下:

        上述示例中,第一个页面(src page)和第二个页面(dest page)都配置了id为"sharedImage1"的共享元素转场,使两个页面能匹配到这一组共享元素。从第一个页面跳转到第二个页面时,第一个页面为起始页,第二个页面为目标页。配置id为"sharedImage1"的组件按照目标页中500ms的时长进行共享元素转场,达到放大视图的效果,id为"text"的组件按照配置的Static类型sharedTransition参数中的500ms的时长进行共享元素转场,标题逐渐出现。从第二个页面返回到第一个页面时,第二个页面为起始页,第一个页面为目标页。配置id为"sharedImage1"的组件按照目标页中1000ms的时长进行共享元素转场,缩小为原始视图,id为"text"的组件按照配置的Static类型sharedTransition参数中的500ms的时长进行共享元素转场,标题逐渐隐藏。

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

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

相关文章

C语言——操作符

一、算数操作符 1、(加操作符) 用于将两个数相加,例:3 3结果为6 2、-(减操作符) 用于将两个数相减,例:3 - 3结果为0 3、*(乘操作符) 用于将两个数相乘,例:3 * 3结果为9 4、/(除操作符) 用于将两个…

Cesium在2d模式下Billboard位置显示不正确的解决方法

Billboard在Cesium 3d模式下位置显示正确,但在2d模式下位置显示不正确,刷新不及时。 解决办法: 不要设置height和heightReferencen,因为2d模式没有高程。

计算机毕业设计 SpringBoot的乡村养老服务管理系统 Javaweb项目 Java实战项目 前后端分离 文档报告 代码讲解 安装调试

🍊作者:计算机编程-吉哥 🍊简介:专业从事JavaWeb程序开发,微信小程序开发,定制化项目、 源码、代码讲解、文档撰写、ppt制作。做自己喜欢的事,生活就是快乐的。 🍊心愿:点…

南昌找工作用什么APP或者招聘网站

南昌找工作用吉鹿力招聘网 通过吉鹿力招聘网,可以随时查看最新职位,跟踪简历投递动态,与正在进行招聘的CEO、部门负责人、HR在线沟通,查看其他候选人面试该职位后对面试官、公司环境的面试评价等,为求职者提供参考。 …

【PostgreSQL】约束-检查约束

【PostgreSQL】约束链接 检查 唯一 主键 外键 排他 检查约束 在计算机科学和软件工程中,约束检查是指在程序运行时对变量或数据进行检查,确保其满足一定的规则或条件。这些规则或条件可以是预定义的,也可以是通过编程语言的约束机制定义的…

HCIA-Datacom题库(自己整理)——ACL多选

1.基于ACL规则,ACL可以划分为以下哪些类? 基本ACL 二层ACL 用户ACL 高级ACL 2.ACL分类有哪些? 基本ACL 高级ACL 二层ACL 用户自定义ACL 3.路由器A的G0/0/1接口配置信息如图,下列说法正确的有? 本接口不会转发收到的FTP报文 本接口可以和其它路由器建立OSPF的邻居…

MyBatis之关联查询

系列文章目录 提示:这里可以添加系列文章的所有文章的目录,目录需要自己手动添加 MyBatis之关联查询 提示:写完文章后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 系列文章目录前言一、一对一关联查询二…

javafx

JavaFX JavaFX简介 JavaFX是一个用于创建富客户端应用程序的图形用户界面(GUI)框架。它是Java平台的一部分,从Java 8开始成为Java的标准库。 JavaFX提供了丰富的图形和多媒体功能,使开发人员能够创建具有吸引力和交互性的应用程…

simulink代码生成(九)—— 串口显示数据(纸飞机联合调试)

纸飞机里面的协议是固定的,必须按照协议配置; (1)使用EasyHEX协议,测试int16数据类型 测试串口发出的数据是否符合? 串口接收数据为: 打开纸飞机绘图侧: (1&#xff09…

机器学习(三) -- 特征工程(2)

系列文章目录 机器学习(一) -- 概述 机器学习(二) -- 数据预处理(1-3) 机器学习(三) -- 特征工程(1-2) 未完待续…… 目录 系列文章目录 前言 三、特征…

精准掌控 Git 忽略规则:定制化 .gitignore 指南

🧙‍♂️ 诸位好,吾乃诸葛妙计,编程界之翘楚,代码之大师。算法如流水,逻辑如棋局。 📜 吾之笔记,内含诸般技术之秘诀。吾欲以此笔记,传授编程之道,助汝解技术难题。 &…

前端中级算法题

前端中级算法题 反转字符串 编写一个函数,接受一个字符串作为输入,并返回反转后的字符串。 示例: function reverseString(str) {return str.split().reverse().join(); }reverseString(hello); // 输出: olleh 找出数组中的最大值 编写一个函…

统信UOS操作系统上扩容数据盘

原文链接:统信UOS操作系统上扩容数据盘 hello,大家好啊!今天我要给大家介绍的是在统信UOS操作系统上扩容数据盘的方法。在使用UOS的过程中,随着数据的不断增加,原有磁盘空间可能会变得不足,这时候就需要对数…

【2024年必看】私域裂变的10大秘籍,让你轻松玩转市场!

在私域时代,企业需要不断地寻找新的用户来扩大自己的用户群体。然而,随着获客成本的逐渐升高,传统的广告宣传和推广方式已经不再是最优选择。因此,“老带新”的裂变策略成为了企业拉新的首选。 通过给予老用户奖励,刺…

汽车标定技术(十四)--标定数据固化方法简介

目录 1.标定数据固化方法 1.1 基于XCP固化 1.2 基于UDS固化 2. 具体实现形式 2.1 CAN

到底是1K=1024还是1K=1000呢?

问题 举例:15GB的数据块的大小是15*2的30次方*8bit;而10Gbit/s的传输速率是10*10的9次方bit/s 那么问题来了:这个G到底是2的30次方还是10的9次方呢??? 理解 由于在计算机内部采用的是二进制&#xff…

分类预测 | Matlab实现DBO-SVM蜣螂算法优化支持向量机多特征分类预测

分类预测 | Matlab实现DBO-SVM蜣螂算法优化支持向量机多特征分类预测 目录 分类预测 | Matlab实现DBO-SVM蜣螂算法优化支持向量机多特征分类预测分类效果基本描述程序设计参考资料 分类效果 基本描述 1.Matlab实现DBO-SVM蜣螂算法优化支持向量机多特征分类预测(完整…

第十三章 创建Callout Library - 兼容的语言和编译器

文章目录 第十三章 创建Callout Library - 兼容的语言和编译器兼容的语言和编译器标注库 Runup 和 Rundown 函数 第十三章 创建Callout Library - 兼容的语言和编译器 兼容的语言和编译器 使用 $ZF Callout Interface,可以用外部语言编写函数并从 ObjectScript 调…

html引入react以及hook的使用

html引入react 效果代码注意 效果 分享react demo片段的时候&#xff0c;如果是整个工程项目就有点太麻烦了&#xff0c;打开速度慢&#xff0c;文件多且没必要&#xff0c;这个时候用html就很方便。 在html中能正常使用useState 和 useEffect 等hook。 代码 <!DOCTYPE htm…

2024三掌柜赠书活动第一期:TVM编译器原理与实践

目录 前言TVM编译器的实现过程关于《TVM编译器原理与实践》编辑推荐内容简介作者简介图书目录书中前言/序言《TVM编译器原理与实践》全书速览结束语 前言 随着人工智能的发展&#xff0c;计算机视觉、自然语言处理和语音识别等领域的需求不断增加。为了更好地满足这些需求&am…