绑定完请刷新页面
取消
刷新
登录 | 注册

分享好友

×
取消 复制
OpenHarmony 标准设备应用开发（二）——布局、动画与音乐
2022-03-29 15:51:31

（以下内容来自开发者分享，不代表 OpenHarmony 项目群工作委员会观点）

邢碌

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


本章是 OpenHarmony 标准设备应用开发的第二篇文章。我们通过知识体系新开发的几个基于 OpenHarmony3.1 Beta 标准系统的样例：分布式音乐播放、传

https:炸dan

、购物车等样例，分别介绍下音乐播放、显示动画、动画转场（页面间转场）三个进阶技能。首先我们来讲如何在 OpenHarmony 中实现音乐的播放。


一、分布式音乐播放

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

1.1 界面布局

整体布局效果如下图所示

代码参考链接 ：https://gitee.com/openharmony-sig/knowledge_demo_temp/blob/master/FA/Entertainment/DistrubutedMusicPlayer/entry/src/main/ets/MainAbility/pages/index.ets
首先是页面整体布局，部分控件是以模块的方式放在整体布局中的，如 operationPannel()、sliderPannel()、playPannel() 模块。页面整体布是由 Flex 控件中，包含 Image、Text 以及刚才所说的三个模块所构成。

https:https:https:https:https:https:https:https:https:https:https:https:https:https:build() {
    https:https:https:https:https:https:https:https:https:https:https:https:https:https:Flex({ https:https:https:https:https:https:https:https:https:https:https:https:https:https:direction: FlexDirection.Column, https:https:https:https:https:https:https:https:https:https:https:https:https:https:alignItems: ItemAlign.Center, https:https:https:https:https:https:https:https:https:https:https:https:https:https:justifyContent: FlexAlign.SpaceBetween }) {
      https:https:https:https:https:https:https:https:https:https:https:https:https:https:Flex({ https:https:https:https:https:https:https:https:https:https:https:https:https:https:direction: FlexDirection.Column, https:https:https:https:https:https:https:https:https:https:https:https:https:https:alignItems: ItemAlign.Center }) {
        https:https:https:https:https:https:https:https:https:https:https:https:https:https:Flex({ https:https:https:https:https:https:https:https:https:https:https:https:https:https:direction: FlexDirection.Row, https:https:https:https:https:https:https:https:https:https:https:https:https:https:justifyContent: FlexAlign.End }) {
          https:https:https:https:https:https:https:https:https:https:https:https:https:https:Image($r(https:https:https:https:https:https:https:https:https:https:https:https:https:https:"app.media.icon_liuzhuan"))https:https:https:https:https:https:https:https:https:https:https:https:https:https:.width(https:https:https:https:https:https:https:https:https:https:https:https:https:https:32)https:https:https:https:https:https:https:https:https:https:https:https:https:https:.height(https:https:https:https:https:https:https:https:https:https:https:https:https:https:32)
        }https:https:https:https:https:https:https:https:https:https:https:https:https:https:.padding({ https:https:https:https:https:https:https:https:https:https:https:https:https:https:right: https:https:https:https:https:https:https:https:https:https:https:https:https:https:32 })https:https:https:https:https:https:https:https:https:https:https:https:https:https:.onClick(() => {
          https:https:https:https:https:https:https:https:https:https:https:https:https:https:thishttps:https:https:https:https:https:https:https:https:https:https:https:https:https:.onDistributeDevice()
        })

        https:https:https:https:https:https:https:https:https:https:https:https:https:https:Flex({ https:https:https:https:https:https:https:https:https:https:https:https:https:https:direction: FlexDirection.Row, https:https:https:https:https:https:https:https:https:https:https:https:https:https:justifyContent: FlexAlign.Center }) {
          https:https:https:https:https:https:https:https:https:https:https:https:https:https:Image($r(https:https:https:https:https:https:https:https:https:https:https:https:https:https:"app.media.Bg_classic"))https:https:https:https:https:https:https:https:https:https:https:https:https:https:.width(https:https:https:https:https:https:https:https:https:https:https:https:https:https:312)https:https:https:https:https:https:https:https:https:https:https:https:https:https:.height(https:https:https:https:https:https:https:https:https:https:https:https:https:https:312)
        }https:https:https:https:https:https:https:https:https:https:https:https:https:https:.margin({ https:https:https:https:https:https:https:https:https:https:https:https:https:https:top: https:https:https:https:https:https:https:https:https:https:https:https:https:https:24 })

        https:https:https:https:https:https:https:https:https:https:https:https:https:https:Text(this.currentMusic.name)https:https:https:https:https:https:https:https:https:https:https:https:https:https:.fontSize(https:https:https:https:https:https:https:https:https:https:https:https:https:https:20)https:https:https:https:https:https:https:https:https:https:https:https:https:https:.fontColor(https:https:https:https:https:https:https:https:https:https:https:https:https:https:"#e6000000")https:https:https:https:https:https:https:https:https:https:https:https:https:https:.margin({ https:https:https:https:https:https:https:https:https:https:https:https:https:https:top: https:https:https:https:https:https:https:https:https:https:https:https:https:https:10 })
        https:https:https:https:https:https:https:https:https:https:https:https:https:https:Text(https:https:https:https:https:https:https:https:https:https:https:https:https:https:"未知音乐家")https:https:https:https:https:https:https:https:https:https:https:https:https:https:.fontSize(https:https:https:https:https:https:https:https:https:https:https:https:https:https:14)https:https:https:https:https:https:https:https:https:https:https:https:https:https:.fontColor(https:https:https:https:https:https:https:https:https:https:https:https:https:https:"#99000000")https:https:https:https:https:https:https:https:https:https:https:https:https:https:.margin({ https:https:https:https:https:https:https:https:https:https:https:https:https:https:top: https:https:https:https:https:https:https:https:https:https:https:https:https:https:10 })
      }.flexGrow(https:https:https:https:https:https:https:https:https:https:https:https:https:https:1)


      Flex({ https:https:https:https:https:https:https:https:https:https:https:https:https:https:direction: FlexDirection.Column, https:https:https:https:https:https:https:https:https:https:https:https:https:https:alignItems: ItemAlign.Center, https:https:https:https:https:https:https:https:https:https:https:https:https:https:justifyContent: FlexAlign.End }) {
        https:https:https:https:https:https:https:https:https:https:https:https:https:https:thishttps:https:https:https:https:https:https:https:https:https:https:https:https:https:.operationPannel()
        https:https:https:https:https:https:https:https:https:https:https:https:https:https:thishttps:https:https:https:https:https:https:https:https:https:https:https:https:https:.sliderPannel()
        https:https:https:https:https:https:https:https:https:https:https:https:https:https:thishttps:https:https:https:https:https:https:https:https:https:https:https:https:https:.playPannel()
      }https:https:https:https:https:https:https:https:https:https:https:https:https:https:.height(https:https:https:https:https:https:https:https:https:https:https:https:https:https:200)
    }
    https:https:https:https:https:https:https:https:https:https:https:https:https:https:.linearGradient({
      https:https:https:https:https:https:https:https:https:https:https:https:https:https:angle: https:https:https:https:https:https:https:https:https:https:https:https:https:,
      https:https:https:https:https:https:https:https:https:https:https:https:https:https:direction: GradientDirection.Bottom,
      https:https:https:https:https:https:https:https:https:https:https:https:https:https:colors: this.currentMusic.backgourdColor
    })https:https:https:https:https:https:https:https:https:https:https:https:https:https:.padding({ https:https:https:https:https:https:https:https:https:https:https:https:https:https:top: https:https:https:https:https:https:https:https:https:https:https:https:https:https:48, https:https:https:https:https:https:https:https:https:https:https:https:https:https:bottom: https:https:https:https:https:https:https:https:https:https:https:https:https:https:24, https:https:https:https:https:https:https:https:https:https:https:https:https:https:left: https:https:https:https:https:https:https:https:https:https:https:https:https:https:24, https:https:https:https:https:https:https:https:https:https:https:https:https:https:right: https:https:https:https:https:https:https:https:https:https:https:https:https:https:24 })
    https:https:https:https:https:https:https:https:https:https:https:https:https:https:.width(https:https:https:https:https:https:https:https:https:https:https:https:https:https:'')
    https:https:https:https:https:https:https:https:https:https:https:https:https:https:.height(https:https:https:https:https:https:https:https:https:https:https:https:https:https:'')
  }

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

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

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

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

      https:https:https:https:https:https:https:https:https:https:https:https:Text(this.totalTimeText)https:https:https:https:https:https:https:https:https:https:https:https:.fontSize(https:https:https:https:https:https:https:https:https:https:https:https:12)https:https:https:https:https:https:https:https:https:https:https:https:.fontColor(https:https:https:https:https:https:https:https:https:https:https:https:"ff000000")https:https:https:https:https:https:https:https:https:https:https:https:.width(https:https:https:https:https:https:https:https:https:https:https:https:40)

    }https:https:https:https:https:https:https:https:https:https:https:https:.width(https:https:https:https:https:https:https:https:https:https:https:https:'')https:https:https:https:https:https:https:https:https:https:https:https:.height(https:https:https:https:https:https:https:https:https:https:https:https:18)
  }

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

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

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

*编者注：HarmonyOS 是基于开放原子开源基金会旗下开源项目 OpenHarmony 开发的面向多种全场景智能设备的商用版本。是结合其自有特性和能力开发的新一代智能终端操作系统。
官网参考链接：https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/arkui-ts/ts-basic-components.md

1.2 播放音乐

play(seekTo) {
    https:https:https:https:https:https:https:https:https:https:if (https:https:https:https:https:https:https:https:https:https:this.player.state =https:= https:https:https:https:https:https:https:https:https:https:'playing' && https:https:https:https:https:https:https:https:https:https:this.player.src =https:= https:https:https:https:https:https:https:https:https:https:this.getCurrentMusic().url) {
      https:https:https:https:https:https:https:https:https:https:return
    }

    https:https:https:https:https:https:https:https:https:https:if (https:https:https:https:https:https:https:https:https:https:this.player.state =https:= https:https:https:https:https:https:https:https:https:https:'idle' || https:https:https:https:https:https:https:https:https:https:this.player.src !https:= https:https:https:https:https:https:https:https:https:https:this.getCurrentMusic().url) {
      CommonLog.info(https:https:https:https:https:https:https:https:https:https:'Preload music url = ' + https:https:https:https:https:https:https:https:https:https:this.getCurrentMusic().url)
      https:https:https:https:https:https:https:https:https:https:this.player.reset()
      https:https:https:https:https:https:https:https:https:https:this.player.src https:= https:https:https:https:https:https:https:https:https:https:this.getCurrentMusic().url
      https:https:https:https:https:https:https:https:https:https:this.player.https:https:https:https:https:https:https:https:https:https:on(https:https:https:https:https:https:https:https:https:https:'dataLoad', https:https:https:https:https:https:https:https:https:https:https:https:https:https:https:https:https:https:https:https:()https:https:https:https:https:https:https:https:https: => {
        CommonLog.info(https:https:https:https:https:https:https:https:https:https:'dataLoad duration=' + https:https:https:https:https:https:https:https:https:https:this.player.duration)
        https:https:https:https:https:https:https:https:https:https:this.totalTimeMs https:= https:https:https:https:https:https:https:https:https:https:this.player.duration
        https:https:https:https:https:https:https:https:https:https:if (seekTo > https:https:https:https:https:https:https:https:https:https:this.player.duration) {
          seekTo https:= https:https:https:https:https:https:https:https:https:https:-1
        }
        https:https:https:https:https:https:https:https:https:https:this.player.https:https:https:https:https:https:https:https:https:https:on(https:https:https:https:https:https:https:https:https:https:'play', https:https:https:https:https:https:https:https:https:https:https:https:https:https:https:https:https:https:https:https:(err, action)https:https:https:https:https:https:https:https:https: => {
          https:https:https:https:https:https:https:https:https:https:if (err) {
            CommonLog.info(`https:https:https:https:https:https:https:https:https:https:MusicPlayer[PlayerModel] error returned https:https:https:https:https:https:https:https:https:https:https:https:https:https:https:https:https:https:https:inhttps:https:https:https:https:https:https:https:https: play() callback`)
            https:https:https:https:https:https:https:https:https:https:return
          }
          https:https:https:https:https:https:https:https:https:https:if (seekTo > https:https:https:https:https:https:https:https:https:) {
            https:https:https:https:https:https:https:https:https:https:this.player.seek(seekTo)
          }
        })

        https:https:https:https:https:https:https:https:https:https:this.player.play()
        https:https:https:https:https:https:https:https:https:https:this.statusChangeListener()
        https:https:https:https:https:https:https:https:https:https:this.setProgressTimer()
        https:https:https:https:https:https:https:https:https:https:this.isPlaying https:= https:https:https:https:https:https:https:https:https:https:true
      })
    }
    https:https:https:https:https:https:https:https:https:https:else {
      https:https:https:https:https:https:https:https:https:https:if (seekTo > https:https:https:https:https:https:https:https:https:https:this.player.duration) {
        seekTo https:= https:https:https:https:https:https:https:https:https:https:-1
      }
      https:https:https:https:https:https:https:https:https:https:this.player.https:https:https:https:https:https:https:https:https:https:on(https:https:https:https:https:https:https:https:https:https:'play', https:https:https:https:https:https:https:https:https:https:https:https:https:https:https:https:https:https:https:https:(err, action)https:https:https:https:https:https:https:https:https: => {
        https:https:https:https:https:https:https:https:https:https:if (err) {
          CommonLog.info(`https:https:https:https:https:https:https:https:https:https:MusicPlayer[PlayerModel] error returned https:https:https:https:https:https:https:https:https:https:https:https:https:https:https:https:https:https:https:inhttps:https:https:https:https:https:https:https:https: play() callback`)
          https:https:https:https:https:https:https:https:https:https:return
        }
        https:https:https:https:https:https:https:https:https:https:if (seekTo > https:https:https:https:https:https:https:https:https:) {
          https:https:https:https:https:https:https:https:https:https:this.player.seek(seekTo)
        }
      })

      https:https:https:https:https:https:https:https:https:https:this.player.play()
      https:https:https:https:https:https:https:https:https:https:this.setProgressTimer()
      https:https:https:https:https:https:https:https:https:https:this.isPlaying https:= https:https:https:https:https:https:https:https:https:https:true
    }
  }

1.3 音乐暂停

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

具体代码：https://gitee.com/openharmony-sig/knowledge_demo_temp/blob/master/FA/Entertainment/DistrubutedMusicPlayer/entry/src/main/ets/Common/PlayerManager.ets

分布式音乐播放器项目下载链接：https://gitee.com/openharmony-sig/knowledge_demo_temp/tree/master/FA/Entertainment/DistrubutedMusicPlayer
接下来我们讲解如何在 OpenHarmony 中实现显示动画的效果。

二、显示动画

我们以传

https:https:炸dan

小游戏中的显示动画效果为例，效果如下图所示。

通过本小节，大家在上一小节的基础上，学到更多 ArkUI 组件和布局在 OpenHarmony 中的应用，以及如何在自己的应用中实现显示动画的效果。
代码链接：https://gitee.com/openharmony-sig/knowledge_demo_temp/blob/master/FA/Entertainment/BombGame/entry/src/main/ets/MainAbility/pages/game.ets
实现步骤：
2.1 编写弹窗布局：将游戏失败文本、https:https:炸dan图片和再来一局按钮图片放置于 Column 容器中；
2.2 用变量来控制动画起始和结束的位置：用 Flex 容器包裹https:https:炸dan图片，并用 @State 装饰变量 toggle，通过变量来动态修改 Flex 的 direction 属性；布局代码如下：

https:https:https:https:https:https:https:https:@State https:https:https:https:https:https:https:https:toggle: boolean = true
private https:https:https:https:https:https:https:https:controller: CustomDialogController
https:https:https:https:https:https:https:https:@Consume https:https:https:https:https:https:https:https:deviceList: RemoteDevice[]
private https:https:https:https:https:https:https:https:confirm: () => void
private interval = null

build() {
   https:https:https:https:https:https:https:https:Column() {
      https:https:https:https:https:https:https:https:Text(https:https:https:https:https:https:https:https:'游戏失败')https:https:https:https:https:https:https:https:.fontSize(https:https:https:https:https:https:https:https:30)https:https:https:https:https:https:https:https:.margin(https:https:https:https:https:https:https:https:20)
      https:https:https:https:https:https:https:https:Flex({
         https:https:https:https:https:https:https:https:direction: this.toggle ? FlexDirection.https:https:https:https:https:https:https:https:Column : FlexDirection.ColumnReverse,
         https:https:https:https:https:https:https:https:alignItems: ItemAlign.Center
      })
      {
         https:https:https:https:https:https:https:https:Image($r(https:https:https:https:https:https:https:https:"app.media.bomb"))https:https:https:https:https:https:https:https:.objectFit(ImageFit.Contain)https:https:https:https:https:https:https:https:.height(https:https:https:https:https:https:https:https:80)
      }https:https:https:https:https:https:https:https:.height(https:https:https:https:https:https:https:https:200)

      https:https:https:https:https:https:https:https:Image($r(https:https:https:https:https:https:https:https:"app.media.btn_restart"))https:https:https:https:https:https:https:https:.objectFit(ImageFit.Contain)https:https:https:https:https:https:https:https:.height(https:https:https:https:https:https:https:https:120)https:https:https:https:https:https:https:https:.margin(https:https:https:https:https:https:https:https:10)
         https:https:https:https:https:https:https:https:.onClick(() => {
               https:https:https:https:https:https:https:https:thishttps:https:https:https:https:https:https:https:.controllerhttps:https:https:https:https:https:https:https:.close()
               https:https:https:https:https:https:https:https:thishttps:https:https:https:https:https:https:https:.confirm()
         })
   }
   https:https:https:https:https:https:https:https:.width(https:https:https:https:https:https:https:https:'80%')
   https:https:https:https:https:https:https:https:.margin(https:https:https:https:https:https:https:https:50)
   https:https:https:https:https:https:https:https:.backgroundColor(Color.White)
}

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

aboutToAppear() {
   https:https:https:https:https:https:https:this.setBombAnimate()
}

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

项目下载链接：https://gitee.com/openharmony-sig/knowledge_demo_temp/tree/master/FA/Entertainment/BombGame

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

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


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

代码参考链接：https://gitee.com/openharmony-sig/knowledge_demo_temp/blob/master/FA/Shopping/DistributedShoppingCart/entry/src/main/ets/MainAbility/pages/HomePage.ets
页面布局效果图

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

https:https:https:https:https:https:build() {
    https:https:https:https:https:https:Column() {
      https:https:https:https:https:https:Scroll() {
        https:https:https:https:https:https:Column() {
          https:https:https:https:https:https:if (this.currentPage =https:= https:https:https:https:https:https:1) {
            https:https:https:https:https:https:Flex({ https:https:https:https:https:https:direction: FlexDirection.Row, https:https:https:https:https:https:justifyContent: FlexAlign.End }) {
              https:https:https:https:https:https:Image($r(https:https:https:https:https:https:"app.media.icon_share"))
                https:https:https:https:https:https:.objectFit(ImageFit.Cover)
                https:https:https:https:https:https:.height(https:https:https:https:https:https:'60lpx')
                https:https:https:https:https:https:.width(https:https:https:https:https:https:'60lpx')
            }
            https:https:https:https:https:https:.width(https:https:https:https:https:https:"")
            https:https:https:https:https:https:.margin({ https:https:https:https:https:https:top: https:https:https:https:https:https:'20lpx', https:https:https:https:https:https:right: https:https:https:https:https:https:'50lpx' })
            https:https:https:https:https:https:.onClick(() => {
              https:https:https:https:https:https:thishttps:https:https:https:https:https:.playerDialoghttps:https:https:https:https:https:.open()
            })

            https:https:https:https:https:https:GoodsHome({ https:https:https:https:https:https:goodsItems: this.goodsItems})
          }
          else if (this.currentPage =https:= https:https:https:https:https:https:3) {
            https:https:https:https:https:https://我的
https:https:https:https:https:https:            MyInfo()
https:https:https:https:https:https:          }
https:https:https:https:https:https:        }
https:https:https:https:https:https:        .height('85%')
https:https:https:https:https:https:      }
https:https:https:https:https:https:      .flexGrow(1)

https:https:https:https:https:https:      HomeBottom({ remoteData: this.remoteData})

https:https:https:https:https:https:    }
https:https:https:https:https:https:    .backgroundColor("white")
https:https:https:https:https:https:  }

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

https:https:https:https:https:@Component
https:https:https:https:https:struct GoodsHome {
  https:https:https:https:https:private https:https:https:https:https:goodsItems: https:https:https:https:https:GoodsDatahttps:https:https:https:https:[]
  @https:https:https:https:https:Consume https:https:https:https:https:ShoppingCartsGoods https:https:https:https:https::anyhttps:https:https:https:https:[]
  https:https:https:https:https:build() {
    https:https:https:https:https:Column() {
      https:https:https:https:https:Tabs() {
        https:https:https:https:https:TabContent() {
          https:https:https:https:https:GoodsList({ https:https:https:https:https:goodsItems: this.goodsItems});
        }
        .tabBar(https:https:https:https:https:"畅销榜")
        .backgroundColor(Color.White)

        TabContent() {
          https:https:https:https:https:GoodsList({ https:https:https:https:https:goodsItems: this.goodsItems});
        }
        .tabBar(https:https:https:https:https:"推荐")
        .backgroundColor(Color.White)
      }
      .barWidth(https:https:https:https:https:500)
      .barHeight(https:https:https:https:https:50)
      .scrollable(true)
      .barMode(BarMode.Scrollable)
      .height(https:https:https:https:https:'980lpx')

    }
    .alignItems(HorizontalAlign.Start)
    .width(https:https:https:https:https:'')
  }
}

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

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

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

https:https:https:@Component
https:https:https:struct GoodsListItem {
  https:https:https:private goodsItem: GoodsData
  https:https:https:@State scale: https:https:https:number https:= https:https:https:1
  https:https:https:@State opacity: https:https:https:number https:= https:https:https:1
  https:https:https:@State active: https:https:https:boolean https:= https:https:https:false
  https:https:https:@Consume ShoppingCartsGoods :https:https:https:any[]
  build() {
    Column() {
      Navigator({ target: https:https:https:'pages/DetailPage' }) {
        Row({ space: https:https:https:'40lpx' }) {
          Column() {
            Text(https:https:https:this.goodsItem.title)
              .fontSize(https:https:https:'28lpx')
            Text(https:https:https:this.goodsItem.content)
              .fontSize(https:https:https:'20lpx')
            Text(https:https:https:'￥' + https:https:https:this.goodsItem.price)
              .fontSize(https:https:https:'28lpx')
              .fontColor(Color.Red)
          }
          .height(https:https:https:'160lpx')
          .width(https:https:https:'50%')
          .margin({ left: https:https:https:'20lpx' })
          .alignItems(HorizontalAlign.Start)

          Image(https:https:https:this.goodsItem.imgSrc)
            .objectFit(ImageFit.ScaleDown)
            .height(https:https:https:'160lpx')
            .width(https:https:https:'40%')
            .renderMode(ImageRenderMode.Original)
            .margin({ right: https:https:https:'20lpx', left: https:https:https:'20lpx' })

        }
        .height(https:https:https:'180lpx')
        .alignItems(VerticalAlign.Center)
        .backgroundColor(Color.White)
      }
      .params({ goodsItem: https:https:https:this.goodsItem ,ShoppingCartsGoods:https:https:https:this.ShoppingCartsGoods})
      .margin({ left: https:https:https:'40lpx' })
    }
  }

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

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

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

项目下载链接地址：https://gitee.com/openharmony-sig/knowledge_demo_temp/tree/master/FA/Shopping/DistributedShoppingCart

官网参考链接：https://gitee.com/openharmony/docs/blob/OpenHarmony-3.1-Beta/zh-cn/application-dev/reference/arkui-ts/ts-page-transition-animation.md

通过上述讲解，我们就在自己的代码中实现音乐的播放，显示动画，页面间转场动画等效果。在接下来的一章中，我们会讲解如何在 OpenHarmony 通过分布式数据管理，实现设备之间数据如何同步刷新。

在接下来的一章中，我们将会讲解分布式数据管理在 OpenHarmony 中如何实现多台设备间的数据同步更新。


上一篇：Git 不要只会 pull 和 push，试试这 5 条提高效率的命令
下一篇：KingDB 控制台使用手册
分享好友

分享这个小栈给你的朋友们，一起进步吧。

OpenHarmony开发者社区
创建时间：2021-12-16 10:45:42
OpenHarmony是由开放原子开源基金会（OpenAtom Foundation）孵化及运营的开源项目，目标是面向全场景、全连接、全智能时代，基于开源的方式，搭建一个智能终端设备操作系统的框架和平台，促进万物互联产业的繁荣发展
展开
订阅须知

• 所有用户可根据关注领域订阅专区或所有专区

• 付费订阅：虚拟交易，一经交易不退款；若特殊情况，可3日内客服咨询

• 专区发布评论属默认订阅所评论专区（除付费小栈外）

栈主、嘉宾

查看更多
  • OpenHarmony开发者社区
    栈主

小栈成员

查看更多
  • HarmonyOS开发者社区
  • 飘絮絮絮丶
  • wojiuzhuai
  • Maxlychee
戳我，来吐槽～

北京盛拓优讯信息技术有限公司. 版权所有  京ICP备16024965号-8  北京市公安局海淀分局网监中心备案编号：11010802021510  未成年人举报专区

广播电视节目制作经营许可证(京) 字第1234号 中国互联网协会会员