axure中制作地图放大效果很方便，想要添加一个控制条控制图片，不仅仅只是固定的倍率，这次要用“拉杆”滑动的方式，来线性发大“地图”，下面我们就来看看详细的教程，具体效果如下图。
首先，导入上一次设计完成的“地图”控件，如不明白的地方，
当然，“文本标签：X”，“文本标签：Y”，“矩形：1X”，“矩形：2X”，“矩形：3X”可以做隐藏处理~
另新建两个“文本标签”；1.命名为“ratio”，设置为隐藏；2.命名为"describe"，设置内容为"放大比率：1X"；
新建一矩形，尺寸为600*9；
新建一“动态面板”，尺寸为20*30，命名为“handle”，背景颜色为#00FF00；
新建的控件，布局如下：
主要的交互在于“动态面板：handle”，“图片（地图）”的拖动，在上两篇设计中，都有涉及，没有什么变化，主要是控制“图片（地图）”的拖动边界即可，这里不再赘述~
以下，就针对“动态面板：handle”的“拖动时”的交互，做具体说明~
Case1的交互动作：
动作1
拖动“动态面板：handle”；移动方式：水平拖动；动画：无；
其中，“元件：矩形”为局部变量LVAR1；
所以界限，左侧大于等于“[[LVAR1.left]]”，右侧小于等于“[[LVAR1.right]]”；
动作2
设置“文本标签：ratio”的值
其中，“动态面板：handle”为局部变量LVAR1，“元件：矩形”为局部变量LVAR2；所以，“文本标签：ratio”的值为“[[(((LVAR1.x-LVAR2.x)/(LVAR2.width-lvar1.width)+0.25)*4).toFixed(2)]]”
动作3
设置“文本标签：describe”的值
其中，“文本标签：ratio”为局部变量LVAR1；所以，“文本标签：describe”的值为“放大比率：[[LVAR1.text]]X”
动作4
设置“图片：pic”尺寸大小；描点：中心；动画：无；
其中，“文本标签：ratio”为局部变量LVAR1；
所以宽的值为“[[600*LVAR1.text]]”，高的值为“[[375*LVAR1.text]]”
动作5
设置“文本标签：X”的值
设置“文本标签：Y”的值
其中，"动态面板：display”为局部变量LVAR1；
所以X的值为“[[LVAR1.x]]”，Y的值为“[[LVAR1.y]]”；
Case2到Case6的交互动作和“矩形：2X”的动作一致，只需复制过来即可~
具体可参考以下链接~
依旧，所有Case都是<if>判断方式，不是<Else if>；
哈哈，晋级设计感觉超简单，一个用拉杆方式线性放大，缩小的“地图”模拟控件，就做好了~
以上就是Axure地图放大效果并添加控制条的教程，希望大家喜欢，请继续关注脚本之家。
相关推荐：
