HarmonyOS实现几种常见图片点击效果

一. 样例介绍

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

相关概念

  • image组件:图片组件,用于图片资源的展示。
  • image-animator组件:帧动画播放器,用以播放一组图片,可以设置播放时间、次数等参数。
  • 通用事件:事件绑定在组件上,当组件达到事件触发条件时,会执行JS中对应的事件回调函数,实现页面UI视图和页面JS逻辑层的交互。

完整示例

gitee源码地址

二.环境搭建

我们首先需要完成HarmonyOS开发环境搭建,可参照如下步骤进行。

软件要求

硬件要求

  • 设备类型:华为手机或运行在DevEco Studio上的华为手机设备模拟器。
  • HarmonyOS系统:3.1.0 Developer Release及以上版本。

环境搭建

  1. 安装DevEco Studio,详情请参考下载和安装软件
  2. 设置DevEco Studio开发环境,DevEco Studio开发环境需要依赖于网络环境,需要连接上网络才能确保工具的正常使用,可以根据如下两种情况来配置开发环境:如果可以直接访问Internet,只需进行下载HarmonyOS SDK操作。
    1. 如果网络不能直接访问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();`
`    }`
`  }`
`}`
`
相关推荐
zhanshuo7 小时前
鸿蒙应用调试与测试实战全指南:高效定位问题,性能优化必备技巧+实用代码示例
harmonyos
万少11 小时前
2025中了 聊一聊程序员为什么都要做自己的产品
前端·harmonyos
网络小白不怕黑12 小时前
华为设备 QoS 流分类与流标记深度解析及实验脚本
网络·华为
网络小白不怕黑12 小时前
华为交换机堆叠与集群技术深度解析附带脚本
网络·华为
幽蓝计划1 天前
HarmonyOS NEXT仓颉开发语言实战案例:动态广场
华为·harmonyos
万少1 天前
第五款 HarmonyOS 上架作品 奇趣故事匣 来了
前端·harmonyos·客户端
幽蓝计划1 天前
HarmonyOS NEXT仓颉开发语言实战案例:电影App
华为·harmonyos
HMS Core1 天前
HarmonyOS免密认证方案 助力应用登录安全升级
安全·华为·harmonyos
生如夏花℡1 天前
HarmonyOS学习记录3
学习·ubuntu·harmonyos
jie_07541 天前
鸿蒙系统(HarmonyOS)4.2 设备上实现无线安装 APK 并调试
华为·harmonyos