当前位置: 首页 > news >正文

鸿蒙 Next 实战: 电子木鱼

前言

正所谓:Hello Word 是程序员学任何一门语言的第一个程序实践。这其实也是一个不错的正反馈,那如何让学习鸿蒙 Next 更有成就感呢?下面就演示一下从零开发一个鸿蒙 Next 版的电子木鱼,主打就是一个抽象!

实现要点

  1. 页面布局
  2. 木鱼点击
  3. 木鱼音效
  4. 动画特效
  5. 自定义弹窗

开始实践

页面布局

ArkTS 定义了声明式 UI 描述、自定义组件和动态扩展 UI 元素的能力,配合 ArkUI 开发框架中的系统组件及其相关的事件方法、属性方法等共同构成 UI 开发的主体。我们下面要完成的主要是一个木鱼和设置按钮、自动按钮。

build() {Column() {HdNav({ title: '电子木鱼', showRightIcon: false, iconColor: $r('app.color.white'), titleColor: '#ffffff' })Row() {Text(this.woodenType[this.type] + ':'+ this.score).fontSize(22).fontColor("#ffffff").width('100%').textAlign(TextAlign.Center)}.width("100%").height("8%")Row() {Image($r('app.media.setting')).width(25).height(25).margin(16).onClick(() => {if (this.dialogController != null) {this.dialogController.open()}})}.width('100%')Row() {Image($r('app.media.foreground')).width(40).height(40).margin({left:8,top:5})}.width('100%').onClick(() => {this.handlePopup = !this.handlePopup}).bindPopup(this.handlePopup, {message: '数据统计功能,正在完善中~',})Row() {if (this.isPresent) {Text(this.woodenType[this.type] + ': ' + this.woodenFishNum).fontSize(16).fontColor("#ffffff").width('100%').textAlign(TextAlign.Center).transition(this.effect)}}.width('100%').height('25%').alignItems(VerticalAlign.Top)Row() {Image($r('app.media.muyu')).width(this.isZoomed == true ? this.targetWidth * 1.2 : this.targetWidth * 1).height(this.isZoomed == true ? this.targetHeight * 1.2 : this.targetHeight * 1)}.width('100%').height('25%').alignItems(VerticalAlign.Center).justifyContent(FlexAlign.Center)Row() {Toggle({ type: ToggleType.Switch }).onChange((isOn: boolean) => {if(isOn) {promptAction.showToast({ message: 'auto is on.' })} else {promptAction.showToast({ message: 'auto is off.' })}})Text('自动' + this.woodenType[this.type]).fontSize(18).fontColor('#ffffff').height(40).margin({left: 10})}.width('100%').height('10%').justifyContent(FlexAlign.Center)}
.height("100%")
.backgroundColor('rgba(0, 0, 0, 1.00)')}

木鱼点击

木鱼是一张图片,也就是给该图绑定一个点击事件,点击一次有三个动作需要执行:

  • 木鱼有放大的效果
  • 有类似功德文字的飘动
  • 功德数值的累加

而点击的时候要看到实时的效果,所以可以声明三个状态,通过 State 的修改,从而驱动 UI 更新,以下的 animateTo 是给域名的放大添加的一个平滑效果。

// 积分
@State score: number = 0
// 积分文字
@State isPresent: boolean = false
// 木鱼是否放大
@State isZoomed: boolean = false// 木鱼UI
Image($r('app.media.muyu'))
.width(this.isZoomed == true ? this.targetWidth * 1.2 : this.targetWidth * 1)
.height(this.isZoomed == true ? this.targetHeight * 1.2 : this.targetHeight * 1)
.onClick((event) => {
animateTo({ curve: curves.springMotion() }, () => {this.isZoomed = !this.isZoomed;if (this.isZoomed == true) {this.isPresent = true;this.score += this.woodenFishNum;this.onClickPlay();}
})// 定时缩小/定时文字消失
setTimeout(() => {this.isZoomed = false;}, 50);
setTimeout(() => {this.isPresent = false}, 600);
})

木鱼音效

木鱼音效是点击时的咚咚的声音,这里就要使用到 HarmonyOS Next 的音频服务。这里需要注意一点,项目运行预览无法播放,一定要模拟器或真机才可以调试音频的播放效果。

// 销毁音效工具onClickDestroy= ()=>{AudioMgr.Ins().destroy();console.log('audio', 'destroy');}// 初始化音效工具onClickInit = ()=>{AudioMgr.Ins().init();console.log('audio', 'init');}// 播放指定音效onClickPlay = ()=>{AudioMgr.Ins().play();console.log('audio', 'playing');}

动画特效

这里的动画效果主要是点击木鱼,从下网上飘出一个文字然后消失的特效。在鸿蒙中可以通过 TransitionEffect 方法添加效果,首先创建特效,然后再文字上挂载。

// 上移入场特效private effect: object =TransitionEffect.OPACITY// 初始正常大小// 假设动画持续时间为500ms.combine(TransitionEffect.scale({ x: 1, y: 1 }).animation({ curve: curves.springMotion(0.6, 1.2), duration: 0 }))// 向上平移150单位// 与上一步同时开始.combine(TransitionEffect.translate({ x: 0, y: 400 }).animation({ curve: curves.springMotion(0.6, 1.2), duration: 10000, delay: 50 }))// 淡出至完全透明// 在平移结束后开始淡出.combine(TransitionEffect.opacity(0).animation({ curve: curves.springMotion(0.6, 1.2), duration: 1000, delay: 0 }));

自定义弹窗

经过前面布局,事件绑定,音效播放,一个简单的电子木鱼其实已经完成了。但是为了增添趣味和后期扩展,这里再加一个设置功能,通过按钮打开配置项弹窗,设置包括:

  • 类型选项 (功德、财运、桃花运等)
  • 音效选项 (各种解压的音效素材)
  • 皮肤管理 (木鱼的 UI 界面设置)
  • 数值修改 (对展示的累加数值做任意修改)
  • 其他 (是否关闭音效,是否自动点击等)
// 弹窗层(UI开发-组件-自定义弹窗)
@CustomDialog
struct SettingDialog {controller?: CustomDialogController// 父子组件双向同步,文档见 https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-link-V5@Link woodenFishType: number// 木鱼敲击的数值@Link woodenFishNum: numberbuild() {Column() {Row() {Text('愿望:').fontSize(17).fontWeight(600)Radio({ value: '功德', group: 'word' }).checked(true).onChange((isChecked: boolean) => {if(isChecked) {this.woodenFishType = 0}})Text('功德').fontSize(15)Radio({ value: '财富', group: 'word' }).onChange((isChecked: boolean) => {if(isChecked) {this.woodenFishType = 1}})Text('财富').fontSize(15)Radio({ value: '桃花运', group: 'word' }).onChange((isChecked: boolean) => {if(isChecked) {this.woodenFishType = 2}})Text('桃花运').fontSize(15)}.width('100%').margin({bottom: 12}).justifyContent(FlexAlign.Start)Row() {Text('数值:').fontSize(16).fontWeight(600)TextInput({text:'1'}).type(InputType.Number).width(180).onChange((value: string) => {this.woodenFishNum = parseInt(value)})}.width('100%').margin({bottom: 12}).justifyContent(FlexAlign.Start)Row() {Text('音效:').fontSize(16).fontWeight(600)Toggle({ type: ToggleType.Switch })}.width('100%').margin({bottom: 12}).justifyContent(FlexAlign.Start)Row() {Text('皮肤:').fontSize(16).fontWeight(600)Radio({ value: '默认', group: 'skin' }).checked(true)Text('木鱼').fontSize(15)Radio({ value: '悟空', group: 'skin' })Text('黑悟空').fontSize(15)Radio({ value: '典韦', group: 'skin' })Text('典韦').fontSize(15)}.width('100%').margin({bottom: 12}).justifyContent(FlexAlign.Start)}.padding({top: 28, left: 15})}
}

这里需要注意的是:父子组件的数据传递。因为自定义弹窗和木鱼是两个不同的组件,而点击弹窗中的比如类型切换或修改的数值,全部要更新到木鱼组件的展示当中。

当然鸿蒙也提供了 @Link 装饰器,用于与其父组件中的数据源共享相同的值,可以结合上面代码和下方截图参考其用法。

写在后面

到这里,一个通用型的鸿蒙 Next 版电子木鱼就完成了。不管是组件交互还是布局都还好,唯一让我觉得不适应的是动画特效。
如果用这种方式实现电子烟花肯定不行,所以下次将换一种方法快速实现烟花秀,以及页面间的跳转,待更新~

相关文章:

鸿蒙 Next 实战: 电子木鱼

前言 正所谓:Hello Word 是程序员学任何一门语言的第一个程序实践。这其实也是一个不错的正反馈,那如何让学习鸿蒙 Next 更有成就感呢?下面就演示一下从零开发一个鸿蒙 Next 版的电子木鱼,主打就是一个抽象! 实现要点…...

SQLite SQL调优指南及高级SQL技巧

记忆已更新 以下是《SQLite SQL调优指南及高级SQL技巧》文章的完整输出,字数目标为30000字,详细介绍并结合2024年最新技术趋势和优化策略。代码部分不计入字数统计。 SQLite SQL调优指南及高级SQL技巧 SQLite 是广泛使用的嵌入式数据库,因其…...

WordPress 6.7即将发布的新功能(和截图)

我们一直在密切关注 WordPress 6.7 的开发并测试该版本的测试版,它将带来一些令人兴奋的更新和几个新功能。 例如,我们很高兴地发现即将发布的版本将附带全新的默认主题,并对块编辑器和站点编辑体验进行大规模改进。 在本文中,我…...

SpringBoot整合QQ邮箱

SpringBoot可以通过导入依赖的方式集成多种技术,这当然少不了我们常用的邮箱,现在本章演示SpringBoot整合QQ邮箱发送邮件.... 下面按步骤进行: 1.获取QQ邮箱授权码 1.1 登录QQ邮箱 1.2 开启SMTP服务 找到下图中的SMTP服务区域,…...

低质量数据的多模态融合方法

目录 多模态融合 低质量多模态融合的核心挑战 噪声多模态数据学习 缺失模态插补 平衡多模态融合 动态多模态融合 启发式动态融合 基于注意力的动态融合 不确定性感知动态融合 论文 多模态融合 多模态融合侧重于整合多种模态的信息,以实现更准确的预测,在自动驾驶、…...

计算机毕业设计 基于Django的在线考试系统的设计与实现 Python+Django+Vue 前后端分离 附源码 讲解 文档

🍊作者:计算机编程-吉哥 🍊简介:专业从事JavaWeb程序开发,微信小程序开发,定制化项目、 源码、代码讲解、文档撰写、ppt制作。做自己喜欢的事,生活就是快乐的。 🍊心愿:点…...

Shell脚本linux登录自动检查

.bashrc 用于设置用户的 Bash shell 环境&#xff0c;在每次打开一个新的终端窗口或启动一个新的 Bash 会话时被执行 代码 login_check.sh #!/bin/bash clear LogFileNamepolling.$(date %F-%T) EchoFormat$(for (( i0; i<30; i )); do echo -n ""; done)# 显示…...

Golang | Leetcode Golang题解之第450题删除二叉搜索树的节点

题目&#xff1a; 题解&#xff1a; func deleteNode(root *TreeNode, key int) *TreeNode {var cur, curParent *TreeNode root, nilfor cur ! nil && cur.Val ! key {curParent curif cur.Val > key {cur cur.Left} else {cur cur.Right}}if cur nil {retur…...

Linux 之 Linux应用编程概念、文件IO、标准IO

Linux应用编程概念、文件IO、标准IO 学习任务&#xff1a; 1、 学习Linux 应用开发概念&#xff0c;什么是系统调用&#xff0c;什么是库函数 2、 学习文件IO&#xff1a;包括 read、write、open、close、lseek 3、 深入文件IO&#xff1a;错误处理、exit 等 4、 学习标准IO&a…...

PDF处理技巧:Windows电脑如何选择合适的 PDF 编辑器

您可以阅读本文以了解用于在 PC 上编辑 PDF 的顶级免费软件&#xff0c;而无需花费任何费用即可轻松进行快速编辑、拆分、合并、注释、转换和共享您的 PDF。 PDF 或可移植文档文件是由 Adobe 创建的一种多功能文件格式。它可以帮助您轻松可靠地交换文档&#xff0c;无论相关方…...

【c++】初步了解类和对象2

1、类的作用域 类定义了一个新的作用域&#xff0c;类的所有成员都在类的作用域中。在类体外定义成员时&#xff0c;需要使用 :: 作用域操作符指明成员属于哪个类域。 如图&#xff0c;此时在类内声明了函数firstUniqChar()&#xff0c;在类外进行了函数体的具体定义。 但是却…...

Python库pandas之四

Python库pandas之四 输入/输出read_json函数应用实列 输入/输出 read_json 函数 词法&#xff1a;pandas.read_json(path_or_buf, *, orientNone, typ‘frame’, dtypeNone, convert_axesNone, convert_datesTrue, keep_default_datesTrue, precise_floatFalse, date_unitNo…...

网络攻防技术--第三次作业

文章目录 第三次作业一、通过搜索引擎搜索自己在因特网上的足迹&#xff0c;并确认是否存在隐私和敏感信息泄露问题。如果有信息泄露&#xff0c;提出解决方法。二、结合实例总结web搜索和挖掘的方法。三、网络扫描有哪几种类型&#xff1f;分别有什么作用&#xff1f;利用一种…...

带隙基准Bandgap电路学习(一)

一、原理图 Bandgap中的运放&#xff08;折叠式Cascode&#xff09;采用P输入对&#xff0c;是因为运放输入端接的PNP三极管发射极端的电位&#xff0c;电压小&#xff0c;为了确保输入对管能够饱和工作&#xff0c;故采用P输入对管。此外&#xff0c;P管作为输入管&#xff0c…...

[前端][easyui]easyui select 默认值

function initRegion(key, val) {$(#Region).combobox({url: path /getTypeVaule.do?itemregion&key key "&value" val,editable: false, //不可编辑状态cache: false,valueField: TEMID,textField: TEMID,loadFilter: function (data) {data.unshift({…...

项目开发--大模型--个人问答知识库--chain控制

背景 1、langchain当中的chain prompt | llm | output_parser这个链能更长吗&#xff1f; 在 LangChain 中&#xff0c;链&#xff08;chain&#xff09;可以根据需要变得非常长&#xff0c;并且可以包含多种不同类型的组件。链的目的是将多个步骤串联起来&#xff0c;以便以…...

STM32—SPI通讯协议

前言 由于I2C开漏外加上拉电阻的电路结构&#xff0c;使得通信线高电平的驱动能力比较弱&#xff0c;这就会号致&#xff0c;通信线由候电平变到高电平的时候&#xff0c;这个上升沿耗时比较长&#xff0c;这会限制I2C的最大通信速度&#xff0c; 所以&#xff0c;I2C的标准模…...

Android 安装过程五 MSG_INSTALL消息的处理 安装

现在马上进入正式的安装流程。   从前面文章 Android 安装过程四 MSG_INSTALL消息的处理 安装之前的验证知道&#xff0c;在验证之后没有什么问题的情况下&#xff0c;会回调onVerificationComplete()方法&#xff0c;它位于PackageInstallerSession类中。 private void onVe…...

大数据开发--1.3 Linux的常用命令大全

目录 一. 终端命令格式 命令格式 说明&#xff1a; 二. 显示文件列表命令 -ls 作用 格式 ls常用选项 案例 三. 目录操作命令 -pwd 作用 格式 案例 四. 目录操作命令 -cd 作用 格式 案例 五. 目录操作命令 -mkdir 作用 格式 案…...

使用PuTTY连接到Amazon Linux实例

PuTTY 是一款免费的 SSH 客户端&#xff0c;广泛用于从 Windows 系统连接到 Linux 实例。如果你使用的是 Windows Server 2019 或更高版本&#xff0c;可以考虑使用内置的 OpenSSH 工具&#xff0c;但 PuTTY 依然是一个非常受欢迎的选择。 一、先决条件 在使用 PuTTY 连接到 …...

PyTorch 2.8镜像参数详解:CUDA 12.4驱动550.90.07环境兼容性避坑指南

PyTorch 2.8镜像参数详解&#xff1a;CUDA 12.4驱动550.90.07环境兼容性避坑指南 1. 镜像核心配置解析 PyTorch 2.8深度学习镜像是一个经过深度优化的通用计算环境&#xff0c;专为现代AI工作负载设计。这个镜像最显著的特点是完整适配NVIDIA最新计算架构&#xff0c;基于RTX…...

如何用思源宋体CN打造专业级中文字体解决方案?开源字体的技术优势与实战指南

如何用思源宋体CN打造专业级中文字体解决方案&#xff1f;开源字体的技术优势与实战指南 【免费下载链接】source-han-serif-ttf Source Han Serif TTF 项目地址: https://gitcode.com/gh_mirrors/so/source-han-serif-ttf 在数字化内容创作中&#xff0c;中文字体的选择…...

AI万能分类器应用解析:零样本分类在舆情分析中的实际价值

AI万能分类器应用解析&#xff1a;零样本分类在舆情分析中的实际价值 1. 引言 每天&#xff0c;互联网上产生数以亿计的文本数据——社交媒体评论、新闻报道、用户反馈、论坛讨论...这些数据蕴含着宝贵的舆情信息&#xff0c;但如何从中快速识别关键话题和情感倾向&#xff0…...

JL杰理AC696N系列开发GPIO使用指南:模式、配置与特殊IO

引言GPIO是嵌入式开发最基础也最容易出问题的部分。拉高拉低看起来简单&#xff0c;但驱动能力不够、上下拉没配对、特殊引脚没处理&#xff0c;经常导致外设工作不正常或者功耗异常。JL杰理AC696N的GPIO功能挺全的&#xff0c;有普通、强、超强三种驱动能力&#xff0c;还支持…...

LiuJuan20260223Zimage实战:如何通过Gradio界面生成高质量人像图片

LiuJuan20260223Zimage实战&#xff1a;如何通过Gradio界面生成高质量人像图片 1. 认识LiuJuan20260223Zimage模型 LiuJuan20260223Zimage是一个基于Z-Image模型并融合LoRA技术的文生图模型&#xff0c;专门用于生成特定风格的人像图片。这个模型最大的特点是&#xff1a; 专…...

深度解析JetBrains IDE试用期重置:3种实用方案提升开发效率

深度解析JetBrains IDE试用期重置&#xff1a;3种实用方案提升开发效率 【免费下载链接】ide-eval-resetter 项目地址: https://gitcode.com/gh_mirrors/id/ide-eval-resetter JetBrains IDE试用期重置工具是一款开源项目&#xff0c;专为开发者提供重置IntelliJ IDEA、…...

从IDEA到K8s:飞算JavaAI如何打通微服务开发的“最后一公里”

云原生时代的一站式开发革命&#xff1a;当JavaAI遇上Kubernetes 在数字化转型的浪潮中&#xff0c;微服务架构已成为企业技术栈的标配&#xff0c;但随之而来的开发复杂度却让许多团队陷入"最后一公里"困境。传统开发流程中&#xff0c;从本地编码到云端部署需要跨…...

JetBrains IDE试用期管理完全指南:从技术原理到合规使用

JetBrains IDE试用期管理完全指南&#xff1a;从技术原理到合规使用 【免费下载链接】ide-eval-resetter 项目地址: https://gitcode.com/gh_mirrors/id/ide-eval-resetter 一、问题导入&#xff1a;当试用期结束打断开发流程时 1.1 开发中断的典型场景 想象这样一个…...

为什么你的ranges::filter_view在C++27中突然崩溃?——深度逆向Clang 18.1.8 ABI变更引发的迭代器失效链

第一章&#xff1a;C27范围库扩展演进与ABI稳定性危机C27正以前所未有的力度重构范围&#xff08;Ranges&#xff09;库&#xff0c;引入std::ranges::zip_view的标准化、std::ranges::cartesian_product视图、以及支持异构比较的std::ranges::sort重载。这些增强显著提升了表达…...

手把手教你用Unsloth:DeepSeek、Qwen等模型快速微调入门

手把手教你用Unsloth&#xff1a;DeepSeek、Qwen等模型快速微调入门 1. Unsloth简介与核心优势 Unsloth是一个专注于优化大型语言模型(LLM)训练和微调效率的开源工具。它通过算法创新显著降低显存占用、提升训练速度&#xff0c;同时保持模型精度无损。相比传统方法&#xff…...