HarmonyOS NEXT应用开发之多模态页面转场动效实现案例

介绍

本示例介绍多模态页面转场动效实现:通过半模态转场实现半模态登录界面, 与全屏模态和组件转场结合实现多模态组合登录场景,其中手机验证码登录与账号密码登录都为组件, 通过TransitionEffect.move()实现组件间转场达到近似页面转场的效果。

效果图预览

img

使用说明

登录方式有两种,验证码登录和账号密码登录

  1. 点击主页"点击跳转半模态登录页"按钮
  2. 在半模态窗口中选中同意协议键,并点击获取验证码按钮,跳转至手机验证码登录页面。
  3. 通过点击手机验证码登录页面中的"账号密码登录",向右切换跳转至账号密码登录页面。
  4. 通过点击账号密码登录页面中的"手机验证码登录",向左切换跳转至手机验证码登录页面。

实现思路

场景:半模态转场至验证码登录,验证码登录和账户登录可以相互切换

登录方式有两种,验证码登录和账户,需要在一个全屏模态窗口CaptureLogin中切换,使用if进行条件渲染。

1、通过bindSheet属性为主页的button绑定半模态页面

Button($r('app.string.half_screen_modal_login_description')).bindSheet($$this.isPresent, this.halfModalLogin(), { // 按钮绑定半模态转场height: this.sheetHeight, // 半模态高度dragBar: this.showDragBar, // 是否显示控制条backgroundColor: "#FEFEFE",showClose:true, // 是否显示关闭图标shouldDismiss:((sheetDismiss: SheetDismiss)=> { // 半模态页面交互式关闭回调函数console.log("bind sheet shouldDismiss")sheetDismiss.dismiss()})})

2、在半模态页面中的验证码登录按钮绑定全屏模态转场,并将对应的全屏模态转场特效置空。

@Builder
halfModalLogin() { // 半模态窗口页面Button("验证码登录").bindContentCover(this.isPresentInLoginView,this.defaultLogin(),{ modalTransition: ModalTransition.NONE}) // 全屏模态转场.onClick(() => {if (this.isConfirmed) { // 判断是否同意协议// 半模态页面中跳转全屏模态登录页this.isPresentInLoginView = true;}})
}

3、通过点击第二步中的按钮跳转到全屏模态组件(CaptureLogin),并通过isDefaultLogin控制两种登录组件的条件渲染:true(手机验证码登录),false(二维码登录),同时通过TransitionEffect.move()实现组件间转场, 从而实现组件转场类似页面转场的效果。

build() {Stack({ alignContent: Alignment.TopStart }) {if (this.isDefaultLogin) {CaptchaLogin() // 手机验证码登录.transition(TransitionEffect.move(TransitionEdge.START).animation({ duration: EffectDuration, curve: Curve.Linear })) // 从左边推出} else {AccountLogin() // 账号密码登录.transition(TransitionEffect.move(TransitionEdge.END).animation({ duration: EffectDuration, curve: Curve.Linear })) // 从右边推出}}
}

高性能知识点

容器限制条件渲染组件的刷新范围

工程结构&模块类型

multimodaltransition                            // har类型
|---src/main/ets/view
|   |---HalfModalWindow.ets                     // 视图层-主页
|---src/main/ets/model
|   |---AccountLogin.ets                        // 模型层-账号密码登录页 
|   |---CaptchaLogin.ets                        // 模型层-验证码登录页(全屏模态窗口) 

模块依赖

har包-common库中UX标准
@ohos/routermodule(动态路由)

参考资料

半模态转场
全屏模态

最后分享一份鸿蒙(HarmonyOS)开发学习指南需要的可以扫码免费领取!!!

《鸿蒙(HarmonyOS)开发学习指南》

第一章 快速入门

1、开发准备

2、构建第一个ArkTS应用(Stage模型)

3、构建第一个ArkTS应用(FA模型)

4、构建第一个JS应用(FA模型)

5、…

图片

第二章 开发基础知识

1、应用程序包基础知识

2、应用配置文件(Stage模型)

3、应用配置文件概述(FA模型)

4、…

图片

第三章 资源分类与访问

1、 资源分类与访问

2、 创建资源目录和资源文件

3、 资源访问

4、…

图片

第四章 学习ArkTs语言

1、初识ArkTS语言

2、基本语法

3、状态管理

4、其他状态管理

5、渲染控制

6、…

图片

第五章 UI开发

1.方舟开发框架(ArkUI)概述

2.基于ArkTS声明式开发范式

3.兼容JS的类Web开发范式

4…

图片

第六章 Web开发

1.Web组件概述

2.使用Web组件加载页面

3.设置基本属性和事件

4.在应用中使用前端页面JavaScript

5.ArkTS语言基础类库概述

6.并发

7…

图片

11.网络与连接

12.电话服务

13.数据管理

14.文件管理

15.后台任务管理

16.设备管理

17…

图片

第七章 应用模型

1.应用模型概述

2.Stage模型开发指导

3.FA模型开发指导

4…

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

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

相关文章

在Python中获取当前线程的名字

多线程编程是一种常见的编程范式,它允许程序同时执行多个任务。在Python中,​​threading​​模块提供了对多线程编程的支持。了解和管理当前运行的线程是多线程编程中的一个重要方面。本技术博客将介绍如何在Python中获取当前线程的名字,并提…

Linux入门攻坚——22、通信安全基础知识及openssl、CA证书

Linux系统常用的加解密工具:OpenSSL,gpg(是pgp的实现) 加密算法和协议: 对称加密:加解密使用同一个秘钥; DES:Data Encryption Standard,数据加密标准&…

meshlab: pymeshlab保存物体的横截面(compute planar section)

一、关于环境 请参考:pymeshlab遍历文件夹中模型、缩放并导出指定格式-CSDN博客 二、关于代码 本文所给出代码仅为参考,禁止转载和引用,仅供个人学习。 # pymeshlab需要导入,其一般被命名为ml import pymeshlab as ml# 本案例所…

05.添加自定义触发器

添加自定义触发器 在系统中找到一个用户登录数量的监控项,用该监控项作为参考实例 测试监控项取值,2代表为登录系统终端数量 创建触发器 表达式设置条件,选择对应的监控项,根据对应的功能函数,在选择触发的结果 添…

简洁大气APP下载单页源码

源码介绍 简洁大气APP下载单页源码,源码由HTMLCSSJS组成,记事本打开源码文件可以进行内容文字之类的修改,双击html文件可以本地运行效果,也可以上传到服务器里面 效果截图 源码下载 简洁大气APP下载单页源码

Jenkins +配置邮件 centos8.5 安装部署 运维系列一

1 jenkins的war包下载地址: Download and deploy 2 xftp 等方式上传到服务器 #安装jdk tar zxvf jdk-11.0.8_linux-x64_bin.tar.gz mv jdk-11.0.8/ /usr/local/jdk vim /etc/profile export JAVA_HOME/usr/local/jdk export PATH$JAVA_HOME/bin:$PATH CLASSPATH.:$JAVA_…

中国居民消费新特征:中枢回落,即时满足,去地产化

随着收入预期和财富效应的转变,居民更倾向于通过短期集中式的消费来获得即时满足的快乐,服务消费表现出了更强的韧性。服务消费强于商品消费、消费去地产化、汽车挑大梁的特征延续。 特征一:消费倾向高于2020-22年,低于2017-19年…

传递给组件

React 组件使用 props 相互通信。每个父组件都可以通过为其子组件提供道具来将一些信息传递给子组件。Props 可能会让您想起 HTML 属性,但您可以通过它们传递任何 JavaScript 值,包括对象、数组和函数。 Props 是传递给 JSX 标签的信息。例如&#xff0…

libcity笔记:详细流程(以DeepMove为例)

1 主调用 python run_model.py --task traj_loc_pred --model DeepMove --dataset gowalla --batch_size5有task、dataset、model三个必须命令行参数batch_size一个可选命令行参数没有confg_file 1.1 libcity/utils/argument_list.py/str2bool 将字符串表示的布尔值转换为 Pyt…

结合kimi chat的爬虫实战思路

背景 想钻研一下项目组件,找找之后的学习方向。不能自以为是,所以借着网开源项目网站上公布的项目内容看一下,那些是我可以努力去学习的(入门的)。首先需要获取相关内容,于是爬取整理。 任务1&#xff1a…

操作系统实战(二)(linux+C语言)

实验内容 通过Linux 系统中管道通信机制,加深对于进程通信概念的理解,观察和体验并发进程间的通信和协作的效果 ,练习利用无名管道进行进程通信的编程和调试技术。 管道pipe是进程间通信最基本的一种机制,两个进程可以通过管道一个在管道一…

[Linux] git工具的安装和使用

目录 前言 安装 1.构建仓库 2.将仓库克隆到本地 使用 1.三板斧 1.git add 新增 2.git commit 提交 3.git push 推送 2.常用指令 前言 git 是一个代码托管平台,它的创始人是大名鼎鼎的 Linux 之父: 林纳斯托瓦兹,git的诞生可以使我们对…

pear + pecl 安装php扩展

pear https://pear.php.net/manual/en/installation.getting.php https://pear.php.net/go-pear.phar 让 CMD 支持 utf8 > chcp 65001 卸载 > php go-pear.phar uninstall 安装 > php go-pear.phar system 12 修改 12. Name of configuration file …

解释 RESTful API 以及如何使用它构建 web 应用程序

RESTful API(Representational State Transfer)是一种设计风格,用于创建网络应用程序的 API。它基于HTTP协议,通过使用标准的HTTP方法(如GET、POST、PUT和DELETE)来实现对资源的操作。 RESTful API的设计原…

python turtle

名字动画 #SquareSpiral1.py import turtle t turtle.Pen() turtle.bgcolor("black")my_nameturtle.textinput("输入你的姓名","你的名字?") colors["red","yellow","purple","blue"] for…

如何在Python中实现简单的OCR(光学字符识别)?

要在Python中实现简单的OCR(光学字符识别),可以使用开源库Tesseract。Tesseract是一个免费的OCR引擎,支持多种语言和平台。 以下是使用Python和Tesseract进行简单OCR的步骤: 安装Tesseract和Python的tesseract包&…

金融业开源软件应用 管理指南

金融业开源软件应用 管理指南 1 范围 本文件提供了金融机构在应用开源软件时的全流程管理指南,对开源软件的使用和管理提供了配套 组织架构、配套管理规章制度、生命周期流程管理、风险管理、存量管理、工具化管理等方面的指导。 本文件适用于金融机构规范自身对开…

ModelID

* dev_display_shape_matching_results (ModelID, red, Row5, Column5, Angle, 1, 1, 0) *利用模板进行模板匹配,输出坐标角度匹配分数等参数 vector_angle_to_rigid (0, 0, 0, Row5, Column5, Angle, HomMat2D) *从模板匹配函数的结果…

环信设置头像昵称(安卓android)版

在此真的要吐槽吐槽环信,那么大的公司,文档那么乱。。。真的像一坨屎一样,翻个demo东翻西翻,官网论坛看的眼瞎。。。几乎要放弃了,还好百度到别人的看了看弄出来了 1、首先,要确认自己用的是哪个环信的UI库…

Redis 入坑基本指南

引言 本指南将帮助您了解如何安装、配置和基本使用 Redis。Redis 是一款开源的高性能键值存储系统,可用于缓存、数据库、消息中间件等多种用途。 1. 安装 Redis a. 下载 Redis: 可以从 Redis 官方网站(https://redis.io)下载最…