一. 样例介绍

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();    }  }}