Axure怎么制作控制条控制地图放大效果?

axure中制作地图放大效果很方便，想要添加一个控制条控制图片，不仅仅只是固定的倍率，这次要用“拉杆”滑动的方式，来线性发大“地图”，下面我们就来看看详细的教程，具体效果如下图。

Axure RP v8.1.0.3382 Enterprise 中文特别版(附注册机+汉化包+安装教程)

• 类型：辅助设计
• 大小：83.2MB
• 语言：简体中文
• 时间：2019-04-26

查看详情

首先，导入上一次设计完成的“地图”控件，如不明白的地方，

当然，“文本标签：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地图放大效果并添加控制条的教程，希望大家喜欢，请继续关注脚本之家。

相关推荐：

Axure中继器怎么制作饭店菜谱?

Axure怎么制作模拟地图放大效果?

Axure怎么通过变量方式获取输入框中的值?

最新评论