華為鴻蒙手表實現除夕夜煙花燃放效果

前言

經過一年多的普及與應用，鴻蒙系統早已經涉及華為的各個終端設備，比如手機、音箱、手表等等。正好博主拿到了華為WATCH GT Runner，那就用它來寫鴻蒙手表開發的知識。

image-animator組件

因為是第一篇博文講解，為了讓大家對鴻蒙手表App開發更感興趣，我們不單獨講解任何組件。這里，我們通過除夕夜華為手表表盤綻放煙花效果，來讓大家更有開發興趣。

首先，在手表表盤綻放煙花，肯定是一個動態過程，可以用video組件去實現，也可以通過gif去實現。

但很遺憾，鴻蒙手表開發組件中，華為并沒有提供video組件。因為沒有誰會用手表看視頻，那么只能通過一幀一幀的去輪換圖片，來實現動態的煙花綻放效果。

而JS組件中，華為鴻蒙提供了一個image-animator。顧名思義，就是圖片幀動畫播放器，通過它我們可以間隔指定的秒數實現圖片的輪換播放。

實現表盤煙花綻放

因為，既然是GIF分解的一幀一幀的圖片，那么其必然都存儲在項目的資源文件夾中，也就是entry-src-mian-js-default-common文件夾中，如下圖所示：

接著，我們需要在js代碼中定義一個引用這個圖片的數組：m_images，具體代碼如下所示（index.js）：

export default { data: { m_images:[ {src: "/common/8.png"}, {src: "/common/9.png"} , {src: "/common/10.png"}, {src: "/common/11.png"}, {src: "/common/12.png"} , {src: "/common/13.png"}, {src: "/common/14.png"}, {src: "/common/15.png"} , {src: "/common/16.png"}, {src: "/common/17.png"}, {src: "/common/18.png"} , {src: "/common/19.png"}, {src: "/common/20.png"}, {src: "/common/21.png"} , {src: "/common/22.png"}, {src: "/common/23.png"}, {src: "/common/24.png"}] } }

因為華為WATCH GT Runner的表盤是466*466的分辨率屏幕，我們可以直接把煙花的所有圖片的寬都設置為466，這樣剛好顯示在屏幕上。當然，也可以直接定義css樣式文件設置也行。

不過，圖片太多打包的應用越大，超過18M都不能安裝。index.css代碼如下所示：

.container { width: 100%; height: 100%; justify-content: center; align-items: center; } .title { width: 200px; font-size: 30px; text-align: center; } .image-mode { width: 466px; height: 466px; }

這里，博主直接將圖片的寬高都設置為466px。樣式定義以及圖片資源文件的引用數組都設置完成之后，就可以直接設計表盤的布局文件，index.hml代碼如下所示：

其中，duration屬性表示單次播放時長，這3s除以圖片張數，就是每幀圖片的間隔時間。

這樣煙花效果就能完全實現，最后實現的效果如首圖效果一模一樣。

本博文的項目代碼-：點擊下載

JavaScript 移動APP

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。