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

news2025/1/19 17:23:08

本章是 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().url
      this.player.on('dataLoad', () => {
        CommonLog.info('dataLoad duration=' + this.player.duration)
        this.totalTimeMs = this.player.duration
        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.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 = null

build() {
   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.coloradmin.cn/o/1682244.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Qwen学习笔记2：Qwen模型基于ReAct原理实现function calling

Qwen学习笔记2：Qwen模型基于ReAct原理实现function calling

前言 这也是一篇笔记，再探索一下Qwen模型的function calling功能。 Qwen1.8B模型能够进行function calling功能吗？ 我们使用之前的reason_prompt模板进行测试： PROMPT_REACT """ Use the following format:Question: the…
阅读更多...
AWS RDS ElasticCache 监控可观测最佳实践

AWS RDS ElasticCache 监控可观测最佳实践

在当今的电子商务时代，一个高效、稳定的电商平台对于保持竞争力至关重要。数据库作为电商平台的核心支撑，其性能直接影响到用户体验和业务流畅度。本文将深入探讨如何在电商场景下通过观测云对亚马逊云科技 RDS（MySQL） 和 Elastic…
阅读更多...
python怎么安装matplotlib

python怎么安装matplotlib

1、登陆官方网址“https://pypi.org/project/matplotlib/#description”，下载安装包。 2、选择合适的安装包，下载下来。 3、将安装包放置到python交互命令窗口的当前目录下。 4、打开windows的命令行窗口，通过"pip install"这个命令…
阅读更多...
八分钟“手撕”包装类与泛型

八分钟“手撕”包装类与泛型

目录 一、包装类 基本数据类型和对应的包装类 装箱和拆箱 【思考题】 二、泛型 什么是泛型 引出泛型 怎么定义泛型和使用泛型 裸类型(Raw Type) 擦除机制 额外，注意下列代码： 泛型的上界 泛型的接口应用 泛型方法 一、包装类 简单来…
阅读更多...
OpenHarmony 3GPP协议开发深度剖析——一文读懂RIL

OpenHarmony 3GPP协议开发深度剖析——一文读懂RIL

市面上关于终端（手机）操作系统在 3GPP 协议开发的内容太少了，即使 Android 相关的学习文档都很少，Android 协议开发书籍我是没有见过的。可能是市场需求的缘故吧，现在市场上还是前后端软件开发从业人员最多&#xff0c…
阅读更多...
Hotcoin Research｜玩赚WEB3：探索Apeiron：颠覆传统的区块链游戏，融合神话与现代玩法

Hotcoin Research｜玩赚WEB3：探索Apeiron：颠覆传统的区块链游戏，融合神话与现代玩法

1. 游戏概述 1.1 游戏类型与主题 Apeiron 是一款结合了上帝模拟、Roguelike、动作角色扮演（ARPG）和卡牌游戏元素的区块链游戏。这款游戏以独特的方式融合了多种游戏类型，提供了一个丰富多彩的神话宇宙，每个星系都受到不同现实世…
阅读更多...
JVM知识点及面试题补充

JVM知识点及面试题补充

JVM从软件层面屏蔽了不同操作系统的底层硬件与指令上的区别（所谓的Java跨平台能力） java中JRE（java运行时环境）包括java各种Libraries类库以及Java Virtual Machine（Java虚拟机）。 类加载子系统&#xff1…
阅读更多...
Pycharm 编辑器编码格式设置

Pycharm 编辑器编码格式设置

随笔 目录 1.背景 2. 修改编辑器编码设置 3. 最终修改 yml 写入 1.背景 由于写入yml文件中中文编码问题 ython 中讲数据写入yml 文件后，中文显示： "\u9A8C\u8BC1UDMA0_Tx_C0\u53D1\u9001\u6570\u636EUDMA0_Rx_C1\u65B9\u5411\u63A5\u6536\u65…
阅读更多...
总结目前开源的视频生成/视频编辑大模型

总结目前开源的视频生成/视频编辑大模型

Diffusion Models视频生成-博客汇总 前言：随着Sora的爆火，视频生成和视频编辑受到了越来越多的关注。这篇博客总结一下目前开源的视频生成和视频编辑的大模型，并分析他们各自的优缺点，以及在自己进行科研任务或者工作中应该如何选…
阅读更多...
Linux网络配置全攻略：解读/etc/network/interfaces文件的精髓

Linux网络配置全攻略：解读/etc/network/interfaces文件的精髓

欢迎来到我的博客，代码的世界里，每一行都是一个故事 Linux网络配置全攻略：解读/etc/network/interfaces文件的精髓 前言文件结构与基本概念配置网络接口的常用参数高级网络配置技巧实用工具与调试技巧实战案例与最佳实践 前言 在我们的日常生…
阅读更多...
PM入门必备| 怎么写产品分析报告？

PM入门必备| 怎么写产品分析报告？

​小陪老师，产品经理是做些什么的呢？我去面试应该准备些什么呢？ A: 首先要分清产品经理的类型，产品的面试需要准备的一般有Axure原型，需求文档，产品分析报告等，有些甚至需要展示项目经验。 tea…
阅读更多...
“遥遥领先” time.sleep(6)？

“遥遥领先” time.sleep(6)？

日前，在一场万众瞩目的发布会上，华为自信满满地揭开了其大模型文生图技术的神秘面纱。然而，演示期间一个不经意间闪现的time.sleep(6)代码片段，如同投入平静湖面的一颗石子，激起了业界对于演示真实性与技术底蕴的热烈探…
阅读更多...
Process Monitor下载安装使用教程（图文教程）超详细

Process Monitor下载安装使用教程（图文教程）超详细

「作者简介」：2022年北京冬奥会网络安全中国代表队，CSDN Top100，就职奇安信多年，以实战工作为基础对安全知识体系进行总结与归纳，著作适用于快速入门的 《网络安全自学教程》，内容涵盖系统安全、信息收集等…
阅读更多...
Ansys Mechanical｜中远程点的Behavior该如何设置？

Ansys Mechanical｜中远程点的Behavior该如何设置？

Remote point是ANSYS mechanical中的一种常见节点自由度耦合建模形式，在转动装配体中的连接转动副、或者在施加远端约束及远端载荷的时候，我们经常用到远端单元来耦合一个面或者一条线。例如销轴似的滚动摩擦连接，如果我们希望将两个物体通过…
阅读更多...
每日学习 - APK解包

每日学习 - APK解包

文章目录 APK的定义解析APKAPK 是什么每个文件的意义classes.dexAndroidManifest.xmlassetslibres & resources.arsc 反编译工具apktool apk解包 秒了~ APK的定义 APK（Android Package Kit）是用于部署和分发Android操作系统上应用程序的软件包格式。…
阅读更多...
ASTM通信协议校验和计算方法

ASTM通信协议校验和计算方法

Lis通信接口开发 <STX> FN <Frame> <ETB>or<ETX> <CS><CR> <LF> 其中&#xff1a; <STX>&#xff1a;起始帧头&#xff08;0x02&#xff09; FN&#xff1a;帧号&#xff08;范围0&#xff5e;7&#xff0c;1&#xff5e;7完…
阅读更多...
Winform自定义控件 —— 开关

Winform自定义控件 —— 开关

在开始阅读本文之前&#xff0c;如果您有学习创建自定义控件库并在其他项目中引用的需求&#xff0c;请参考&#xff1a;在Visual Studio中创建自定义Winform控件库并在其他解决方案中引用https://blog.csdn.net/YMGogre/article/details/126508042 0、引言 由于 Winform 框架并…
阅读更多...
Python代码：九、十六进制数字的大小

Python代码：九、十六进制数字的大小

1、题目 计算的世界&#xff0c;除了二进制与十进制&#xff0c;使用最多的就是十六进制了&#xff0c;现在使用input读入一个十六进制的数字&#xff0c;输出它的十进制数字是多少&#xff1f; 2、代码 import sysnum16 input() num10 int(num16,16) print(num10) 3、结…
阅读更多...
GAN实例基于神经网络

GAN实例基于神经网络

目录 1.前言 2.实验 1.前言 需要了解GAN的原理查看对抗生成网络&#xff08;GAN&#xff09;&#xff0c;DCGAN原理。 采用手写数字识别数据集 2.实验 import argparse import os import numpy as np import mathimport torchvision.transforms as transforms from torchvi…
阅读更多...
创维汽车总经理培训正式开展，打造新能源汽车销售的精英战队

创维汽车总经理培训正式开展，打造新能源汽车销售的精英战队

在新能源汽车市场竞争日益激烈的背景下&#xff0c;创维汽车为加强核心竞争力&#xff0c;于2024年5月15日至17日在河南省安阳市举办了为期三天的总经理岗位认证培训。此次培训旨在强化经销商店端负责人们在新能源汽车销售与运营方面的能力&#xff0c;指明未来发展思路&#x…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023