OpenHarmony标准设备应用开发（二）——布局、动画与音乐

本章是 OpenHarmony 标准设备应用开发的第二篇文章。我们通过知识体系新开发的几个基于 OpenHarmony3.1 Beta 标准系统的样例：分布式音乐播放、传炸弹、购物车等样例，分别介绍下音乐播放、显示动画、动画转场（页面间转场）三个进阶技能。首先我们来讲如何在 OpenHarmony 中实现音乐的播放。

一、分布式音乐播放

通过分布式音乐播放器，大家可以学到一些 ArkUI 组件和布局在 OpenHarmony 中是如何使用的，以及如何在自己的应用中实现音乐的播放，暂停等相关功能。应用效果如下图所示：

1.1 界面布局

整体布局效果如下图所示：

首先是页面整体布局，部分控件是以模块的方式放在整体布局中的，如 operationPannel()、sliderPannel()、playPannel() 模块。页面整体布是由 Flex 控件中，包含 Image、Text 以及刚才所说的三个模块所构成。

build() {Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceBetween }) {Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center }) {Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.End }) {Image($r("app.media.icon_liuzhuan")).width(32).height(32)}.padding({ right: 32 }).onClick(() => {this.onDistributeDevice()})Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.Center }) {Image($r("app.media.Bg_classic")).width(312).height(312)}.margin({ top: 24 })Text(this.currentMusic.name).fontSize(20).fontColor("#e6000000").margin({ top: 10 })Text("未知音乐家").fontSize(14).fontColor("#99000000").margin({ top: 10 })}.flexGrow(1)Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.End }) {this.operationPannel()this.sliderPannel()this.playPannel()}.height(200)}.linearGradient({angle: 0,direction: GradientDirection.Bottom,colors: this.currentMusic.backgourdColor}).padding({ top: 48, bottom: 24, left: 24, right: 24 }).width('100%').height('100%')}

operationPannel() 模块的布局，该部分代码对应图片中的心形图标，下载图标，评论图标更多图标这一部分布局。其主要是在 Flex 中包含 Image 所构成代码如下：

@Builder operationPannel() {Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceBetween }) {Image($r("app.media.icon_music_like")).width(24).height(24)Image($r("app.media.icon_music_download")).width(24).height(24)Image($r("app.media.icon_music_comment")).width(24).height(24)Image($r("app.media.icon_music_more")).width(24).height(24)}.width('100%').height(49).padding({ bottom: 25 })}

sliderPannel() 模块代码布局。该部分对应图片中的显示播放时间那一栏的控件。整体构成是在 Flex 中，包含 Text、Slider、Text 三个控件。具体代码如下：

@Builder sliderPannel() {Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {Text(this.currentTimeText).fontSize(12).fontColor("ff000000").width(40)Slider({value: this.currentProgress,min: 0,max: 100,step: 1,style: SliderStyle.INSET}).blockColor(Color.White).trackColor(Color.Gray).selectedColor(Color.Blue).showSteps(true).flexGrow(1).margin({ left: 5, right: 5 }).onChange((value: number, mode: SliderChangeMode) => {if (mode == 2) {CommonLog.info('aaaaaaaaaaaaaa1: ' + this.currentProgress)this.onChangeMusicProgress(value, mode)}})Text(this.totalTimeText).fontSize(12).fontColor("ff000000").width(40)}.width('100%').height(18)}

playPannel() 模块代码对应图片中的最底部播放那一栏五个图标所包含的一栏。整体布局是 Flex 方向为横向，其中包含五个 Image 所构成。具体代码如下：

@Builder playPannel() {Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceBetween }) {Image($r("app.media.icon_music_changemode")).width(24).height(24).onClick(() => {this.onChangePlayMode()})Image($r("app.media.icon_music_left")).width(32).height(32).onClick(() => {this.onPreviousMusic()})Image(this.isPlaying ? $r("app.media.icon_music_play") : $r("app.media.icon_music_stop")).width(80).height(82).onClick(() => {this.onPlayOrPauseMusic()})Image($r("app.media.icon_music_right")).width(32).height(32).onClick(() => {this.onNextMusic()})Image($r("app.media.icon_music_list")).width(24).height(24).onClick(() => {this.onShowMusicList()})}.width('100%').height(82)}

希望通过上面这些布局的演示，可以让大家学到一些部分控件在 OpenHarmony 中的运用，这里使用的 Arkui 布局和 HarmonyOS* 是一致的，目前 HarmonyOS* 手机还没有发布 Arkui 的版本，大家可以在 OpenHarmony 上抢先体验。常用的布局和控件还有很多，大家可以在下面的链接中找到更多的详细信息。

*编者注：HarmonyOS 是基于开放原子开源基金会旗下开源项目 OpenHarmony 开发的面向多种全场景智能设备的商用版本。是结合其自有特性和能力开发的新一代智能终端操作系统。

1.2 播放音乐

play(seekTo) {if (this.player.state == 'playing' && this.player.src == this.getCurrentMusic().url) {return}if (this.player.state == 'idle' || this.player.src != this.getCurrentMusic().url) {CommonLog.info('Preload music url = ' + this.getCurrentMusic().url)this.player.reset()this.player.src = this.getCurrentMusic().urlthis.player.on('dataLoad', () => {CommonLog.info('dataLoad duration=' + this.player.duration)this.totalTimeMs = this.player.durationif (seekTo > this.player.duration) {seekTo = -1}this.player.on('play', (err, action) => {if (err) {CommonLog.info(`MusicPlayer[PlayerModel] error returned in play() callback`)return}if (seekTo > 0) {this.player.seek(seekTo)}})this.player.play()this.statusChangeListener()this.setProgressTimer()this.isPlaying = true})}else {if (seekTo > this.player.duration) {seekTo = -1}this.player.on('play', (err, action) => {if (err) {CommonLog.info(`MusicPlayer[PlayerModel] error returned in play() callback`)return}if (seekTo > 0) {this.player.seek(seekTo)}})this.player.play()this.setProgressTimer()this.isPlaying = true}}

1.3 音乐暂停

pause() {CommonLog.info("pause music")this.player.pause();this.cancelProgressTimer()this.isPlaying = false}

接下来我们讲解如何在 OpenHarmony 中实现显示动画的效果。

二、显示动画

我们以传炸弹小游戏中的显示动画效果为例，效果如下图所示。

通过本小节，大家在上一小节的基础上，学到更多 ArkUI 组件和布局在 OpenHarmony 中的应用，以及如何在自己的应用中实现显示动画的效果。

实现步骤：

**2.1 编写弹窗布局：**将游戏失败文本、炸弹图片和再来一局按钮图片放置于 Column 容器中；

**2.2 用变量来控制动画起始和结束的位置：**用 Flex 容器包裹炸弹图片，并用 @State 装饰变量 toggle，通过变量来动态修改 Flex 的 direction 属性；布局代码如下：

@State toggle: boolean = true
private controller: CustomDialogController
@Consume deviceList: RemoteDevice[]
private confirm: () => void
private interval = nullbuild() {Column() {Text('游戏失败').fontSize(30).margin(20)Flex({direction: this.toggle ? FlexDirection.Column : FlexDirection.ColumnReverse,alignItems: ItemAlign.Center}){Image($r("app.media.bomb")).objectFit(ImageFit.Contain).height(80)}.height(200)Image($r("app.media.btn_restart")).objectFit(ImageFit.Contain).height(120).margin(10).onClick(() => {this.controller.close()this.confirm()})}.width('80%').margin(50).backgroundColor(Color.White)
}

**2.3 设置动画效果：**使用 animateTo 显式动画接口炸弹位置切换时添加动画，并且设置定时器定时执行动画，动画代码如下：

aboutToAppear() {this.setBombAnimate()
}setBombAnimate() {let fun = () => {this.toggle = !this.toggle;}this.interval = setInterval(() => {animateTo({ duration: 1500, curve: Curve.Sharp }, fun)}, 1600)
}

三、转场动画（页面间转场）

我们同样希望在本小节中，可以让大家看到更多的 ArkUI 中的组件和布局在 OpenHarmony 中的使用，如何模块化的使用布局，让自己的代码更简洁易读，以及在应用中实现页面间的转场动画效果。

下图是分布式购物车项目中的转场动画效果图：

页面布局效果图：

整体布局由 Column、Scroll、Flex、Image 以及 GoodsHome()、MyInfo()、HomeBottom() 构成，该三个模块我们会分别说明。具体代码如下：

build() {Column() {Scroll() {Column() {if (this.currentPage == 1) {Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.End }) {Image($r("app.media.icon_share")).objectFit(ImageFit.Cover).height('60lpx').width('60lpx')}.width("100%").margin({ top: '20lpx', right: '50lpx' }).onClick(() => {this.playerDialog.open()})GoodsHome({ goodsItems: this.goodsItems})}else if (this.currentPage == 3) {//我的MyInfo()}}.height('85%')}.flexGrow(1)HomeBottom({ remoteData: this.remoteData})}.backgroundColor("white")}

GoodsHome() 模块对应效果图中间显示商品的部分，其主要结构为 TabContent 中包含的两个 List 条目所构成。具体代码如下：

build() {Column() {Scroll() {Column() {if (this.currentPage == 1) {Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.End }) {Image($r("app.media.icon_share")).objectFit(ImageFit.Cover).height('60lpx').width('60lpx')}.width("100%").margin({ top: '20lpx', right: '50lpx' }).onClick(() => {this.playerDialog.open()})GoodsHome({ goodsItems: this.goodsItems})}else if (this.currentPage == 3) {//我的MyInfo()}}.height('85%')}.flexGrow(1)HomeBottom({ remoteData: this.remoteData})}.backgroundColor("white")}

上面代码中的 GoodsList() 为每个 list 条目对应显示的信息，会便利集合中的数据，然后显示在对用的 item 布局中，具体代码如下：

@Component
struct GoodsList {private goodsItems: GoodsData[]@Consume ShoppingCartsGoods :any[]build() {Column() {List() {ForEach(this.goodsItems, item => {ListItem() {GoodsListItem({ goodsItem: item})}}, item => item.id.toString())}.width('100%').align(Alignment.Top).margin({ top: '10lpx' })}}
}

最后就是 list 的 item 布局代码。具体代码如下：

@Component
struct GoodsListItem {private goodsItem: GoodsData@State scale: number = 1@State opacity: number = 1@State active: boolean = false@Consume ShoppingCartsGoods :any[]build() {Column() {Navigator({ target: 'pages/DetailPage' }) {Row({ space: '40lpx' }) {Column() {Text(this.goodsItem.title).fontSize('28lpx')Text(this.goodsItem.content).fontSize('20lpx')Text('￥' + this.goodsItem.price).fontSize('28lpx').fontColor(Color.Red)}.height('160lpx').width('50%').margin({ left: '20lpx' }).alignItems(HorizontalAlign.Start)Image(this.goodsItem.imgSrc).objectFit(ImageFit.ScaleDown).height('160lpx').width('40%').renderMode(ImageRenderMode.Original).margin({ right: '20lpx', left: '20lpx' })}.height('180lpx').alignItems(VerticalAlign.Center).backgroundColor(Color.White)}.params({ goodsItem: this.goodsItem ,ShoppingCartsGoods:this.ShoppingCartsGoods}).margin({ left: '40lpx' })}}

**备注：**MyInfo() 模块对应的事其它也免得布局，这里就不做说明。

最后我们来说一下，页面间的页面间的转场动画，其主要是通过在全局 pageTransition 方法内配置页面入场组件和页面退场组件来自定义页面转场动效。具体代码如下：

// 转场动画使用系统提供的多种默认效果(平移、缩放、透明度等)pageTransition() {PageTransitionEnter({ duration: 1000 }).slide(SlideEffect.Left)PageTransitionExit({ duration: 1000  }).slide(SlideEffect.Right)}
}

为了帮助到大家能够更有效的学习OpenHarmony 开发的内容，下面特别准备了一些相关的参考学习资料：

OpenHarmony 开发环境搭建：https://qr18.cn/CgxrRy

《OpenHarmony源码解析》：https://qr18.cn/CgxrRy

  • 搭建开发环境
  • Windows 开发环境的搭建
  • Ubuntu 开发环境搭建
  • Linux 与 Windows 之间的文件共享
  • ……

系统架构分析：https://qr18.cn/CgxrRy

  • 构建子系统
  • 启动流程
  • 子系统
  • 分布式任务调度子系统
  • 分布式通信子系统
  • 驱动子系统
  • ……

OpenHarmony 设备开发学习手册：https://qr18.cn/CgxrRy

在这里插入图片描述

OpenHarmony面试题（内含参考答案）：https://qr18.cn/CgxrRy

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

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

相关文章

TypeScript学习日志-第二十四天（webpack构建ts+vue3）

TypeScript学习日志-第二十四天（webpack构建ts+vue3）

webpack构建tsvue3 一、构建项目目录 如图： shim.d.ts 这个文件用于让ts识别.vue后缀的 后续会说 并且给 tsconfig.json 增加配置项 "include": ["src/**/*"] 二、基础构建 安装依赖 安装如下依赖： npm install webpack -D …
阅读更多...
基于网络爬虫技术的网络新闻分析（二）

基于网络爬虫技术的网络新闻分析（二）

目录 2 系统需求分析 2.1 系统需求概述 2.2 系统需求分析 2.2.1 系统功能要求 2.2.2 系统IPO图 2.2 系统非功能性需求分析 3 系统概要设计 3.1 设计约束 3.1.1 需求约束 3.1.2 设计策略 3.1.3 技术实现 3.3 模块结构 3.3.1 模块结构图 3.3.2 系统层次图 3.3.3…
阅读更多...
VRRP虚拟路由器冗余协议

VRRP虚拟路由器冗余协议

VRRP概述 VRRP是什么 VRRP：虚拟路由器冗余协议过把几台路由设备联合组成一台虚拟的路由设备，将虚拟路由设备的IP地址作为用户的默认网关实现与外部网络通信当网关设备发生故障时，VRRP能够选举新的网关设备承担数据流量，从而保障…
阅读更多...
2024软件测试必问的常见面试题1000问！

2024软件测试必问的常见面试题1000问！

01、您所熟悉的测试用例设计方法都有哪些？请分别以具体的例子来说明这些方法在测试用例设计工作中的应用。 答：有黑盒和白盒两种测试种类，黑盒有等价类划分法，边界分析法，因果图法和错误猜测法。白盒有逻辑覆盖法&…
阅读更多...
大模型日报2024-05-15

大模型日报2024-05-15

大模型日报 2024-05-15 大模型资讯 OpenAI推出全新AI模型GPT-4o，具备文本、图像和音频处理能力 摘要: OpenAI公司继ChatGPT后，最新推出了名为GPT-4o的AI模型。这一模型不仅能够理解和生成文本，还新增了图像和音频的解释及生成功能。GPT-4o作为…
阅读更多...
【Web】CTFSHOW 单身杯 题解

【Web】CTFSHOW 单身杯 题解

目录 web签到 easyPHP 姻缘测试 web签到 用data协议包含php标签闭合 payload: filedata://text/plain,<?php system($_GET[1]);?>>?;)]1[TEG_$(metsys php?<,nialp/txet//:atadeasyPHP 一眼awk命令执行 payload: cmdawk&param{system("ta…
阅读更多...
基于单片机的智能安防系统设计（32+4G+WIFI版）-设计说明书

基于单片机的智能安防系统设计（32+4G+WIFI版）-设计说明书

设计摘要&#xff1a; 本设计基于STM32单片机&#xff0c;旨在实现一个智能安防系统&#xff0c;主要包括烟雾和温度传感器、人体红外传感器、显示屏、按键、4G模块和WiFi模块等组件。通过这些组件的协作&#xff0c;实现了火灾检测、入侵监测、状态显示、用户交互和远程通信等…
阅读更多...
静态NAT

静态NAT

哈喽&#xff01;各位小伙伴们好久不见&#xff0c;最近由于工作的原因断更了一段时间&#xff0c;不过最近我都会把这些给补上&#xff0c;今天我们来学习一个简单的知识——静态NAT转换。 第一章 什么是NAT技术&#xff1f; 网络地址转换技术NAT&#xff08;Networ…
阅读更多...
【RSGIS数据资源】2001-2021 年亚洲季风区主要国家作物种植制度数据集

【RSGIS数据资源】2001-2021 年亚洲季风区主要国家作物种植制度数据集

文章目录 1. 数据集概况2. 数据格式3. 文件名命名规则4. 数据生产服务单位5. 元数据6. 数据引用与参考文献引用 1. 数据集概况 2001-2021 年亚洲季风区主要国家作物种植制度数据集&#xff08;ACIA500&#xff09;是结合MODIS 影像和现有的土地利用等多源数据&#xff0c;基于…
阅读更多...
_pickle.UnpicklingError: STACK_GLOBAL requires str

_pickle.UnpicklingError: STACK_GLOBAL requires str

导致这个报错的原因是我跑yolo的时候修改数据集了&#xff0c;里面的label.cache没有删除&#xff0c;咱只要删除掉缓存就行&#xff01;&#xff01; 我这里是已经删除掉了&#xff0c;所以图片里面没有&#xff0c;一般就是在箭头所示位置有.cache文件的
阅读更多...
Docker常用镜像安装

Docker常用镜像安装

1. mysql 1.1 安装 获取镜像 docker pull mysql:8.0.30创建文件挂载目录 创建容器并运行 docker run -p 3306:3306 --name mysql8 \ -v /home/docker/mysql8/log:/var/log/mysql \ -v /home/docker/mysql8/data:/var/lib/mysql \ -v /home/docker/mysql8/mysql-files:/va…
阅读更多...
【Linux】系统登录，调用shell，shell配置文件，shell命令，特殊符号，shell快捷键，Linux运行级别，解决无限登录问题，修改提示符

【Linux】系统登录，调用shell，shell配置文件，shell命令，特殊符号，shell快捷键，Linux运行级别，解决无限登录问题，修改提示符

目录 Linux系统的登录方式 以及 调用shell Linux shell 以及 shell配置文件 shell 命令 shell 特殊符号 shell 快捷键 Linux操作系统运行级别 单用户模式下解决无限登录问题 centos7修改命令行提示符 PS1 补充、centos7没有滚动条 Linux系统的登录方式 以及 调用shell…
阅读更多...
Python进度条工具——tqdm

Python进度条工具——tqdm

原文链接&#xff1a;http://www.juzicode.com/python-note-tqdm 在安装Python库文件的时候我们经常可以看到这种进度条&#xff1a; 其实Python库中就自带了现成的工具库——tqdm。 tqdm读起来比较拗口&#xff0c;它是从“进程”的阿拉伯语taqaddum简化而来。 安装tqdm 使用…
阅读更多...
es 分词器（五）之elasticsearch-analysis-jieba 8.7.0

es 分词器（五）之elasticsearch-analysis-jieba 8.7.0

es 分词器&#xff08;五&#xff09;之elasticsearch-analysis-jieba 8.7.0 今天咱们就来讲一下es jieba 8.7.0 分词器的实现&#xff0c;以及8.x其它版本的实现方式&#xff0c;如果想直接使用es 结巴8.x版本&#xff0c;请直接修改pom文件的elasticsearch.version版本号即可…
阅读更多...
OpenCV Radon变换探测直线（拉东变换）

OpenCV Radon变换探测直线（拉东变换）

文章目录 一、简介二、实现代码三、实现效果参考资料一、简介 Radon变换可以将原始图像中直线特征的处理问题转化为变换域图像中对应点特征的处理问题，其中对应特征点的横坐标表示原始图像的旋转角度，一般来讲原始图像中的噪声不会分布在直线的特征上。因此，Radon变换在探测…
阅读更多...
Spring Cloud Alibaba 网关 Gateway 集成（7）

Spring Cloud Alibaba 网关 Gateway 集成（7）

项目的源码地址 Spring Cloud Alibaba 工程搭建&#xff08;1&#xff09; Spring Cloud Alibaba 工程搭建连接数据库&#xff08;2&#xff09; Spring Cloud Alibaba 集成 nacos 以及整合 Ribbon 与 Feign 实现负载调用&#xff08;3&#xff09; Spring Cloud Alibaba Ribbo…
阅读更多...
网络 | 应用层-websocket协议概述与握手过程解析

网络 | 应用层-websocket协议概述与握手过程解析

背景&#xff1a;这里为了实现消息实时传输决定引入websocket协议。 不管是发送消息还是接收消息&#xff0c;都需要实时传输&#xff0c;张三发给李四&#xff0c;李四立马就能收到&#xff0c;基于HTTP实现是有些困难的。 但轮询方式也带来了一些问题 1、消耗更多系统资源&…
阅读更多...
【Shell脚本】Shell编程之数组

【Shell脚本】Shell编程之数组

目录 一.数组 1.基本概念 2.定义数组的方法 2.1.方法一 2.2.方法二 2.3.方法三 2.4.方法四 2.5.查看数组长度 2.6.查看数组元素下标 3.数组分片 4.数组字符替换 4.1.临时替换 4.2.永久替换 5.数组删除 5.1.删除某个下标 5.2.删除整组 6.数组遍历和重新定义 7…
阅读更多...
每日Attention学习4——Spatial Attention Module

每日Attention学习4——Spatial Attention Module

模块出处 [link] [code] [MM 21] Complementary Trilateral Decoder for Fast and Accurate Salient Object Detection 模块名称 Spatial Attention Module (SAM) 模块作用 空间注意力 模块结构 模块代码 import torch import torch.nn as nn import torch.nn.functional a…
阅读更多...
ubuntu下不生成core dumped

ubuntu下不生成core dumped

1、先用ulimit -c&#xff0c;如果看到0&#xff0c;说明没有开core dump。 所以我们输入ulimit -c unlimited&#xff0c;打开core dump。 再次用ulimit -c&#xff0c;看到unlimited了&#xff0c;说明core dump打开了。 注意这句ulimit -c unlimited只对当前会话有效。要永…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023