【鸿蒙实战应用开发】HarmonyOS中实现几种常见图片点击效果

一. 样例介绍

HarmonyOS提供了常用的图片、图片帧动画播放器组件，开发者可以根据实际场景和开发需求，实现不同的界面交互效果，包括：点击阴影效果、点击切换状态、点击动画效果、点击切换动效。

相关概念

● image组件：图片组件，用于图片资源的展示。

● image-animator组件：帧动画播放器，用以播放一组图片，可以设置播放时间、次数等参数。

● 通用事件：事件绑定在组件上，当组件达到事件触发条件时，会执行JS中对应的事件回调函数，实现页面UI视图和页面JS逻辑层的交互。

二.环境搭建

我们首先需要完成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
// 点击阴影效果
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();
    }
  }
}

写在最后

有很多小伙伴不知道学习哪些鸿蒙开发技术？不知道需要重点掌握哪些鸿蒙应用开发知识点？而且学习时频繁踩坑，最终浪费大量时间。所以有一份实用的鸿蒙（HarmonyOS NEXT）资料用来跟着学习是非常有必要的。

这份鸿蒙（HarmonyOS NEXT）资料包含了鸿蒙开发必掌握的核心知识要点，内容包含了（ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、Harmony南向开发、鸿蒙项目实战等等）鸿蒙（HarmonyOS NEXT）技术知识点。

希望这一份鸿蒙学习资料能够给大家带来帮助，有需要的小伙伴自行领取，限时开源，先到先得~无套路领取！！

获取这份完整版高清学习路线，请点击→纯血版全套鸿蒙HarmonyOS学习资料

鸿蒙（HarmonyOS NEXT）最新学习路线

有了路线图，怎么能没有学习资料呢，小编也准备了一份联合鸿蒙官方发布笔记整理收纳的一套系统性的鸿蒙（OpenHarmony ）学习手册（共计1236页）与鸿蒙（OpenHarmony ）开发入门教学视频，内容包含：ArkTS、ArkUI、Web开发、应用模型、资源分类…等知识点。

获取以上完整版高清学习路线，请点击→纯血版全套鸿蒙HarmonyOS学习资料

《鸿蒙 (OpenHarmony)开发入门教学视频》

《鸿蒙生态应用开发V3.0白皮书》

《鸿蒙 (OpenHarmony)开发基础到实战手册》

OpenHarmony北向、南向开发环境搭建

《鸿蒙开发基础》

●ArkTS语言
●安装DevEco Studio
●运用你的第一个ArkTS应用
●ArkUI声明式UI开发
.……

《鸿蒙开发进阶》

●Stage模型入门
●网络管理
●数据管理
●电话服务
●分布式应用开发
●通知与窗口管理
●多媒体技术
●安全技能
●任务管理
●WebGL
●国际化开发
●应用测试
●DFX面向未来设计
●鸿蒙系统移植和裁剪定制
……

《鸿蒙进阶实战》

●ArkTS实践
●UIAbility应用
●网络案例
……

获取以上完整鸿蒙HarmonyOS学习资料，请点击→纯血版全套鸿蒙HarmonyOS学习资料