場景

鴻蒙開發-基礎組件介紹及chart組件使用：

https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/118333539

在上面學習了基礎組件的使用流程后，下面介紹image-animator這個組件。

注：

博客：
https://blog.csdn.net/badao_liumang_qizhi
關注公眾號
霸道的程序猿
獲取編程相關電子書、教程推送與免費下載。

Ability

Ability是應用所具備能力的抽象，也是應用程序的重要組成部分。一個應用可以具備多種能力（即可以包含多個Ability），HarmonyOS支持應用以Ability為單位進行部署。Ability可以分為FA（Feature Ability）和PA（Particle Ability）兩種類型，每種類型為開發者提供了不同的模板，以便實現不同的業務功能。

FA支持Page Ability：
Page模板是FA唯一支持的模板，用于提供與用戶交互的能力。一個Page實例可以包含一組相關頁面，每個頁面用一個AbilitySlice實例表示。

PA支持Service Ability和Data Ability：
Service模板：用于提供后臺運行任務的能力。
Data模板：用于對外部提供統一的數據訪問抽象。
在配置文件（config.json）中注冊Ability時，可以通過配置Ability元素中的“type”屬性來指定Ability模板類型，示例如下。

其中，“type”的取值可以為“page”、“service”或“data”，分別代表Page模板、Service模板、Data模板。為了便于表述，后文中我們將基于Page模板、Service模板、Data模板實現的Ability分別簡稱為Page、Service、Data。

詳細介紹可以參照其官方文檔

https://developer.harmonyos.com/cn/docs/documentation/doc-guides/ability-ability-overview-0000000000029852

在js上右鍵新建ability-Empty Page Ability(JS)

然后配置ability，這里叫animator

點擊Finish完成后

可以發現其和default是同級的。

image-animator圖片幀動畫播放器

image-animator 圖片幀動畫播放器，多圖幀動畫的構建能力一直以來都是基于 Android 安卓系統使用 Java or C#語言進行開發的，而華為鴻蒙系統將「圖片幀動畫播放器」引入到了 JS 前端開發領域，這無疑是一次巨大的突破，這也代表著華為鴻蒙系統對其圖片渲染能力的巨大自信。

注意如果照片使用云端路徑的話，需要配置權限

ohos.permission.INTERNET（如果使用云端路徑）

官方文檔地址：

https://developer.harmonyos.com/cn/docs/documentation/doc-references/js-components-basic-image-animator-0000001050066126

然后按照其官方文檔指示，分別將animator下的pages下index下index.hml修改為

<div class="container"><image-animator class="animator" ref="animator" images="{{frames}}" duration="1s" /><div class="btn-box"><input class="btn" type="button" value="start" @click="handleStart" /><input class="btn" type="button" value="stop" @click="handleStop" /><input class="btn" type="button" value="pause" @click="handlePause" /><input class="btn" type="button" value="resume" @click="handleResume" /></div> </div>

將index.css修改為

.container {flex-direction: column;justify-content: center;align-items: center;left: 0px;top: 0px;width: 454px;height: 454px; } .animator {width: 70px;height: 70px; } .btn-box {width: 264px;height: 120px;flex-wrap: wrap;justify-content: space-around;align-items: center; } .btn {border-radius: 8px;width: 120px;margin-top: 8px; }

將index.js修改為

export default {data: {frames: [{src: "/common/asserts/heart78.png",},{src: "/common/asserts/heart79.png",},{src: "/common/asserts/heart80.png",},{src: "/common/asserts/heart81.png",},{src: "/common/asserts/heart82.png",},{src: "/common/asserts/heart83.png",},{src: "/common/asserts/heart84.png",},{src: "/common/asserts/heart85.png",},{src: "/common/asserts/heart86.png",},{src: "/common/asserts/heart87.png",},{src: "/common/asserts/heart88.png",},{src: "/common/asserts/heart89.png",},{src: "/common/asserts/heart90.png",},{src: "/common/asserts/heart91.png",},{src: "/common/asserts/heart92.png",},{src: "/common/asserts/heart93.png",},{src: "/common/asserts/heart94.png",},{src: "/common/asserts/heart95.png",},{src: "/common/asserts/heart96.png",},],},handleStart() {this.$refs.animator.start();},handlePause() {this.$refs.animator.pause();},handleResume() {this.$refs.animator.resume();},handleStop() {this.$refs.animator.stop();}, };

然后選中index.hml點開預覽按鈕

可以看到此時圖片有在動，但是因為圖片沒有，所以沒有動畫效果。

準備圖片

在阿里巴巴矢量圖上找到心型圖標，然后選擇大小不同的，使用截圖軟件截取同樣大小尺寸的一組圖。

然后將這一組圖放在common下images目錄下

然后修改Index.js中圖片路徑的代碼

??? data: {frames: [{src: "/common/images/1.png",},{src: "/common/images/2.png",},{src: "/common/images/3.png",},{src: "/common/images/4.png",},],},

保存后再查看預覽

總結

以上是生活随笔為你收集整理的鸿蒙开发-新建Ability与使用image-animator实现图帧动画的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。