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

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

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

相关推荐
Cxiaomu1 天前
AI 聊天流式交互基础:SSE、EventSource 与 ReadableStream
人工智能·交互
colin52102 天前
AxureRP9实例-上传附件教程,并且美化上传元件SL090002
axure·上传附件
电磁脑机2 天前
人脑电磁路由拓扑与外耦合脑机接口基础理论
分布式·神经网络·安全·交互
环黄金线HHJX.2 天前
【从0到1】
开发语言·人工智能·算法·交互
AI_零食2 天前
开源鸿蒙跨平台Flutter开发:极简暗黑风与五行雷达测绘架构
学习·flutter·游戏·华为·开源·交互·harmonyos
AI_零食3 天前
Flutter 框架跨平台鸿蒙开发 - 鸿蒙麻将游戏应用
学习·flutter·游戏·华为·交互·harmonyos
AI_零食3 天前
Flutter 框架跨平台鸿蒙开发 - 鸿蒙版本跳棋游戏应用
学习·flutter·游戏·华为·交互·harmonyos
电磁脑机3 天前
和大脑正确交互的脑机接口研究推演理论
分布式·神经网络·架构·交互·信号处理
清水白石0083 天前
《从同步到消息驱动:现代后端交互模式的深度解析与工程实践》
python·交互
木斯佳4 天前
HarmonyOS 6实战:HarmonyOS轻量化交互的两种方案改造与实践(上)
交互·harmonyos