Axure如何实现图片预览效果
需求：鼠标放置到图片上，右侧出现放大后的预览效果
场景：设置该需求的场景为浏览某宝页面的宝贝页详情，此时需要浏览商品的细节效果
目标人群：所有在网页上浏览淘宝的顾客
解决方案：通过Axure的设计实现这一效果的预览
将工作粗略地分为两个部分，准备工作和正式工作，准备工作主要是一些素材准备、静态效果设置，而正式工作则是对已经放置好的动态效果插入复杂的交互效果（决定到需求实现的交互效果）
第一部分：准备工作
1.截取素材放置到Axure中
图片尺寸：大图为500*500，缩略图随意
图片位置：x100，y100（涉及后方步骤中坐标的计算）
2．任意位置放置一个动态面板
a. 双击动态面板—添加一个状态
b. 选择动态面板—交互—载入时—设置面板状态—下一项—循环间隔10ms
Tip：因为需要实时监测，所以需要一个动态面板（通过设置其面板状态）来辅助
3.放置一个矩形，大小为200*200，命名为预览框，自由发挥设置成预览框的样式
4.将宝贝图片转化为动态面板命名左面板
a.添加三个状态将后两张图片依次放入状态2、3，并将该面板命名为左面板2（后面要在该面板之上再放置一个动态面板命名为左面板1）
b.在左面板2上添加一层动态面板，并将此面板命名为左面板1
Tip：在已有动态面板（左面板2）上再次添加动态面板（左面板1）是因为经过下述操作要实现，鼠标移入时显示预览框，鼠标移出时隐藏预览框。并且不会影响到左面板2的内容。
5.选中左面板1—鼠标移入时—显示预览框—鼠标移出时—隐藏预览框
6.添加动态面板命名右面板—放入三张图片（还是三张宝贝图片），尺寸设置为1250*1250
7.在右面板2上再添加一层动态面板命名右面板1
Tip：此时，想要实现的效果，就是让右面板2进行移动，而右面板1不需要动
注意：右面板2应该勾选自适应内容（右键—勾选自适应内容）
8.选中左面板1—添加显示/隐藏 右面板1的效果
至此，准备工作结束。
第二部分：正式工作
1.实现预览框随着鼠标移动而移动的效果
选择辅助动态面板—状态改变时—移动—预览框—x插入局部变量[[Cursor.x-200]]—y插入局部变量[[Cursor.y-200]]
Tip：这里的局部变量坐标如何来的？
如上图所示，左面板的起始位置为（100,100）
鼠标在页面上的坐标为原始坐标，而预览框在动态面板中的坐标是加上了（100,100）的
所以如果要让预览框随着鼠标指移动的话，必须在鼠标原始坐标的基础上xy各减去100
此时，预览框随着鼠标指针移动的位置会聚焦在预览框的左顶点上，而我们的效果是聚焦在预览框的中央
根据预览框大小为200*200，
故而将上述已经减去100的坐标再将xy各减去100（总共为x-200,y-200），即可将显示效果调节为
预览框随着鼠标指针移动，并且聚焦在预览框的中心位置。
简略地讲：
x坐标：cursor.x-左面板1的x坐标-预览框x坐标的一半
y坐标同理
当然，计算这个鼠标移动坐标也可以通过插入预览框的函数来做
2.选中动态面板—移动—右面板2—移动到…
方案1
方案2
Tip：负号的原因是因为相对于预览框，右面板2的移动的方向是相反的，逻辑如下：
预览框的坐标是相对于原商品图来说的，鼠标怎么移动，预览框里面的内容也会怎么移动
而放大后的预览框即右面板2，其是相对于右面板1来说的，即右面板1不动，右面板2里的内容应当根据预览框移动方向的相反方向进行移动，
才能实现预览框框住原图的内容与右面板1中显示右面板2（放大后的图）中的内容同步移动。
3.在上述操作后添加预览框移动的边界，也即不要超出左面板1的范围，左面板作为一个500*500大小的动态面板其范围如下图
4.添加右面板2移动的边界，也即不要超出右面板1的范围
Tip：因为右面板1尺寸为500*500，再加上右面板2为反向移动，所以右面板2的底部>=-750,右侧>=-750，顶部和左侧<=0即可。
5.选中页面空白处——页面载入时——隐藏预览框和右面板1
6.选中第一个小预览图——单击时——设置面板状态——左面板2到状态1——右面板2到状态1
其他两个小预览图同理设置，切换到对应的动态面板状态2、3即可
至此，所有工作结束。
第三部分：预览效果
点击"阅读原文"跳转原型预览界面
公众号内关键词"预览"获取原型图预览二维码
1
END
1
Wei Waves
Recording wei waves
记录微小电波
