介绍
本示例主要介绍了利用position和onTouch来实现首页下拉进入二楼、二楼上划进入首页的效果场景,利用translate和opacity实现动效的移动和缩放,并将界面沉浸式(全屏)显示。
效果图预览
使用说明
- 向下滑动首页页面超过触发距离,页面进入二楼,未超过触发距离页面回弹。
- 二楼页面向上滑动超过触发距离,页面进入首页,未超过触发距离页面回弹。
- 效果图因要展示动效效果对展开速度进行了调整,可以通过SecondFloor.ets中的OFFSET_STEP和EXPAND_FLOOR_INTERVAL_TIME来调整二楼展开的速度,同理也可通过FloorView.ets中的OFFSET_STEP和EXPAND_FLOOR_INTERVAL_TIME来调整一楼展开的速度
实现思路
本例涉及的关键特性和实现方案如下:
- 使用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类型时,设置是否按照父容器边缘轮廓进行裁剪。
- 通过对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;...
}
- 使用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()...}}
}
- 操作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;}...
}
- 在手指滑动结束离开屏幕后,通过判断此时二楼高度与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