您的位置 首页 电子技术

如何在OpenHarmony中实现音乐播放、显示动画、动画转场

  上一章我们讲解了应用编译环境准备,设备编译环境准备,开发板烧录,将一个最简单的 OpenAtom OpenHarmony(以下简称“OpenHarmony”)程序安装到我们的标准设备上。\” />

<meta http-equiv=X-UA-Compatible content=\"IE=edge,chrome=1

上一章我们讲解了应用编译环境准备,设备编译环境准备,开发板烧录,将一个最简单的 OpenAtom OpenHarmony(以下简称“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().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 = trueprivate controller: CustomDialogController@Consume deviceList: RemoteDevice[]private confirm: () => voidprivate 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 条目所构成。具体代码如下:

@Componentstruct GoodsHome {  private goodsItems: GoodsData[]  @Consume ShoppingCartsGoods :any[]  build() {    Column() {      Tabs() {        TabContent() {          GoodsList({ goodsItems: this.goodsItems});        }        .tabBar(\"畅销榜\")        .backgroundColor(Color.White)        TabContent() {          GoodsList({ goodsItems: this.goodsItems});        }        .tabBar(\"推荐\")        .backgroundColor(Color.White)      }      .barWidth(500)      .barHeight(50)      .scrollable(true)      .barMode(BarMode.Scrollable)      .height(\'980lpx\')    }    .alignItems(HorizontalAlign.Start)    .width(\'100%\')  }}

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

@Componentstruct 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 布局代码。具体代码如下:

@Componentstruct 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 中如何实现多台设备间的数据同步更新。

原文标题:OpenHarmony标准设备应用开发(二)——布局、动画与音乐

文章出处:【微信公众号:HarmonyOS官方合作社区】欢迎添加关注!文章转载请注明出处。

审核编辑:汤梓红

免责声明:文章内容不代表本站立场,本站不对其内容的真实性、完整性、准确性给予任何担保、暗示和承诺,仅供读者参考,文章版权归原作者所有。如本文内容影响到您的合法权益(内容、图片等),请及时联系本站,我们会及时删除处理。

作者: admin

为您推荐

智慧路灯照明系统的应用为智慧城市的发展建设添砖加瓦

智慧路灯照明系统的应用为智慧城市的发展建设添砖加瓦

智慧路灯照明系统的应用为智慧城市的发展建设添砖加瓦-夜间的路灯不仅照亮了黑暗的街道,而且照亮了回家的道路。从街上望去,闪烁的路灯发出暖光,指引着我们家的方向。城市里的路灯就像“守护者”,给长途旅行回来的游客带来了极大的安全感。 当今,路灯智能控制时代的到来,极大地促进了传统路灯的人工机械化运行。虽然对此感到兴奋,但我们不禁要问:随着路灯智能控制的早期到来,除了改善路灯的运行模式,还能带来什么? 为城市交通提供安全保障 城市公共照明系统中的智能路灯在每个路

晶振在五种不同行业中的应用说明

晶振在五种不同行业中的应用说明-晶振在五种不同行业的应用-由TST嘉硕代理KOYU光与电子

几种不同的物联网控制APP模式

本文就简单介绍当前几种物联网控制APP模式,让大家了解几种不同的技术路线。\” />

<meta http-equiv=X-UA-Compatible content=\"IE=edge,chrome=1

苹果稳坐全球可穿戴设备数量首位,占据日本市场超7成份额

苹果稳坐全球可穿戴设备数量首位,占据日本市场超7成份额

苹果公司占据2021年日本第四季度可穿戴设备71.5%份额,占据全球可穿戴设备市场34.9%份额。\” />

<meta http-equiv=X-UA-Compatible content=\"IE=edge,chrome=1

如何用GPUDirect存储器如何缓解CPU I / O瓶颈

除了使用 GPUs 而不是 CPU 加快计算的好处外,一旦整个数据处理管道转移到 GPU 执行,直接存储就起到了一个力倍增器的作用。这一点变得尤为重要,因为数据集大小不再适合系统内存,而且 GPUs 的数据 I / O 增长成为处理时间的瓶颈。当人工智能和数据科学继续重新定义可能的艺术时,启用直接路径可以减少甚至完全缓解这个瓶颈。\” />

<meta http-equiv=X-UA-Compatible content=\"IE=edge,chrome=1

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注

返回顶部