失眠网 > 1.4_20 Axure RP 9 for mac 高保真原型图 - 案例19 【放大效果】

1.4_20 Axure RP 9 for mac 高保真原型图 - 案例19 【放大效果】

时间：2022-07-27 12:54:46

一、成品效果

Axure Cloud 案例19【放大效果】

版本介绍

一、放大效果

1.1 鼠标在商品图片上移动，右侧显示对应区域放大镜效果

1.2 限制放大器的移动范围，不可超出商品图片

二、商品切换

2.1 鼠标点击商品小图，大图切换至相应商品

2.2 默认选中第一个商品

2.3 选中的商品会显示对应效果（边框+变灰）

二、素材准备

准备若干商品图片，处理成大小相等的正方形。再去iconfont 下载一个放大镜图片(色号#7F7F7F、PNG格式)。

图片准备三份：小图(50x50)，中图(300x300)，大图(900x900)

三、制作方法

3.1 结构

页面大致分为4部分：【小图区域】、【中图区域】、【大图区域】、【背景】

【小图区域】：分为热区、边框、悬停、图片

1. 热区点击热区，设置边框和悬停效果的选中状态（注意至于同一选项组内）

2. 边框选中后体现蓝色边框效果。同时切换中图、大图的动态面板到对应页面（注意至于同一选项组内）

3. 悬停默认透明色，位于图片上层。选中通过改变背景色，体现出置灰的效果

4. 图片不需要任何交互，仅作为图片展示。

【中图区域】：分为热区、放大镜、其他、图片

1. 热区

x：[[Cursor.x - Target.height /2]]
y：[[Cursor.y - Target.height /2]]

其中：
Cursor.x：表示获取鼠标在坐标系中的x轴坐标值。
Cursor.y：表示获取鼠标在坐标系中的y轴坐标值。
Tartget.height：表示目标元件的高度值，由于是正方形，其宽高都一样；
注意：设置边界范围，放大镜不能超出中图区域范围。具体数值自己多测试就明白了。
计算放大镜移动坐标时，进行了一个偏移校正的操作。
偏移校正：指让鼠标处于放大镜中心位置。
为了更直观的说明什么是偏移矫正，现假设。x轴=[[Cursor.x]]，y轴=[[Cursor.y]]，则会出现以下情况：

2. 放大镜移动时，右侧大图（所有分页一起）都移动到相应位置

x：[[(This.x - 100) * (-3)]]
y：[[(This.y - 100) * (-3)]]

这里就是一个简单地数学计算，但解释起来比较麻烦，自己根据实际情况测试吧

>
放大原理：看似是先读取放大镜部分图片，再放大展示到右侧。其实是利用动态面板特性，右侧图片在移动。

动态面板特性：只显示动态面板框的位置。
为了更直观的说明什么是动态面板特性，使用gif动图演示：
红框：动态面板实际范围
蓝框：为了演示，调大之后的动态面板范围
通过上面动图可以清晰的看出来放大效果的原理。

3. 其他一个图片外边框（矩形），一个准备的素材（iconfont 搜索放大镜）

4. 图片不需要任何交互，仅作为图片展示。