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

原创 已于 2024-08-08 14:07:03 修改 · 1.2k 阅读 · 20 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#harmonyos #华为 #android #鸿蒙 #前端

于 2024-08-08 14:06:29 首次发布

一. 样例介绍

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，需要通过代理服务器才可以访问，请参考​配置开发环境

  1. 开发者可以参考以下链接，完成设
最低0.47元/天 解锁文章
全网首发鸿蒙 HarmonyOS NEXT星河版零基础入门到实战，零基础也能快速入门鸿蒙开发教程
02-11
### 全网首发鸿蒙 HarmonyOS NEXT星河版零基础入门到实战教程解析 #### 一、鸿蒙开发环境准备与工具下载 本教程旨在帮助初学者从零开始学习鸿蒙 HarmonyOS NEXT 星河版的开发技术。首先，我们需要准备开发环境。...
鸿蒙ArkTS声明式开发：跨平台支持列表【点击回弹效果】 通用属性
2401_82772199的博客
06-11 610
设置组件点击时回弹效果。从API Version 10开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
HarmonyOS实现几种常见图片点击效果
HarmonyOSDev的博客
09-07 1608
设置DevEco Studio开发环境，DevEco Studio开发环境需要依赖于网络环境，需要连接上网络才能确保工具的正常使用，可以根据如下两种情况来配置开发环境：如果可以直接访问Internet，只需进行。HarmonyOS提供了常用的图片、图片帧动画播放器组件，开发者可以根据实际场景和开发需求，实现不同的界面交互效果，包括：点击阴影效果、点击切换状态、点击动画效果、点击切换动效。：事件绑定在组件上，当组件达到事件触发条件时，会执行JS中对应的事件回调函数，实现页面UI视图和页面JS逻辑层的交互。
OpenHarmony实战开发-如何实现组件被点击后样式的动态变化
2401_82546228的博客
05-24 1196
用户在使用应用时，可通过点击、滑动、按压等方式与应用进行交互，例如通过点击选中文件、跳转页面、开关其他组件。而用户在完成点击操作时，组件样式不改变，用户可能无法确定是否点击，或无法确定实际点击的是哪个组件。因此需要在用户进行点击操作时对组件被点击组件的样式进行变化，提升用户的交互感知。
HarmonyOS鸿蒙开发指南:基础组件 image-animator开发指导
斌擎科技
01-09 1199
在本场景中，开发者可通过开始播放、停止播放等按钮切换图片的播放状态。 Image-animator组件通过调用start、pause、stop和resume方法控制图片的开始、暂停、停止和重新播放，通过getState方法查询图片的播放状态。
5.11 image-animator组件
qq_63202674的博客
05-11 437
image-animator 图片帧动画播放器。 支持设备 手机 平板 智慧屏 智能穿戴 支持 支持 支持 支持 权限列表 ohos.permission.INTERNET（如果使用云端路径） 子组件 不支持。 属性 除支持通用属性外，还支持如下属性： 名称 类型
【鸿蒙实战应用开发】HarmonyOS中实现几种常见图片点击效果
HarmonyOS_002的博客
07-09 1681
HarmonyOS提供了常用的图片、图片帧动画播放器组件，开发者可以根据实际场景和开发需求，实现不同的界面交互效果，包括：点击阴影效果、点击切换状态、点击动画效果、点击切换动效。
HarmonyOS应用实战开发—如何实现“图片模糊”效果
m0_70749039的博客
05-31 1300
现在市面上有很多 APP，都或多或少对图片有模糊上的设计，所以图片模糊效果到底怎么实现的呢？
HarmonyOS实战开发-鸿蒙开发应用沉浸式效果实现
最新发布
HarmonyOS007的博客
07-31 1339
●如果你觉得这篇内容对你还蛮有帮助，我想邀请你帮我三个小忙：●关注小编，同时可以期待后续文章ing🚀，不定期分享原创知识。
HarmonyOS开发案例：【视频播放器】
鸿蒙的技术博客
04-22 2824
基于video、swiper和slider组件，实现简单的视频播放器，可支持海报轮播、视频播放等功能。
第九节HarmonyOS 常用基础组件21-ImageAnimator
yyxhzdm的博客
01-31 1757
第一个关键帧取决于playMode，playMode为Normal或Alternate时为form的状态，playMode为Reverse或AlternateReverse时为to的状态。设置图片帧信息集合，每一帧的帧信息（ImageFrameInfo）包含图片路径，图片大小、图片位置和图片播放时长信息。提供帧动画组件来实现逐帧播放图片的能力，可以配置需要播放的图片列表，每张图片可以配置时长。onFinish(event: () => void) - 状态回调，动画播放完成时触发。默认时长为1000ms；
鸿蒙（HarmonyOS）项目方舟框架（ArkUI）之ImageAnimator组件
zy0412326的专栏
02-12 1320
鸿蒙（HarmonyOS）项目方舟框架（ArkUI）之ImageAnimator组件。
Image Animation是什么
qq_15821487的博客
09-07 627
Video generation 是让静止的图片动起来，Image Animation 是视频生成的一个子类，让静止影像中的物体按照驱动视频的运动轨迹运动，这其中要求静止影像和驱动视频的物体属于同一类别。换脸，制造假新闻等等都可以由这个技术完成，这里的物体是脸，叫face animation，主要捕捉的是表情；也可以捕捉人体动作，可以让一个不会跳舞的人也跳起极乐净土。要说这和GAN有什么关系呢，就是因为要生成图片序列，而不仅仅是动作捕捉。而这篇文章的重点其实是动作捕捉来着。
鸿蒙Harmony Os中的@Builder装饰器实现点击切换图片效果
weixin_44455650的博客
04-24 1527
废话不说，我们先来看看实现小案例的效果。效果如下图所示，我们点击文本，文本前面的图片更改。我们定义一个变量change，它是一个布尔类型，当它为true时，显示Plan.png，当它的值为false时，显示Colck.png。如果不适用装饰器，我们就需要在build()中写两次Image()...，显得代码非常的冗余。最后，再build()中，我们只需要调用get_icon，并把相应的图片路径传进去就行。再定义一个@Builder装饰器，这个装饰器的参数是icon，即我们要改变的两个图片。
Harmony应用开发之Button点击效果
Wang丶Yan的专栏
06-25 725
最近一直在研究Harmony应用的开发，也在着手写一些Demo，在写的过程中难免会写到button的点击效果，网上找了一大圈，也没找到关于button点击效果的文章以及介绍，就想着用java代码监听触摸事件，代码如下： cameraBtn.setTouchEventListener(new Component.TouchEventListener() { @Override public boolean onTouchEvent(Component co
鸿蒙ArkUI之Button点击动画效果和声效
qq_14863717的博客
06-22 1278
以上代码实现了在HarmonyOS NEXT平台上，使用ArkTS创建一个带有颤抖动画和点击声音的按钮。按钮点击时，首先播放一个声音文件，然后启动一个动画，使按钮的透明度在0.5和1.0之间变化，模拟颤抖效果。动画结束后，按钮恢复到正常状态。此外，确保你的开发环境中已经配置好了HarmonyOS NEXT的开发工具和环境。请确保你的项目中包含了声音文件。，并且该文件位于项目的。
image+animaton
bigboy1010的博客
06-07 357
最近小程序中有一个图片旋转的需求，最初是想着通过切换多张图片达到旋转的效果，后来发现微信小程序带有动画api，然后就改由image+Animation来实现。 wechat animation.gif 首先在wxml中定义image <image class="bth_image2" mode="aspectFit" animation="{{animation}}" src='../../images/***.png'></image> 注意其中的animat.
AnimateAnything:Fine-grained open domain image animation with motion guidance
liguandong
12-13 380
前一帧和后一帧中的灰度值差异，阈值Tm确定了可移动区域和不可移动区域中的运动强度，如果Tm设置的太高，非移动区域的物体可能出现运动，Tm设置的太低，不可移动的区域中的物体可能完全冻结，可能导致运动区域边界出现伪影，在d中识别这些差异区域的轮廓，并通过将标签1分配给这些轮廓内包含的像素，构建运动区域mask，表示可移动区域m。使用以下方法从真实视频中构建训练对，包括视频和相应的运动区域mask，首先，将给定的N帧视频样本转换为灰度图像，计算超过阈值Tm的帧差异，这些差异被合并为创建差异二值mask，
awtk开发实践——学习篇28： image_animation（图片动画控件）
weixin_42645653的博客
10-21 1138
说明：   本文章旨在总结备份、方便以后查询，由于是个人总结，如有不对，欢迎指正；另外，内容大部分来自网络、书籍、和各类手册，如若侵权请告知，马上删帖致歉。   QQ 群 号：513683159 【相互学习】 内容来源：   官方的手册（免费获取）Pxx=该手册的对应页码xx   github-awtk 控件说明   关于 image_animation_t 控件（图片动画控件） 介绍，对应书 P164。(书中还有更详细内容).     ①指定一个图片前缀，依次显示指定序列的图片，从而形成动画效果。  
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值