HarmonyOS開發案例：【image、image-animator組件】

介紹

OpenHarmony提供了常用的圖片、圖片幀動畫播放器組件，開發者可以根據實際場景和開發需求，實現不同的界面交互效果，包括：點擊陰影效果、點擊切換狀態、點擊動畫效果、點擊切換動效。

相關概念

• [image組件]：圖片組件，用于圖片資源的展示。
• [image-animator組件]：幀動畫播放器，用以播放一組圖片，可以設置播放時間、次數等參數。
• [通用事件]：事件綁定在組件上，當組件達到事件觸發條件時，會執行JS中對應的事件回調函數，實現頁面UI視圖和頁面JS邏輯層的交互。

環境搭建

軟件要求

• [DevEco Studio]版本：DevEco Studio 3.1 Release及以上版本。
• OpenHarmony SDK版本：API version 9及以上版本。

硬件要求

• 開發板類型：[潤和RK3568開發板]。
• OpenHarmony系統：3.2 Release及以上版本。

環境搭建

完成本篇Codelab我們首先要完成開發環境的搭建，本示例以RK3568開發板為例，參照以下步驟進行：

1. [獲取OpenHarmony系統版本]：標準系統解決方案（二進制）。以3.2 Release版本為例：
   
2. 搭建燒錄環境。
   1. [完成DevEco Device Tool的安裝]
   2. [完成RK3568開發板的燒錄]
3. 搭建開發環境。
   1. 開始前請參考[工具準備]，完成DevEco Studio的安裝和開發環境配置。
   2. 開發環境配置完成后，請參考[使用工程向導]創建工程（模板選擇“Empty Ability”）。
   3. 工程創建完成后，選擇使用[真機進行調測]。
   4. 鴻蒙開發指導文檔：[gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md]

代碼結構解讀

本篇Codelab只對核心代碼進行講解，對于完整代碼，我們會在gitee中提供。

├──entry/src/main/js	              // 代碼區
│  └──MainAbility
│     ├──common
│     │  ├──constants
│     │  │  └──commonConstants.js     // 幀動畫數據常量
│     │  └──images
│     ├──i18n		                  // 中英文	
│     │  ├──en-US.json			
│     │  └──zh-CN.json			
│     └──pages
│        └──index
│           ├──index.css              // 首頁樣式文件	
│           ├──index.hml              // 首頁布局文件
│           └──index.js               // 首頁腳本文件
└──entry/src/main/resources           // 應用資源目錄

`HarmonyOS與OpenHarmony鴻蒙文檔籽料：mau123789是v直接拿`

界面布局

本示例使用卡片布局，將四種實現以四張卡片的形式呈現在主界面。每張卡片都使用圖文結合的方式直觀地向開發者展示所實現效果。

每張卡片對應一個div容器組件，以水平形式分為左側文本和右側圖片兩部分。左側文本同樣是一個div容器組件，以垂直形式分為操作文本與效果描述文本。右側圖片則根據需要使用image組件或image-animator組件。當前示例中，前兩張卡片右側使用的是image組件，剩余兩張卡片使用的是image-animator組件。

< !-- index.hml -- >
< div class="container" >
    < !-- image組件的點擊效果 -- >
    < div class="card-container" for="item in imageCards" >
        < div class="text-container" >
            < text class="text-operation" >{{ contentTitle }}< /text >
            < text class="text-description" >{{ item.description }}< /text >
        < /div >
        < image class="{{ item.classType }}" src="{{ item.src }}" onclick="changeHookState({{ item.eventType }})"
               ontouchstart="changeShadow({{ item.eventType }},true)"
               ontouchend="changeShadow({{ item.eventType }},false)"/ >
    < /div >
	
    < !-- image-animator組件的點擊效果 -- >
    < div class="card-container" for="item in animationCards" >
        < div class="text-container" >
            < text class="text-operation" >{{ contentTitle }}< /text >
            < text class="text-description" >{{ item.description }}< /text >
        < /div >
        < image-animator id="{{ item.id }}" class="animator" images="{{ item.frames }}" iteration="1"
                        duration="{{ item.durationTime }}" onclick="handleStartFrame({{ item.type }})"/ >
    < /div >
< /div >

事件交互

為image組件添加touchstart和touchend事件，實現點擊圖片改變邊框陰影的效果，點擊觸碰結束時，恢復初始效果。

// index.js
// 點擊陰影效果
changeShadow(eventType, shadowFlag) {
  if (eventType === 'click') {
    return;
  }
  if (shadowFlag) {
    this.imageCards[0].classType = 'main-img-touch';
  } else {
    this.imageCards[0].classType = 'img-normal';
  }
}

為image組件添加click事件，實現點擊切換狀態并變換顯示圖片的效果。

// index.js
// 點擊切換狀態
changeHookState(eventType) {
  if (eventType === 'touch') {
    return;
  }
  if (this.hook) {
    this.imageCards[1].src = '/common/images/ic_fork.png';
    this.hook = false;
  } else {
    this.imageCards[1].src = '/common/images/ic_hook.png';
    this.hook = true;
  }
}

為image-animator組件添加click事件，實現點擊播放幀動畫效果。

// index.js
// 點擊動畫效果方法
handleStartFrame(type) {
  if (type === 'dial') {
    this.animationCards[0].durationTime = CommonConstants.DURATION_TIME;
    this.$element('dialAnimation').start();
  } else {
    if (this.animationCards[1].flag) {
      this.animationCards[1].frames = this.collapse;
      this.animationCards[1].durationTime = this.durationTimeArray[0];
      this.$element('toggleAnimation').start();
      this.animationCards[1].flag = false;
      this.$element('toggleAnimation').stop();
    } else {
      this.animationCards[1].frames = this.arrow;
      this.animationCards[1].durationTime = this.durationTimeArray[1];
      this.$element('toggleAnimation').start();
      this.animationCards[1].flag = true;
      this.$element('toggleAnimation').stop();
    }
  }
}

審核編輯 黃宇