OpenHarmony標準設備應用開發（二）——佈局、動畫與音樂

（以下內容來自開發者分享，不代表 OpenHarmony 項目群工作委員會觀點）

邢碌

上一章我們講解了應用編譯環境準備，設備編譯環境準備，開發板燒錄，將一個最簡單的 OpenAtom OpenHarmony（以下簡稱“OpenHarmony”）程式安裝到我們的標準設備上。

本章是 OpenHarmony 標準設備應用開發的第二篇文章。我們通過知識體系新開發的幾個基於 OpenHarmony3.1 Beta 標準系統的樣例：分散式音樂播放、傳炸彈、購物車等樣例，分別介紹下音樂播放、顯示動畫、動畫轉場（頁面間轉場）三個進階技能。首先我們來講如何在 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 以及剛纔所說的三個模塊所構成。

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 開發的面向多種全場景智能設備的商用版本。是結合其自有特性和能力開發的新一代智能終端操作系統。

官網參考鏈接：https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/arkui-ts/ts-basic-components.md

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
  }

具體代碼：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 中實現顯示動畫的效果。

二、顯示動畫

我們以傳炸彈小游戲中的顯示動畫效果為例，效果如下圖所示。

通過本小節，大家在上一小節的基礎上，學到更多 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 編寫彈窗佈局：將游戲失敗文本、炸彈圖片和再來一局按鈕圖片放置於 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)
}

項目下載鏈接：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() 構成，該三個模塊我們會分別說明。具體代碼如下：

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 條目所構成。具體代碼如下：

@Component
struct 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 佈局中，具體代碼如下：

@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)
  }
}

項目下載鏈接地址：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 通過分散式數據管理，實現設備之間數據如何同步刷新。