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

相关链接

• 目录
• Axure中文学习网
• AxureShop
• AxureShop-QA

---

 1. 了解 放大效果 的实现原理

一、成品效果

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. 图片  不需要任何交互，仅作为图片展示。

 

---

【大图区域】： 只有图片

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

 
需要注意，默认左侧放大镜处于中图的中央位置，所以右侧大图默认也处于中央位置。

---

以上所有尺寸，初次调试时建议使用整数，方便计算，调整完毕后可以尝试使用变量，再改为需求实际尺寸。

---

22/09/29

M