一.?樣例介紹

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

相關(guān)概念

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

完整示例

gitee源碼地址

二.環(huán)境搭建

我們首先需要完成HarmonyOS開發(fā)環(huán)境搭建，可參照如下步驟進(jìn)行。

軟件要求

• DevEco?Studio版本：DevEco?Studio?3.1?Release及以上版本。
• HarmonyOS?SDK版本：API?version?9及以上版本。

硬件要求

• 設(shè)備類型：華為手機(jī)或運(yùn)行在DevEco?Studio上的華為手機(jī)設(shè)備模擬器。
• HarmonyOS系統(tǒng)：3.1.0?Developer?Release及以上版本。

環(huán)境搭建

1. 安裝DevEco?Studio，詳情請(qǐng)參考下載和安裝軟件。
2. 設(shè)置DevEco?Studio開發(fā)環(huán)境，DevEco?Studio開發(fā)環(huán)境需要依賴于網(wǎng)絡(luò)環(huán)境，需要連接上網(wǎng)絡(luò)才能確保工具的正常使用，可以根據(jù)如下兩種情況來配置開發(fā)環(huán)境：如果可以直接訪問Internet，只需進(jìn)行下載HarmonyOS?SDK操作。
   1. 如果網(wǎng)絡(luò)不能直接訪問Internet，需要通過代理服務(wù)器才可以訪問，請(qǐng)參考配置開發(fā)環(huán)境。
3. 開發(fā)者可以參考以下鏈接，完成設(shè)備調(diào)試的相關(guān)配置：

• 使用真機(jī)進(jìn)行調(diào)試
• 使用模擬器進(jìn)行調(diào)試

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

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

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

四.界面布局

本示例使用卡片布局，將四種實(shí)現(xiàn)以四張卡片的形式呈現(xiàn)在主界面。每張卡片都使用圖文結(jié)合的方式直觀地向開發(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)畫效果。文章來源地址http://www.zghlxwxcb.cn/news/detail-704142.html

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