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.pswp.cn/web/12740.shtml
繁體地址，請注明出處：http://hk.pswp.cn/web/12740.shtml
英文地址，請注明出處：http://en.pswp.cn/web/12740.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！

相關文章

AI工具的熱門與卓越：揭示AI技術的實際應用和影響

AI工具的熱門與卓越：揭示AI技術的實際應用和影響

文章目錄 每日一句正能量前言常用AI工具創新AI應用個人體驗分享后記 每日一句正能量 我們在我們的勞動過程中學習思考，勞動的結果，我們認識了世界的奧妙，于是我們就真正來改變生活了。 前言 隨著人工智能（AI）技術的快…
閱讀更多...
深度剖析MyBatis的二級緩存

深度剖析MyBatis的二級緩存

二級緩存的原理 MyBatis 二級緩存的原理是什么？ 二級緩存的原理和一級緩存一樣，第一次查詢會將數據放到 緩存 中，然后第二次查詢直接去緩存讀取。但是一級緩存是基于 SqlSession 的，二級緩存是基于 mapper 的 namespace 的。也就是…
閱讀更多...
關于API接口的自述

關于API接口的自述

在實際工作中，我們需要經常跟第三方平臺打交道，可能會對接第三方平臺API接口，或者提供API接口給第三方平臺調用。 那么問題來了，如果設計一個優雅的API接口，能夠滿足：安全性、可重復調用、穩定性、好定位問…
閱讀更多...
Qt運行時，如何設置第一個聚焦的控件

Qt運行時，如何設置第一個聚焦的控件

問題：Qt第一個聚焦的控件，如何自行設置？ 嘗試： 1.在代碼中設置 lineEdit->setFocus() 。無效！ 2.Qt Designer–打開form1.ui–菜單欄下一行–Edit Tab Order–按順序點擊–菜單欄下一行–Edit Widgets–退出。無效…
閱讀更多...
為什么做了功能測試還要做接口測試

為什么做了功能測試還要做接口測試

接口測試與功能測試不是重復的測試，而是互為補充的測試策略。 在軟件測試領域，接口測試和功能測試被視為質量保證過程中至關重要的組成部分。盡管它們之間存在部分重復，但更多的情況下，它們相輔相成，各自發揮著獨特的作用。本文將探討接口測試與功能測試之間的關系，以及它…
閱讀更多...
【easyX】動手輕松掌握easyX 1

【easyX】動手輕松掌握easyX 1

01 簡單繪圖 在這個程序中&#xff0c;我們先初始化繪圖窗口。其次&#xff0c;簡單繪制兩條線。 #include <graphics.h>//繪圖庫頭文件 #include <stdio.h> int main() {initgraph(640, 480);//初始化640?480繪圖屏幕line(200, 240, 440, 240);//畫線(200,240)…
閱讀更多...
MySQL是如何選擇索引的？

MySQL是如何選擇索引的？

2.3.5. 索引選擇 MySQL是如何選擇索引的&#xff1f; 優化器決定了具體某一索引的選擇&#xff0c;也就是常說的執行計劃。而優化器的選擇是基于成本&#xff08;cost&#xff09;&#xff0c;哪個索引的成本越低&#xff0c;優先使用哪個索引。 SQL 優化器會分析所有可能的執…
閱讀更多...
Python操作鼠標鍵盤和爬蟲

Python操作鼠標鍵盤和爬蟲

一.pyautogui 庫 pyautogui 是一個 Python 庫&#xff0c;允許控制鼠標和鍵盤。可以通過它編寫 Python 腳本來自動執行各種任務&#xff0c;例如點擊按鈕、輸入文本、移動鼠標等。這個庫非常適合用來編寫自動化腳本來完成重復性的工作&#xff0c;比如網頁表單填寫、屏幕截圖、…
閱讀更多...
STC8增強型單片機開發——定時器Timer

STC8增強型單片機開發——定時器Timer

一、定時器 定時器是一種計時裝置&#xff0c;通常由一個晶體振蕩器提供時鐘信號&#xff0c;可以計時一定的時間后執行相應的操作。在單片機中&#xff0c;定時器一般是由計數器和時鐘源組成的&#xff0c;可以用來產生一定時間間隔的中斷信號&#xff0c;或者用于測量輸入信號…
閱讀更多...
開放式運動耳機哪款好用？五款高性能值得信賴產品推薦

開放式運動耳機哪款好用？五款高性能值得信賴產品推薦

身為戶外運動的達人&#xff0c;我發現開放式運動耳機簡直是咱們運動時的最佳拍檔&#xff0c;不管是跑步還是健身&#xff0c;開放式運動耳機最為舒適&#xff0c;它的妙處就在于不用塞進耳朵&#xff0c;這樣既安全又衛生&#xff0c;戶外動起來更放心。但市面上好壞參半&…
閱讀更多...
AIGC行業：探索發展風口，把握市場脈搏

AIGC行業：探索發展風口，把握市場脈搏

AIGC行業現在適合進入嗎 簡介&#xff1a; AIGC行業&#xff1a;探索發展風口&#xff0c;把握市場脈搏 隨著人工智能技術的快速發展&#xff0c;AIGC&#xff08;人工智能生成內容&#xff09;行業正逐漸成為科技界的新寵。在當前的時代背景下&#xff0c;我們不禁要問&…
閱讀更多...
Chisel中對對＜: 和:的理解（其實是Scala中的理解）

Chisel中對對＜: 和:的理解（其實是Scala中的理解）

在 Scala 語言和 Chisel 硬件構造語言中&#xff0c;<: 和 : 是用于類型注解的兩個不同的符號&#xff0c;它們在泛型編程和類型系統中扮演重要角色。下面是它們各自的意義和用途&#xff1a; <:&#xff08;子類型關系&#xff09; <: 符號在 Scala 中表示子類型關…
閱讀更多...
Nginx詳細介紹一

Nginx詳細介紹一

Nginx是一個高性能的HTTP和反向代理服務器&#xff0c;它也可以作為郵件服務器使用。 Nginx基本介紹 基本概念&#xff1a; Nginx可以處理大量的并發連接&#xff0c;具有很高的穩定性和低資源消耗的特點。它主要用于Web服務、反向代理、負載均衡和HTTP緩存等場景。 安裝與配…
閱讀更多...
【半夜學習MySQL】內置函數（含日期、字符串、數學等函數常用用法介紹及示例詳解）

【半夜學習MySQL】內置函數（含日期、字符串、數學等函數常用用法介紹及示例詳解）

&#x1f3e0;關于專欄&#xff1a;半夜學習MySQL專欄用于記錄MySQL數據相關內容。 &#x1f3af;每天努力一點點&#xff0c;技術變化看得見 文章目錄 日期函數字符串函數數學函數其他函數 日期函數 函數名稱描述current_date()當前日期current_time()當前時間current_time()…
閱讀更多...
php8.2使用laravel V11.0

php8.2使用laravel V11.0

報錯&#xff1a;You must enable the openssl extension in your php.ini to load information from https://mirrors.aliyun.com/composer 1、搜索&#xff1a;extension_dir去掉;號 2、搜索&#xff1a;extensionopenssl去掉;號
閱讀更多...
幻獸帕魯Palworld服務器手動部署

幻獸帕魯Palworld服務器手動部署

目錄 帕魯官方文檔手動安裝steamcmd通過steamcmd安裝帕魯后端客戶端連接附錄&#xff1a;PalServer.sh的啟動項附錄&#xff1a;配置文件 帕魯官方文檔 https://tech.palworldgame.com/ 手動安裝steamcmd 創建steam用戶 sudo useradd -m steam sudo passwd steam下載steamc…
閱讀更多...
你寫HTML的時候，會注重語義化嗎？

你寫HTML的時候，會注重語義化嗎？

其實說到語義化&#xff0c;多年前端開發經驗的老手估計也不會太在意&#xff0c;有時候工期太緊&#xff0c;有時候自己疏忽&#xff0c;也就不那么在意了&#xff0c;直接DIVCSS一把梭下去了。 目錄 什么是HTML 什么是HTML語義化 HTML語義化所帶來的好處 我把CSS樣式引入…
閱讀更多...
_pickle.UnpicklingError: STACK_GLOBAL requires str

_pickle.UnpicklingError: STACK_GLOBAL requires str

導致這個報錯的原因是我跑yolo的時候修改數據集了&#xff0c;里面的label.cache沒有刪除&#xff0c;咱只要刪除掉緩存就行&#xff01;&#xff01; 我這里是已經刪除掉了&#xff0c;所以圖片里面沒有&#xff0c;一般就是在箭頭所示位置有.cache文件的
閱讀更多...
Vue3知識總結-4

Vue3知識總結-4

Vue3知識總結-4 文章目錄 Vue3知識總結-4插槽Slots渲染作用域默認內容具名插槽插槽中的數據傳遞具名插槽傳遞數據 組件聲明周期聲明周期示意圖 組件生命周期的應用動態組件組件保持存活組件被卸載 異步組件依賴注入 插槽Slots 在某些場景中&#xff0c;可能想要為子組件傳遞一…
閱讀更多...
xxljob分片廣播+多線程實現高效定時同步elasticsearch索引庫

xxljob分片廣播+多線程實現高效定時同步elasticsearch索引庫

需求&#xff1a;為了利用elasticsearch實現高效搜索&#xff0c;需要將mysql中的數據查出來&#xff0c;再定時同步到es里&#xff0c;同時在同步過程中通過分片廣播多線程提高同步數據的效率。 1. 添加映射 使用kibana添加映射 PUT /app_info_article {"mappings&quo…
閱讀更多...
最新文章

Copyright @ 2022~2023