Axure-局部放大图片交互

前言:

说起局部放大图片的交互大家第一想到的是哪个场景呢,博主第一反应PC端的购物应用,我们在看到某件衣服时可以通过滑块放大衣服局部以供用户查看衣服的细节。

制作:

一、静态页面的制作:今天我们就来临摹一下当当网,先完成静态页面的制作。

二、当鼠标移入服饰大图下面对应服饰时,对应大图随之改变,这里大家可以使用动态面板的方式,但这里博主图个新鲜,使用设置图片交互。这里需要注意,我们需要先上传一张服饰大图并将其命名为【img】,然后将我们需要用到的图片保存在本地。

三、接下来制作可在服饰大图内部可以滑动的滑块,用以实现后期当滑块滑到哪个区域对应区域展示放大效果。

先用一个热区覆盖住服饰图片的位置,并将其命名为【隔板】,该位置就是我们滑块可移动的位置。

再拖入一个矩形不透明性设置到20左右,长宽均只有【隔板】热区的一半,改动态面板就是我们的滑块,我们将改动态面板命名为【滑块】。

在正式做滑块交互前,我们先说一下本次交互需要用到的函数,axure中函数很多,这里我们不需要刻意的去学,即用即学即可。

Cursor.x:鼠标所有x轴坐标的值

Cursor.y:鼠标所有y轴坐标的值

top:元件顶部y轴坐标

left:元件左边x轴坐标

right:元件右边x轴坐标

bottom:元件底部Y轴坐标

height:元件的高度

width:元件的宽度

这些变量学习起来其实很简单,但是axure没有打印变量值的功能,对很多干过开发的同学可能会有点不习惯。

接下来设置【滑块】可自由移动的交互。这里我给大家解释下为什么要这样做,假设【隔板】的坐标为(0,0)【滑块】的长宽分别为200,如果鼠标x轴的位置在100,那么X轴坐标则为100-200/2,y轴也是同理,鼠标永远都在【滑块】的中心位置。

做完以上交互我们会发现现在【滑块】的移动是没有边界限制的,现在我们实现边界限制的交互。

接下来制作当【滑块】滑到某个区域时,对应区域放大展示。

新增【放大图】动态面板大小设置为(400,400)与原本【隔板】大小保持一致,在【放大图】动态面板中新增衣服图片。大小是【隔板】的两倍,并设置为隐藏,接下来我们来看下交互。

当鼠标放在【隔板】中时则展示【放大图】因为【放大图】紧紧的挨着【隔板】【放大图】动态面板的面积也是与【隔板一致】【放大图】的大小又比【滑块】大两倍。故而有如下交互。

这个样例写的太累了,先这样吧,应该也说明清楚了。

相关推荐
xy345316 小时前
Axure 9.0 中继器核心结构
前端·ui·html·axure·原型·产品设计
易点云徐源2 天前
(已解决)Photoshop 2020 点击“选择主体”闪退:不用重装,1 个配置切回旧算法解决
windows·photoshop
Htr_2 天前
Creem 2.0 使用指南:面向 AI 构建时代的资金平台
android·数据库·人工智能·ui·photoshop
xy34534 天前
Axure 9.0 中继器创建与设置步骤
前端·ui·html·axure·原型·产品设计
hhzz4 天前
OpenCV 入门到精通 09】特征检测与匹配:从 Harris 到 ORB 图像配准
人工智能·opencv·计算机视觉·开源·交互
兰亭妙微UI设计公司5 天前
兰亭妙微APP界面设计公司分享: iPhone Duo 登场|3 大核心要点,拆解折叠屏 UI 适配设计思路
ui·交互
智购科技自动售货机工厂5 天前
2026自动售货机端侧AI降本逻辑:从云端API到本地推理的成本重构~YH
人工智能·python·ui·面试·交互
羑悻的小杀马特6 天前
数据织网者:Jsoncpp库深度解析——从C++原生JSON处理到工程级数据交互实战全攻略
c++·json·交互·jsoncpp·原生库
Cc_ovo_2426 天前
PS人像发丝怎么抠干净?3种精细方法告别残缺毛边
photoshop·ps教程·ps抠图·ps抠发丝·ps抠人像·抠图去背景
大江东去浪淘尽千古风流人物7 天前
【UniSim-SLAM】前馈SLAM的双流架构:Sim(3)统一位姿图、与经典SLAM及DPVO的三范式对比
深度学习·计算机视觉·3d·交互·人体姿态估计·eccv·3d重建