共计 3363 个字符，预计需要花费 9 分钟才能阅读完成。
一. 样例介绍
HarmonyOS 提供了罕用的图片、图片帧动画播放器组件，开发者能够依据理论场景和开发需要，实现不同的界面交互成果，包含：点击暗影成果、点击切换状态、点击动画成果、点击切换动效。
相干概念
● image 组件：图片组件，用于图片资源的展现。
● image-animator 组件
：帧动画播放器，用以播放一组图片，能够设置播放工夫、次数等参数。
● 通用事件：事件绑定在组件上，当组件达到事件触发条件时，会执行 JS 中对应的事件回调函数，实现页面 UI 视图和页面 JS 逻辑层的交互。
残缺示例
gitee 源码地址
二. 环境搭建
咱们首先须要实现 HarmonyOS 开发环境搭建，可参照如下步骤进行。
软件要求
● DevEco Studio 版本：DevEco Studio 3.1 Release 及以上版本。
● HarmonyOS SDK 版本：API version 9 及以上版本。
硬件要求
● 设施类型：华为手机或运行在 DevEco Studio 上的华为手机设施模拟器。
● HarmonyOS 零碎：3.1.0 Developer Release 及以上版本。
环境搭建
1. 装置 DevEco Studio，详情请参考下载和装置软件。
2. 设置 DevEco Studio 开发环境，DevEco Studio 开发环境须要依赖于网络环境，须要连贯上网络能力确保工具的失常应用，能够依据如下两种状况来配置开发环境：如果能够间接拜访 Internet，只需进行下载 HarmonyOS SDK 操作。
a. 如果网络不能间接拜访 Internet，须要通过代理服务器才能够拜访，请参考配置开发环境。
3. 开发者能够参考以下链接，实现设施调试的相干配置：
● 应用真机进行调试
● 应用模拟器进行调试
三. 代码构造解读
本篇 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 // 利用资源目录
四. 界面布局
本示例应用卡片布局，将四种实现以四张卡片的模式出现在主界面。每张卡片都应用图文联合的形式直观地向开发者展现所实现成果。
每张卡片对应一个 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// 点击暗影成果
// 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();}
}
}