纯血鸿蒙APP实战开发——首页下拉进入二楼效果案例

介绍

本示例主要介绍了利用position和onTouch来实现首页下拉进入二楼、二楼上划进入首页的效果场景,利用translate和opacity实现动效的移动和缩放,并将界面沉浸式(全屏)显示。

效果图预览

使用说明

  1. 向下滑动首页页面超过触发距离,页面进入二楼,未超过触发距离页面回弹。
  2. 二楼页面向上滑动超过触发距离,页面进入首页,未超过触发距离页面回弹。
  3. 效果图因要展示动效效果对展开速度进行了调整,可以通过SecondFloor.ets中的OFFSET_STEP和EXPAND_FLOOR_INTERVAL_TIME来调整二楼展开的速度,同理也可通过FloorView.ets中的OFFSET_STEP和EXPAND_FLOOR_INTERVAL_TIME来调整一楼展开的速度

实现思路

本例涉及的关键特性和实现方案如下:

  1. 使用Column布局将一楼页面二楼页面包裹,使用position将一、二楼页面固定,floorHeight设置二楼高度(初始Y轴为负的二楼高度),使用clip按指定的形状对当前组件进行裁剪,源码参考SecondFloor.ets和FloorView.ets。
Column() {// 二楼页面Column() {this.floorViewBuilder();}// 固定二楼刚开始位置.position({x: 0,// Y轴大小y: this.mainPageOffsetY})...// 一楼页面Column() {this.mainPageBuilder();}.position({x: 0,// Y轴大小加上二楼高度y: this.offsetY + this.floorHeight})
}
.clip(true) // TODO:知识点:按指定的形状对当前组件进行裁剪,参数为boolean类型时,设置是否按照父容器边缘轮廓进行裁剪。
  1. 通过对Column设置onTouch属性,记录手指按下和离开屏幕Y轴坐标,判断手势是上/下滑,当下滑距离达到触发距离进入二楼,未达到触发距离页面回弹(以一楼页面下滑为例),源码参考SecondFloor.ets。
Column() {...// 一楼页面Column() {this.mainPageBuilder();}...
}.onTouch((event) => {switch (event.type) {case TouchType.Down:this.onTouchDown(event);break;case TouchType.Move:this.onTouchMove(event);break;...break;}event.stopPropagation(); // 阻止冒泡})/*** 按下事件、获取按下事件的位置* @param event 触屏事件*/
private onTouchDown(event: TouchEvent) {// 获取触发按压事件Y轴的位置this.lastY = event.touches[0].windowY;...
}/*** 滑动事件* @param event 触屏事件*/
private onTouchMove(event: TouchEvent) {...let currentY = event.touches[0].windowY;// onTouch事件中本次Y轴大小减去上一次获取的Y轴大小,为负值则是向上滑动,为正值则是向下滑动let deltaY = currentY - this.lastY;...
}
  1. 使用Row布局将加载动画三个圆进行包裹,使用translate来实现圆的移动,使用scale来控制圆的加载,源码参考SecondFloor.ets。
Row() {// this.floorHeight - Math.abs(this.offsetY)为下拉距离,下拉距离超过MINI_SHOW_DISTANCE(动效最小展示距离)且小于TRIGGER_HEIGHT(触发动画高度或者动效消失高度)展示动画if ((this.floorHeight - Math.abs(this.offsetY)) > MINI_SHOW_DISTANCE && (this.floorHeight - Math.abs(this.offsetY)) <= TRIGGER_HEIGHT) {Row() {// 向左偏移圆Blank().width(this.roundSize).height(this.roundSize).borderRadius($r('app.integer.second_floor_circular_border_radius')).scale(this.immediatelyScale).backgroundColor($r('app.color.second_floor_circular_color')).translate({ x: this.animationXLeft }).opacity(((this.mFloorHeight - Math.abs(this.offsetY)) / this.mFloorHeight)) // 使用下拉距离除以二楼高度获得圆的透明度// 中心加载点Blank()...// 向右偏移圆Blank()...}}
}
  1. 操作translate来实现左右两圆实时的移动,使用scale来控制左右两圆的加载,源码参考SecondFloor.ets。
/*** 滑动事件* @param event 触屏事件*/
private onTouchMove(event: TouchEvent) {
...// TODO:知识点:确定是滑动状态后,进入动效界面,this.floorHeight减去this.offsetY的绝对值为滑动距离,在大于60(60指的是中心圆加载范围)和隐藏动效高度范围对左右圆的平移距离和和缩放进行设置if (((this.floorHeight - Math.abs(this.offsetY)) <= TRIGGER_HEIGHT) && (this.floorHeight - Math.abs(this.offsetY)) >= 60) {this.roundSize = 20;this.animationXLeft = 60;this.animationXRight = -60;// (this.floorHeight - Math.abs(this.offsetY))除以TRIGGER_HEIGHT 获取下拉百分比,使用百分比乘以60(60是根据圆最开始的位置获取)获得每次平移的距离,用来达到左右圆的X轴最后为0this.animationXLeft = this.animationXLeft - ((this.floorHeight - Math.abs(this.offsetY)) / TRIGGER_HEIGHT) * 60;this.animationXRight = this.animationXRight + ((this.floorHeight - Math.abs(this.offsetY)) / TRIGGER_HEIGHT) * 60;// 使用移动距离除以动效消失的高度,用来获取左右圆的缩放比例this.immediatelyScale = {x: ((this.floorHeight - Math.abs(this.offsetY)) / TRIGGER_HEIGHT),y: ((this.floorHeight - Math.abs(this.offsetY)) / TRIGGER_HEIGHT)};} else if (((this.floorHeight - Math.abs(this.offsetY)) < 60)) {// TODO:知识点:在中心圆加载的时候,左右圆是不显示的,因此将左右圆缩放比例大小调整为0,使用移动高度除以60(中心圆加载高度)再乘以20(圆的最终大小),以此来达到中心圆的加载效果this.roundSize = 0;this.roundSize = 20 * ((this.floorHeight - Math.abs(this.offsetY)) / 60);this.immediatelyScale = {x: 0,y: 0};} else {// 设置当二楼回收显示一楼时,三个圆属于加载成功状态this.roundSize = 20;this.immediatelyScale = { x: 1, y: 1 };this.animationXLeft = 0;this.animationXRight = 0;}...
}
  1. 在手指滑动结束离开屏幕后,通过判断此时二楼高度与Y轴高度差是否大于触发距离,若大于触发距离页面进入二楼,若小于页面进行回弹(以一楼下滑为例),源码参考SecondFloor.ets。
/*** 触摸抬起或取消触摸事件*/
private onTouchUp() {if (this.dragging) {// 二楼自身的高度减去向下Y轴的位移的绝对值大于触发值进入二楼,否则回弹if ((this.floorHeight - Math.abs(this.offsetY)) > this.expandFloorTriggerDistance) {// 进入二楼this.expandSecondFloor();} else {// 未达到触发距离回弹this.scrollByTop();}}
}

高性能知识点

本例使用了onTouch事件实时监听获取相关数据,避免在函数中进行冗余或耗时操作,例如应该减少或避免在函数打印日志,会有较大的性能损耗。

本示例使用了setInterval进行页面移动控制,在页面移动到相应的位置后使用clearInterval销毁以降低内存占用。

工程结构&模块类型

secondfloorloadanimation                     // har类型
|---model 
|   |---AppInfo.ets                          // App信息
|   |---UserInformation.ets                  // 用户信息    
|---view
|   |---SecondFloorLoadAnimation.ets         // 视图层-应用主页面
|   |---SecondFloor.ets                      // 视图层-应用一楼页面
|   |---FloorView.ets                        // 视图层-应用二楼页面

模块依赖

  • 本实例依赖common模块来实现日志的打印、资源 的调用、依赖动态路由模块来实现页面的动态加载。

参考资料

  • @ohos.window
  • 触摸事件

鸿蒙全栈开发全新学习指南

也为了积极培养鸿蒙生态人才,让大家都能学习到鸿蒙开发最新的技术,针对一些在职人员、0基础小白、应届生/计算机专业、鸿蒙爱好者等人群,整理了一套纯血版鸿蒙(HarmonyOS Next)全栈开发技术的学习路线【包含了大厂APP实战项目开发】

本路线共分为四个阶段:

第一阶段:鸿蒙初中级开发必备技能

第二阶段:鸿蒙南北双向高工技能基础:gitee.com/MNxiaona/733GH

第三阶段:应用开发中高级就业技术

第四阶段:全网首发-工业级南向设备开发就业技术:gitee.com/MNxiaona/733GH

《鸿蒙 (Harmony OS)开发学习手册》(共计892页)

如何快速入门?

1.基本概念
2.构建第一个ArkTS应用
3.……

开发基础知识:gitee.com/MNxiaona/733GH

1.应用基础知识
2.配置文件
3.应用数据管理
4.应用安全管理
5.应用隐私保护
6.三方应用调用管控机制
7.资源分类与访问
8.学习ArkTS语言
9.……

基于ArkTS 开发

1.Ability开发
2.UI开发
3.公共事件与通知
4.窗口管理
5.媒体
6.安全
7.网络与链接
8.电话服务
9.数据管理
10.后台任务(Background Task)管理
11.设备管理
12.设备使用信息统计
13.DFX
14.国际化开发
15.折叠屏系列
16.……

鸿蒙开发面试真题(含参考答案):gitee.com/MNxiaona/733GH

鸿蒙入门教学视频:

美团APP实战开发教学:gitee.com/MNxiaona/733GH

写在最后

  • 如果你觉得这篇内容对你还蛮有帮助,我想邀请你帮我三个小忙:
  • 点赞,转发,有你们的 『点赞和评论』,才是我创造的动力。
  • 关注小编,同时可以期待后续文章ing🚀,不定期分享原创知识。
  • 想要获取更多完整鸿蒙最新学习资源,请移步前往小编:gitee.com/MNxiaona/733GH

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

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

相关文章

冯喜运:5.13黄金原油震荡整理是涨还是跌?今日走势分析

【黄金消息面分析】;自5月初以来&#xff0c;黄金和白银一直在享受需求的回归&#xff0c;买家在过去几天加大了力度&#xff0c;一度推动金价重返2370美元上方&#xff0c;白银重返28.5美元上方。不过&#xff0c;经过几天的盘整后&#xff0c;黄金白银价格双双下跌。然而&…

Redis-详解(基础)

文章目录 什么是Redis&#xff1f;用Redis的特点&#xff1f;用Redis可以实现哪些功能&#xff1f;Redis的常用数据类型有哪些?Redis的常用框架有哪些?本篇小结 更多相关内容可查看 什么是Redis&#xff1f; Redis&#xff08;Remote DictionaryServer&#xff09;是一个开源…

下载文件名称乱码或变成了随机码

如图 后端是有正常返回附件名称的,浏览器开发工具中也正常显示了这个数据,但是下载下来的文件名称确实一堆随机码. 其实这个问题的原因是因为跨域 查看console: Refused to get unsafe header "content-disposition" 现象,后端传递到前端的fileName不能被识别,下载…

大模型与AIGC应用相关问题 模型大型

最近经常被问&#xff0c;你看“万亿的模型都出来了&#xff0c;你们训练的千亿模型是不是落伍了&#xff1f;”我想说&#xff1a;“虽然都叫超大模型&#xff0c;但是类型是不一样的&#xff0c;虽说每一类模型训出来都不容易&#xff0c;不过澄清一下概念还是必要的”。 大…

编写Ansible角色实现分布式LNMP安装

前言 本文将介绍如何使用 Ansible 编写角色&#xff0c;在分布式环境下完成 LNMP&#xff08;Linux、Nginx、MySQL、PHP&#xff09;的自动化&#xff08;编译&#xff09;安装和配置&#xff0c;并验证 PHP 与 MySQL 数据联通性&#xff0c;实现博客和论坛页面的展示。 常规…

Qt---信号和槽

一、信号和槽机制 所谓信号槽&#xff0c;实际就是观察者模式。当某个事件发生之后&#xff0c;比如&#xff0c;按钮检测到自己被点击了一下&#xff0c;它就会发出一个信号&#xff08;signal&#xff09;。这种发出是没有目的的&#xff0c;类似广播。如果有对象对这个信号…

二叉树的四种遍历代码实现

二叉树的遍历大致能分为以下几种 1.前序&#xff1a;根 左 右 2.中序&#xff1a;左 根 右 3.后序&#xff1a;左 右 根 4.层序&#xff1a;从根开始一层一层的向下 如上图访问顺序: 前序&#xff1a;1 2 3 N N N 4 5 N N 6 N N 中序&#xff1a;N 3 N 2 N 1 N 5 N 4 N …

docker-compose安装emqx集群(最新)(host模式)

机器&#xff1a; 10.60.0.20 10.60.0.21 10.60.0.22 一、三台机子都配置域名&#xff08;/etc/hosts&#xff09; 10.60.0.20 node1.emqx.io 10.60.0.22 node3.emqx.io 10.60.0.21 node2.emqx.io 二、docker-compose.yml&#xff08;10.60.0.21&#xff09; 其他两台机子自…

接搭建仿美团、代付系统源码搭建教程

最近很多粉丝催更、分享一下地球号&#xff1a;xiaobao0214520(WX) 现在大家都很流行搞网恋&#xff0c;我们搭建一个跟美团相似的系统 然后开发一个好友代付&#xff0c;我们在点单的时候转发链接让网恋对象付钱 若只是单点外卖的话&#xff0c;能榨出的油水还是太少。 所以…

Golang — map的使用心得和底层原理

map作为一种基础的数据结构&#xff0c;在算法和项目中有着非常广泛的应用&#xff0c;以下是自己总结的map使用心得、实现原理、扩容机制和增删改查过程。 1.使用心得&#xff1a; 1.1 当map为nil和map为空时&#xff0c;增删改查操作时会出现的不同情况 我们可以发现&#…

【全开源】废品回收微信小程序基于FastAdmin+ThinkPHP+UniApp

介绍 一款基于FastAdminThinkPHPUniApp开发的废品回收系统&#xff0c;适用废品回收站、再生资源回收公司上门回收使用的小程序 功能特性 1、会员注册 支持小程序授权注册和手机号注册 2、回收品类 可设置回收品类&#xff0c;废纸、废金属、废玻璃、旧衣服等 3、今日指导价…

面试高频知识点:Java互联网大厂高频面试题(持续收录)

文章目录 前言一、Java基础题1、Java语言的三大特性2、JDK 和 JRE 有什么区别3、Java基本数据类型及其封装类4、说明一下public static void main(String args[])这段声明里关键字的作用5、java的数据结构有哪些&#xff1f;6、抽象类和接口的区别?7、 与 equals 的区别8、Str…

WordPress插件Show IDs by Echo,后台显示文章、页面、分类、标签、媒体库、评论、用户的ID

WordPress的这款Show IDs by Echo插件&#xff0c;可以让我们设置是增加一列ID还是直接在“编辑 |快速编辑 |查看”操作后面增加ID&#xff0c;而且支持展示以下内容的ID&#xff1a; 文章页面类别标签评论自定义帖子类型自定义分类法用户媒体 Show IDs by Echo插件的安装及启…

企业级OV SSL证书:强化在线信任与安全的权威之选

在数字经济浪潮下&#xff0c;企业网站的安全性直接影响着用户信任度和业务的可持续发展。其中&#xff0c;企业级组织验证&#xff08;Organization Validation&#xff0c;简称OV&#xff09;SSL证书作为安全解决方案的重要一环&#xff0c;以其独有的优势&#xff0c;在众多…

网安面经之文件包含漏洞

一、文件包含漏洞 1、文件包含漏洞原理&#xff1f;危害&#xff1f;修复&#xff1f; 原理&#xff1a;开发⼈员⼀般希望代码更灵活&#xff0c;所以将被包含的⽂件设置为变量&#xff0c;⽤来进⾏动态调⽤&#xff0c;但是由于⽂件包含函数加载的参数没有经过过滤或者严格的…

LVDS 源同步接口

传统数据传输通常采用系统同步传输方式&#xff0c;多个器件基于同一时钟源进行系统同步&#xff0c;器件之间的数据传输时序关系以系统时钟为参考&#xff0c;如图1所示。系统同步传输方式使各器件处于同步工作模式&#xff0c;但器件之间传输数据的传输时延难以确定&#xff…

火山引擎VeDI:A/B测试平台指标能力升级,助力企业提升精细化运营效率

在数字化浪潮的推动下&#xff0c;数据分析与精细化运营已成为企业提升竞争力的关键。近日&#xff0c;火山引擎A/B测试DataTester完成了指标能力的全面升级&#xff0c;为企业在流量竞争激烈的市场中提供了更强大、更可信的数据支持。 此次升级亮点在于引入了“按某个属性去重…

局域网内访问vue3项目|Network: use --host to expose

背景 我希望在相同的局域网内&#xff0c;通过手机访问我在Vue 3项目中展示的效果 遇到的问题 使用Vue CLI的–host选项实现局域网内的应用程序测试 当使用Vue CLI在本地提供服务时&#xff0c;通过使用 --host 选项&#xff0c;你可以指定要公开应用程序的主机。默认情况下&a…

[Linux] 入门指令详解

目录 ls指令 pwd指令 whoami指令 cd指令 clear指令 touch指令 mkdir指令 rmdir指令 rm指令 man指令 cp指令 mv指令 cat指令 tac指令 more指令 less指令 head指令 tail指令 拓展&#xff1a;如何读取文件中间某一段内容&#xff1f; date指令 cal指令 fin…

代码随想录阅读笔记-动态规划【爬楼梯】

题目 假设你正在爬楼梯。需要 n 阶你才能到达楼顶。 每次你可以爬 1 或 2 个台阶。你有多少种不同的方法可以爬到楼顶呢&#xff1f; 注意&#xff1a;给定 n 是一个正整数。 示例 1&#xff1a; 输入&#xff1a; 2输出&#xff1a; 2解释&#xff1a; 有两种方法可以爬到楼…