![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
鸿蒙开发
文章平均质量分 73
移动开发那些事儿
纸上得来终觉浅
展开
-
纯血鸿蒙APP实战开发——列表项交换案例
本案例通过List组件、组合手势GestureGroup、swipeAction属性以及attributeModifier属性等实现了列表项的交换和删除。原创 2024-08-21 20:57:30 · 49 阅读 · 0 评论 -
纯血鸿蒙APP实战开发——悬浮窗拖拽和吸附动画
本示例使用position绝对定位实现应用内悬浮窗,并且通过animateTo结合curves动画曲线实现悬浮窗拖拽跟手和松手吸附边缘的弹性动画效果。原创 2024-08-21 20:36:53 · 70 阅读 · 0 评论 -
纯血鸿蒙APP实战开发——阅读翻页方式案例
本示例展示手机阅读时左右翻页,上下翻页,覆盖翻页的功能。原创 2024-08-21 17:41:29 · 576 阅读 · 0 评论 -
纯血鸿蒙APP实战开发——自定义Swiper卡片预览效果实现
本方案做的是采用Swiper组件实现容器视图居中完全展示,两边等长露出,并且跟手滑动效果。原创 2024-08-21 16:46:52 · 165 阅读 · 0 评论 -
纯血鸿蒙APP实战开发——多模态页面转场动效实现案例
本示例介绍多模态页面转场动效实现:通过 半模态转场 实现半模态登录界面,通过配置NavDestinationMode类型为DIALOG,实现半模态的背景为透明,再与全屏模态 和组件转场结合实现多模态组合登录场景,其中手机验证码登录与账号密码登录都为组件,通过TransitionEffect.asymmetric()和TransitionEffect.move()实现组件间转场达到近似页面转场的效果。原创 2024-08-21 16:04:12 · 224 阅读 · 0 评论 -
纯血鸿蒙APP实战开发——一镜到底“页面转场”动画
本方案做的是页面点击卡片跳转到详情预览的转场动画效果原创 2024-08-21 15:45:54 · 149 阅读 · 0 评论 -
纯血鸿蒙APP实战开发——页面加载效果实现案例
本示例介绍Stack堆叠组件和LoadingProgress加载组件模拟首次进入页面实现页面加载的效果。加载完成后,LoadingProgress组件会消失并展示加载结果页(即商品页)。原创 2024-08-21 14:30:53 · 170 阅读 · 0 评论 -
纯血鸿蒙APP实战开发——长列表滑动到指定列表项动效实现案例
在长列表场景时,当用户在浏览过程中打断时,列表会从第一项开始重新加载,此时我们使用 scrollToIndex 跳转到某个列表项时,当开启smooth动效时,会对经过的所有item进行加载和布局计算,当大量加载item时会导致性能问题,影响用户体验。因此我们使用 currentOffset方法 获取并记录偏移量,然后使用 scrollTo方法 跳转到上次浏览记录功能,可以流畅滑动到上次列表的位置。原创 2024-08-21 13:51:31 · 86 阅读 · 0 评论 -
纯血鸿蒙APP实战开发——标题下拉缩放案例
本文以备忘录应用为示例,介绍如何在实现标题展开时继续下拉的动效。原创 2024-08-20 22:31:47 · 488 阅读 · 0 评论 -
纯血鸿蒙APP实战开发——底部抽屉滑动效果案例
本示例主要介绍了利用List实现底部抽屉滑动效果场景,并将界面沉浸式(全屏)显示,及背景地图可拖动。原创 2024-08-20 21:59:08 · 208 阅读 · 0 评论 -
纯血鸿蒙APP实战开发——SideBarContainer侧边栏淡入淡出动效实现案例
在2in1或平板上,群聊侧边栏是一种较为常用的功能,虽然HarmonyOS已经具备了基本的动效,但是部分情况下开发者可能有定制侧边栏动效的需求,本例主要介绍了如何基于显式动画实现侧边栏的淡入淡出动效。原创 2024-08-20 21:15:00 · 202 阅读 · 0 评论 -
纯血鸿蒙APP实战开发——数字滚动动效实现
本示例主要介绍了数字滚动动效的实现方案。该方案多用于数字刷新,例如页面刷新抢票数量等场景。原创 2024-08-20 20:31:08 · 97 阅读 · 0 评论 -
纯血鸿蒙APP实战开发——投票动效实现案例
本示例介绍使用绘制组件中的Polygon组件配合使用显式动画以及borderRadius实现投票pk组件。原创 2024-08-20 17:17:54 · 93 阅读 · 0 评论 -
纯血鸿蒙APP实战开发——使用绘制组件实现自定义进度动画
本示例介绍使用绘制组件中的Circle组件以及Path组件实现实时进度效果。该场景多用于手机电池电量、汽车油量、水位变化等动态变化中。原创 2024-08-20 16:24:13 · 217 阅读 · 0 评论 -
纯血鸿蒙APP实战开发——Grid和List内拖拽交换子组件位置
本示例分别通过onItemDrop()和onDrop()回调,实现子组件在Grid和List中的子组件位置交换。原创 2024-08-20 15:54:18 · 89 阅读 · 0 评论 -
纯血鸿蒙APP实战开发——折叠屏音乐播放器方案
本示例介绍使用ArkUI中的容器组件FolderStack在折叠屏设备中实现音乐播放器场景原创 2024-08-20 14:55:37 · 277 阅读 · 0 评论 -
纯血鸿蒙APP实战开发——听歌识曲水波纹特效案例
在很多应用中,会出现点击按钮出现水波纹的特效。原创 2024-08-20 14:08:46 · 205 阅读 · 0 评论 -
纯血鸿蒙APP实战开发——视频全屏切换案例
本示例介绍了 @ohos.multimedia.media 组件和 @ohos.window 接口实现媒体全屏的功能。该场景多用于首页瀑布流媒体播放等。原创 2024-08-20 13:40:24 · 670 阅读 · 0 评论 -
纯血鸿蒙APP实战开发——状态栏显隐变化
本示例介绍使用Scroll组件的滚动事件onScroll实现状态栏显隐变化。该场景多用于各种软件的首页、我的等页面中。原创 2024-08-19 22:31:20 · 261 阅读 · 0 评论 -
纯血鸿蒙APP实战开发——Swiper高度可变化效果实现
在很多应用中,swiper组件每一个page的高度是不一致的,所以需要swiper组件下方页面的高度跟着一起变化。原创 2024-08-19 22:04:48 · 299 阅读 · 0 评论 -
纯血鸿蒙APP实战开发——使用弹簧曲线实现抖动动画及手机振动效果案例
本示例介绍使用vibrator.startVibration方法实现手机振动效果,用keyframeAnimateTo关键帧动画实现点击后的抖动动画。原创 2024-08-19 21:47:58 · 221 阅读 · 0 评论 -
纯血鸿蒙APP实战开发——翻页动效案例
翻页动效是应用开发中常见的动效场景,常见的有书籍翻页,日历翻页等。本例将介绍如何通过ArkUI提供的显示动画接口 animateTo 实现翻页的效果。如果你觉得这篇内容对你还蛮有帮助,我想邀请你帮我三个小忙关注小编,同时可以期待后续文章ing🚀,不定期分享原创知识。想要获取更多完整鸿蒙最新学习知识点,请看下方小图。原创 2024-08-19 21:12:20 · 619 阅读 · 0 评论 -
纯血鸿蒙APP实战开发——下拉刷新与上滑加载案例
本示例介绍使用第三方库的PullToRefresh组件实现列表的下拉刷新数据和上滑加载后续数据。原创 2024-08-19 20:30:25 · 266 阅读 · 0 评论 -
纯血鸿蒙APP实战开发——跑马灯案例
本示例介绍了文本宽度过宽时,如何实现文本首尾相接循环滚动并显示在可视区,以及每循环滚动一次之后会停滞一段时间后再滚动。原创 2024-08-19 18:30:13 · 190 阅读 · 0 评论 -
纯血鸿蒙APP实战开发——滑动页面信息隐藏与组件位移效果
在很多应用中,向上滑动"我的"页面,页面顶部会有如下变化效果:一部分信息逐渐隐藏,另一部分信息逐渐显示,同时一些组件会进行缩放或者位置移动。向下滑动时则相反。原创 2024-08-19 16:26:04 · 324 阅读 · 0 评论 -
纯血鸿蒙APP实战开发——地址交换动画
本示例介绍使用显式动画animateTo实现左右地址交换动画。该场景多用于机票、火车票购买等出行类订票软件中。原创 2024-08-19 15:44:23 · 239 阅读 · 0 评论 -
纯血鸿蒙APP实战开发——tabContent内容可以在tabBar上显示并响应滑动事件案例
本示例实现了tabContent内容可以在tabBar上显示并且tabBar可以响应滑动事件的功能。原创 2024-08-19 14:47:37 · 714 阅读 · 0 评论 -
纯血鸿蒙APP实战开发——底部面板嵌套列表滑动案例
本示例主要介绍了利用panel实现底部面板内嵌套列表,分阶段滑动效果场景。原创 2024-08-19 14:13:05 · 267 阅读 · 0 评论 -
纯血鸿蒙APP实战开发——Canvas实现模拟时钟案例
本示例介绍利用 Canvas 和定时器实现模拟时钟场景,该案例多用于用户需要显示自定义模拟时钟的场景。原创 2024-08-19 13:51:24 · 286 阅读 · 0 评论 -
纯血鸿蒙APP实战开发——折叠屏扫描二维码方案
本示例介绍使用自定义界面扫码能力在折叠屏设备中实现折叠态切换适配。自定义界面扫码使用系统能力customScan,其提供相机流的初始化、启动扫码、识别、停止扫码、释放相机流资源等能力。折叠屏折叠状态通过监听display的foldStatusChange事件实现。原创 2024-08-18 22:39:44 · 278 阅读 · 0 评论 -
纯血鸿蒙APP实战开发——ArkWeb同层渲染
该方案展示了ArkWeb 同层渲染 :将系统原生组件直接渲染到前端H5页面上,原生组件不仅可以提供H5组件无法实现的一些功能,还能提升用户体验的流畅度。原创 2024-08-18 22:26:18 · 373 阅读 · 0 评论 -
纯血鸿蒙APP实战开发——swiper指示器导航点位于swiper下方
本示例介绍通过分割swiper区域,实现指示器导航点位于swiper下方的效果。原创 2024-08-18 21:11:59 · 240 阅读 · 0 评论 -
纯血鸿蒙APP实战开发——手写绘制及保存图片
本示例使用drawing库的Pen和Path结合NodeContainer组件实现手写绘制功能。手写板上完成绘制后,通过调用image库的packToFile和packing接口将手写板的绘制内容保存为图片,并将图片文件保存在应用沙箱路径中。原创 2024-08-18 20:54:49 · 693 阅读 · 0 评论 -
纯血鸿蒙APP实战开发——跨文件样式复用和组件复用
本示例主要介绍了跨文件样式复用和组件复用的场景。在应用开发中,我们通常需要使用相同功能和样式的ArkUI组件,例如购物页面中会使用相同样式的Button按钮、Text显示文字,我们常用的方法是抽取公共样式或者封装成一个自定义组件到公共组件库中以减少冗余代码。原创 2024-08-18 20:20:30 · 652 阅读 · 0 评论 -
纯血鸿蒙APP实战开发——图片九宫格封装案例
本示例介绍使用( Flex) 组件实现图片在不同个数情况下的布局效果(默认布局和自定义布局)。该场景多用于社交类应用。原创 2024-08-16 22:20:52 · 250 阅读 · 0 评论 -
纯血鸿蒙APP实战开发——自定义安全键盘案例
金融类应用在密码输入时,一般会使用自定义安全键盘。本示例介绍如何使用TextInput组件实现自定义安全键盘场景,主要包括TextInput.customKeyboard绑定自定义键盘、自定义键盘布局和状态更新等知识点。当设置自定义键盘时,输入框激活后不会打开系统输入法,而是加载应用指定的自定义组件,针对系统键盘的enterKeyType属性设置将无效。自定义键盘采用覆盖原始界面的方式呈现,不会对应用原始界面产生压缩或者上提。原创 2024-08-16 21:12:59 · 598 阅读 · 0 评论 -
纯血鸿蒙APP实战开发——页面间共享组件实例的案例
本示例提供组件实例在页面间共享的解决方案:通过 Stack 容器,下层放地图组件,上层放 Navigation 组件来管理页面,页面可以共享下层的地图组件,页面中需要显示地图的区域设置为透明,并参考 触摸交互控制 ,设置事件透传及响应区域原创 2024-08-16 20:53:35 · 380 阅读 · 0 评论 -
纯血鸿蒙APP实战开发——元素超出List区域
List组件clip属性默认为true,超出容器边缘的子组件会按照List的布局范围被裁剪。为此,可以在List组件内部添加一个占位的ListItem,以达到预期的布局效果。List占满整个窗口或者不可滚动的情况下,也可以在List外占位,同时设置List的clip属性为false达成同样的效果。原创 2024-08-16 20:27:58 · 319 阅读 · 0 评论 -
纯血鸿蒙APP实战开发——左右拖动切换图片效果案例
本示例使用滑动手势监听,实时调整左右两侧内容显示区域大小和效果。通过绑定gesture事件中的PanGesture平移手势,实时获取拖动距离。当拖动时,实时地调节左右两个Image组件的宽度,从而成功实现左右拖动切换图片效果的功能。原创 2024-08-16 18:12:06 · 279 阅读 · 0 评论 -
纯血鸿蒙APP实战开发——适配挖孔屏案例
本示例介绍使用屏幕属性 getDefaultDisplaySync、getCutoutInfo 接口实现适配挖孔屏。该场景多用于沉浸式场景下。原创 2024-08-16 17:40:54 · 316 阅读 · 0 评论