鸿蒙开发者社区

实现一个音乐播放器中，歌词颜色渐变的效果。简单点说，就是解析歌词内容，拿到每个词，或者每句话的开始时间、结束时间，执行颜色渐变的动画，然后依次执行。今天这篇先实现一个简单的一句话字体颜色渐变效果。实现演示：实现思路：1.实现字体颜色渐变可以使用之前介绍过的Canvas绘制字体和线性渐变色实现，这种方案需要大量的绘制，相对复杂。2.如果让字体镂空，底部背景使用animateTo实现颜色渐变，这样也可以实现字体颜色渐...

使用Canvas绘制文字时，通常需要设置文字的对齐方式。官方文档解释：textBaseline设置文本绘制中的水平对齐方式，textAlign设置文本绘制中的文本对齐方式。通俗地说：textBaseline设置文字基于绘制坐标点垂直方向的对齐方式textAlign设置文字基于绘制坐标点水平方向的对齐方式使用Canvas绘制文字的方法：fillText(text:string,x:number,y:number)text:需要绘制的文本内容x,y:需要绘制的文本的左下角坐标了解以上基础属性，通过...

Canvas提供了线性渐变、径向渐变、圆锥渐变三种渐变效果，今天通过动画直观地看一下每个渐变的效果。线性渐变createLinearGradient(x0:number,y0:number,x1:number,y1:number)x0,y0:起点的坐标，默认单位：vpx1,y1:终点的坐标，默认单位：vp设置渐变断点值：addColorStop(offset:number,color:string)offset:渐变点距离起点的位置占总体长度的比例,可以理解为开始渐变的位置演示效果：径向渐变createRadialGradient(x0:number,y...

水印在我们日常使用的APP中是很常见的。本文记录一下如何实现一个自定义的水印，可以自定义设置水印文字、间距、旋转角度。实现效果：实现思路：核心方法是使用Canvas绘制文字，只需要在指定的间隔上绘制我们想要展示的水印文字内容就可以了。需要使用到Canvas的坐标系平移、坐标系旋转、文字绘制。源码：import{WindowUtils}from"..utilsWindowUtils"EntryComponentV2structWaterMarkTest{privatemaxHorizontalSpace:numberMat...

【HarmonyOS应用开发者高级认证部分题库】一、单选题（132题）1.以下关于Taskpool和Worker的描述正确的是A.开发者需要自行管理taskpool的数量及生命周期B.TaskPool支持任务延时执行C.TaskPool和Worker的任务执行时长上限都是无限制D.Worker自行管理生命周期，开发者无需关心任务负载高低2.以下有关自定义组件ComponentV2描述正确的是A.Prop能在ComponentV2声明B.State能在ComponentV2声明C.Param能在ComponentV2中声明D.Link能...

最近想把日常开发练习总结的APP上架到应用市场，由于之前APP内容都是最终的效果演示，看着有些单调，于是打算把对应的源码也加入到里面，可以直接阅读，和文章里的代码展示是一样的。最终效果：实现过程：1.不知道鸿蒙有没有支持的三方库可以直接引用实现，我没有去查，最近刚好写Web的使用，正好可以结合HTML展示2.对于一个移动端的开发程序员，写一个类似于Markdown的展示效果，也无从下手，于是找了AI帮忙，让他帮我写这个HT...

本篇对比一下Web的两种渲染模式，三种不同的布局方式。渲染模式对比同步渲染：RenderMode.SYNCRENDER开发者模式：过度绘制检测10次同步加载耗时：毫秒IwebonPageBegin:同步完成加载耗时:1376IwebonPageBegin:同步完成加载耗时:989IwebonPageBegin:同步完成加载耗时:1014IwebonPageBegin:同步完成加载耗时:1040IwebonPageBegin:同步完成加载耗时:1052IwebonPageBegin:同步完成加载耗时:1004IwebonPageBegin:同步完成加载耗时:182...

上篇总结了Web组件的基础属性和事件，这篇通过一个简单案例，学习原生与web的交互。涉及到JS注入，原生调用JS方法，JS调用原生方法。实现效果：实现目标：1.打开目标页面，当有图片或gif预览时，按返回键拦截，关闭预览可以返回到上一页2.从目标页面跳转到其他页后，按返回键返回到上一页，直到返回目标页时才能退出实现思路：1.需要给目标web页面注入一个JS方法，监听是否有图片或者gif预览，调试发现，当有预览时，html的body...

本文总结一下使用Web组件访问在线网页时的基础属性和事件设置。使用Web组件加载一个网页，最简单的一行代码就可实现，即Web({src:网页地址,controller:newwebview.WebviewController()})Web组件需要传一个参数WebOptions，接下来看一下WebOptions的各个参数：名称类型src网页资源地址controller控制器，通过controller可以控制Web组件各种行为renderMode表示当前Web组件的渲染方式incognitoMode表示当前创建的webview是否是隐私...

天下产品一大”借鉴“，可以发现某宝、东、鱼等APP的首页菜单，横向滚动第一页是一行展示5个完整的菜单和一小部分第二页的一个菜单，第二页是三行展示菜单，左右滑动可动态调整菜单栏的高度。看一下模仿实现效果：实现思路：1.首先想到使用Swiper+Grid实现，通过设置Swiper的nextMargin可以显示出第二页的一部分，但是由于设置了该属性，滑动过程中第一页和第二页的Grid间隔是一样的，和目标不一致，如果滑动时修改，连贯性不好...

系统设置及系统应用跳转是各类应用的高频使用场景之一，如跳转至系统设置、一键拨打电话、查看与修改应用权限、打开浏览器浏览网页等。本文总结了打开系统蓝牙设置、打开移动网络设置、打开WiFi设置、拉起拨打电话、打开指定应用的设置详情页、打开指定应用在华为市场的详情页、打开应用通知设置、跳转系统浏览器打开网页、使用OpenLink跳转到系统其他应用。跳转工具类源码import{common,OpenLinkOptions,Want}from"kit.Ability...

基于上篇一镜到底实现，做出一些优化，增加长按事件弹出操作框。演示：上篇不足：1.图片初始位置相对屏幕Y轴的偏移没有赋值，影响图片放大后拖动的上下边界，导致上边会有黑边，下边有一部分显示不全2.图片缩放没有限制，图片可以放大很大3.手势识别区域为图片初始大小，放大之后其他区域没有响应优化：1.图片绘制完成之后，获取图片左上角相对页面左上角的位置.onAreaChange((oldValue:Area,newValue:Area){this.imagePosition...

当首次安装应用时，通常会有功能引导提示的需求，本文实现一个简单的功能引导案例供参考，也可以使用第三方的插件库ohoshighlightguide实现效果：实现思路：1.使用Stack布局在需要引导的布局上面增加一个蒙版2.在蒙版中显示需要引导的内容，需要获取关键元素的位置，在蒙版中重新绘制高亮显示，再增加popup步骤提示弹框3.通过提示步骤控制每个提示框的显示和隐藏，需要处理返回键、home键点击事件对popup的影响核心方法：getIns...

本文总结一下常用的窗口管理、屏幕管理常用的方法，封装作为一个工具类，统一管理使用。例如获取屏幕长宽，获取状态栏和导航栏的高度，设置状态栏属性，设置横竖屏，设置沉浸式全屏等方法。实现效果：封装工具类api方法名介绍getWindow()获取应用主窗口getWindowWidth()获取主窗口宽度getWindowHeight()获取主窗口高度getStatusHeight()获取状态栏高度getNavHeight()获取导航栏高度setWindowFullScreen()设置沉浸式全屏isFullSc...

实现目标：一组图片点击其中一张可以跳转到全屏预览，并且使用一镜到底转场动画，预览界面可以左右滑动查看其他图片，单张图片可以放大查看，向下拖动退出预览。实现原理：1.一镜到底设置geometryTransition属性将图片首页和大图页面的图片绑定同一id值，结合属性动画效果实现一镜到底效果组件内转场主要通过transition属性配置转场参数，在组件插入和删除时显示过渡动效。通过设置opacity，设置组件转场时的透明度效果，为插入...

当我们抽离一个功能作为一个module供其他模块调用，或者导入第三方的module时，可能需要在应用entry模块中打开module中的page，本文介绍一下如何新建一个module，及entry打开module中的页面的3中方法。新建module选择StaticLibrary点击下一步，设置modulename完成即可创建完成引用module在entry模块下的ohpackage.json5文件中添加module的引用"dependencies":{'librarycommon':'file:..librarycommon'}在librarycommon中创建3个...

点击事件的防连击（防止短时间内多次触发点击）是非常常见的需求，核心目的是避免因用户快速多次点击导致的业务逻辑异常、重复操作或性能问题。例如：表单提交：如注册、登录、支付、评论发布等。若不防连击，可能导致多次提交相同数据。解决事件的防连击，需要用到闭包，通过以下例子，了解一下闭包。作用域通过两个for循环，比较一下test(){console.log('开始执行'+DateUtil.format(newDate().getTime(),'HH:mm:ss'))letindex...

UIAbility的生命周期示意图如下所示回调函数回调时机使用onCreate()在首次创建UIAbility实例时触发，仅执行一次在该回调中执行UIAbility整个生命周期中仅发生一次的启动逻辑onWindowStageCreate()UIAbility实例创建完成之后，在进入前台之前执行在该回调中进行UI加载、WindowStage的事件订阅onForeground()UIAbility实例进入前台状态在该回调中申请系统需要的资源onBackground()UIAbility实例切换至后台状态在该回调中释放UI不...

在开发中，通过会涉及到不同的Context，比如要监听应用的前后台状态变化需要用到ApplicationContext，启动一个ability需要用到UIAbilityContext，配置键盘避让模式需要用到UIContext，今天总结一下各个context的作用和区别。ApplicationContextApplicationContext模块继承自Context，为开发者提供应用级别的上下文的能力1.通过context属性获取applicationContextletapplicationContextthis.context.getApplicationContext();注...

上篇实现了视频的播放和进度控制，这篇在上一篇的基础上，增加实现横屏视频全屏播放，全屏时，上下滑动屏幕调节音量和亮度。看一下实现效果：实现步骤：实现全屏：1.定义切换方法，根据当前page是否是沉浸式，做相应的操作,在点击全屏按钮时调用该方法asynchandleFullScreen(){if(this.isFullScreen){设置主窗口或子窗口的布局是否为沉浸式布局this.mainWin.setWindowLayoutFullScreen(false)设置窗口全屏模式时状态栏、底部导...