HarmonyOS開(kāi)發(fā)案例：【image、image-animator組件】

介紹

OpenHarmony提供了常用的圖片、圖片幀動(dòng)畫(huà)播放器組件，開(kāi)發(fā)者可以根據(jù)實(shí)際場(chǎng)景和開(kāi)發(fā)需求，實(shí)現(xiàn)不同的界面交互效果，包括：點(diǎn)擊陰影效果、點(diǎn)擊切換狀態(tài)、點(diǎn)擊動(dòng)畫(huà)效果、點(diǎn)擊切換動(dòng)效。

相關(guān)概念

• [image組件]：圖片組件，用于圖片資源的展示。
• [image-animator組件]：幀動(dòng)畫(huà)播放器，用以播放一組圖片，可以設(shè)置播放時(shí)間、次數(shù)等參數(shù)。
• [通用事件]：事件綁定在組件上，當(dāng)組件達(dá)到事件觸發(fā)條件時(shí)，會(huì)執(zhí)行JS中對(duì)應(yīng)的事件回調(diào)函數(shù)，實(shí)現(xiàn)頁(yè)面UI視圖和頁(yè)面JS邏輯層的交互。

環(huán)境搭建

軟件要求

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

硬件要求

• 開(kāi)發(fā)板類型：[潤(rùn)和RK3568開(kāi)發(fā)板]。
• OpenHarmony系統(tǒng)：3.2 Release及以上版本。

環(huán)境搭建

完成本篇Codelab我們首先要完成開(kāi)發(fā)環(huán)境的搭建，本示例以RK3568開(kāi)發(fā)板為例，參照以下步驟進(jìn)行：

1. [獲取OpenHarmony系統(tǒng)版本]：標(biāo)準(zhǔn)系統(tǒng)解決方案（二進(jìn)制）。以3.2 Release版本為例：
   
2. 搭建燒錄環(huán)境。
   1. [完成DevEco Device Tool的安裝]
   2. [完成RK3568開(kāi)發(fā)板的燒錄](méi)
3. 搭建開(kāi)發(fā)環(huán)境。
   1. 開(kāi)始前請(qǐng)參考[工具準(zhǔn)備]，完成DevEco Studio的安裝和開(kāi)發(fā)環(huán)境配置。
   2. 開(kāi)發(fā)環(huán)境配置完成后，請(qǐng)參考[使用工程向?qū)創(chuàng)建工程（模板選擇“Empty Ability”）。
   3. 工程創(chuàng)建完成后，選擇使用[真機(jī)進(jìn)行調(diào)測(cè)]。
   4. 鴻蒙開(kāi)發(fā)指導(dǎo)文檔：[gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md]

代碼結(jié)構(gòu)解讀

本篇Codelab只對(duì)核心代碼進(jìn)行講解，對(duì)于完整代碼，我們會(huì)在gitee中提供。

├──entry/src/main/js	              // 代碼區(qū)
│  └──MainAbility
│     ├──common
│     │  ├──constants
│     │  │  └──commonConstants.js     // 幀動(dòng)畫(huà)數(shù)據(jù)常量
│     │  └──images
│     ├──i18n		                  // 中英文	
│     │  ├──en-US.json			
│     │  └──zh-CN.json			
│     └──pages
│        └──index
│           ├──index.css              // 首頁(yè)樣式文件	
│           ├──index.hml              // 首頁(yè)布局文件
│           └──index.js               // 首頁(yè)腳本文件
└──entry/src/main/resources           // 應(yīng)用資源目錄

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

界面布局

本示例使用卡片布局，將四種實(shí)現(xiàn)以四張卡片的形式呈現(xiàn)在主界面。每張卡片都使用圖文結(jié)合的方式直觀地向開(kāi)發(fā)者展示所實(shí)現(xiàn)效果。

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

< !-- index.hml -- >
< div class="container" >
    < !-- image組件的點(diǎn)擊效果 -- >
    < 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組件的點(diǎn)擊效果 -- >
    < 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事件，實(shí)現(xiàn)點(diǎn)擊圖片改變邊框陰影的效果，點(diǎn)擊觸碰結(jié)束時(shí)，恢復(fù)初始效果。

// index.js
// 點(diǎn)擊陰影效果
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事件，實(shí)現(xiàn)點(diǎn)擊切換狀態(tài)并變換顯示圖片的效果。

// index.js
// 點(diǎn)擊切換狀態(tài)
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事件，實(shí)現(xiàn)點(diǎn)擊播放幀動(dòng)畫(huà)效果。

// index.js
// 點(diǎn)擊動(dòng)畫(huà)效果方法
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();
    }
  }
}

審核編輯 黃宇