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

问题描述:

Axure怎么制作控制条控制地图放大效果?Axure中想要制作一个地图放大效果,并且可以使用控制条控制,下面我们就来看看详细的教程,需要的朋友可以参考下

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

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

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

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

当然,“文本标签:X”,“文本标签:Y”,“矩形:1X”,“矩形:2X”,“矩形:3X”可以做隐藏处理~

另新建两个“文本标签”;1.命名为“ratio”,设置为隐藏;2.命名为"describe",设置内容为"放大比率:1X";

新建一矩形,尺寸为600*9;

新建一“动态面板”,尺寸为20*30,命名为“handle”,背景颜色为#00FF00;

新建的控件,布局如下:

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

主要的交互在于“动态面板:handle”,“图片(地图)”的拖动,在上两篇设计中,都有涉及,没有什么变化,主要是控制“图片(地图)”的拖动边界即可,这里不再赘述~

以下,就针对“动态面板:handle”的“拖动时”的交互,做具体说明~

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

Case1的交互动作:

动作1

拖动“动态面板:handle”;移动方式:水平拖动;动画:无;

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

其中,“元件:矩形”为局部变量LVAR1;

所以界限,左侧大于等于“[[LVAR1.left]]”,右侧小于等于“[[LVAR1.right]]”;

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

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

动作2

设置“文本标签:ratio”的值

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

其中,“动态面板:handle”为局部变量LVAR1,“元件:矩形”为局部变量LVAR2;所以,“文本标签:ratio”的值为“[[(((LVAR1.x-LVAR2.x)/(LVAR2.width-lvar1.width)+0.25)*4).toFixed(2)]]”

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

动作3

设置“文本标签:describe”的值

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

其中,“文本标签:ratio”为局部变量LVAR1;所以,“文本标签:describe”的值为“放大比率:[[LVAR1.text]]X”

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

动作4

设置“图片:pic”尺寸大小;描点:中心;动画:无;

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

其中,“文本标签:ratio”为局部变量LVAR1;

所以宽的值为“[[600*LVAR1.text]]”,高的值为“[[375*LVAR1.text]]”

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

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

动作5

设置“文本标签:X”的值

设置“文本标签:Y”的值

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

其中,"动态面板:display”为局部变量LVAR1;

所以X的值为“[[LVAR1.x]]”,Y的值为“[[LVAR1.y]]”;

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

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

Case2到Case6的交互动作和“矩形:2X”的动作一致,只需复制过来即可~

具体可参考以下链接~

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

依旧,所有Case都是<if>判断方式,不是<Else if>;

哈哈,晋级设计感觉超简单,一个用拉杆方式线性放大,缩小的“地图”模拟控件,就做好了~

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

以上就是Axure地图放大效果并添加控制条的教程,希望大家喜欢,请继续关注。