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

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

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

相关推荐
方见华Richard5 小时前
世毫九“量子原住民”教育理念完整框架
人工智能·交互·学习方法·原型模式·空间计算
方见华Richard1 天前
世毫九实验室(Shardy Lab)研究成果清单(2025版)
人工智能·经验分享·交互·原型模式·空间计算
微祎_1 天前
Flutter for OpenHarmony:构建一个 Flutter 平衡球游戏,深入解析动画控制器、实时物理模拟与手势驱动交互
flutter·游戏·交互
爱喝白开水a1 天前
前端AI自动化测试:brower-use调研让大模型帮你做网页交互与测试
前端·人工智能·大模型·prompt·交互·agent·rag
呉師傅1 天前
【使用技巧】Adobe Photoshop 2024调整缩放与布局125%后出现点菜单项漂移问题的简单处理
运维·服务器·windows·adobe·电脑·photoshop
王码码20351 天前
Flutter for OpenHarmony 实战之基础组件:第三十一篇 Chip 系列组件 — 灵活的标签化交互
android·flutter·交互·harmonyos
微祎_1 天前
构建一个 Flutter 点击速度测试器:深入解析实时交互、性能度量与响应式 UI 设计
flutter·ui·交互
心疼你的一切1 天前
数字智人:CANN加速的实时数字人生成与交互
数据仓库·深度学习·aigc·交互·cann
晚霞的不甘1 天前
Flutter for OpenHarmony 构建简洁高效的待办事项应用 实战解析
flutter·ui·前端框架·交互·鸿蒙