Axure;axure

其实Axure;axure的问题并不复杂，但是又很多的朋友都不太了解，因此呢，今天小编就来为大家分享Axure;axure的一些知识，希望可以帮助到大家，下面我们一起来看看这个问题的分析吧！

Axure教程

来人人都是产品经理【起点学院】，BAT实战派产品总监手把手系统带你学产品、学运营。

如何通过拖动滑杆上的按钮，调整数值？

这种部件常见于调节音量大小、色彩值等数值类型的设置。我们来分解一下部件构成，看看如何实现。

这样的部件主要由三个部分组成，一个滑杆轨道，一个用来调节的按钮，还有一个是什么呢？对了就是拖动的进度，因为axure里的部件不支持设置部分填充，所以这里会用另一个大小相同的轨道，通过设置不同的填充颜色来表示当前拖动的进度。

这里使用动态面板是为了应用它的“Fit to Content”（适应内容）属性，这个属性在应用之后，动态面板中的内容只会在指定大小范围内显示，其它区域不可见。

考虑到拖动的进度最大是轨道长度，最小为0，而为了隐藏在进度小100时的部分，需要将动态面板的“Fit to Content”（适应内容）勾选去掉，这样在超出屏幕之外的内容将不可见。

最终两个动态面板初始的样子如下：

动态面板的事件很丰富，拖动事件是其中最重要的事件之一。我们利用拖动事件，来动态显示当前改变值的大小，直观显示。

将滑杆和小按钮转成一个动态面板，移动到内容的最左边，只显示出小按钮，表示当前位置在0。再将该动态面板和滑杆轨道再转成一个外层的动态面板，注意给动态面板起个名字，便于后面选择。

为第一个动态面板添加onDrag事件，选择move操作，在右边选择该动态面板，设置为只沿x轴移动（with drag x），并且在x轴上的移动范围：left>=-300 并且 left<=0。

因为我们画的轨道宽度并不是刚好100，可能大于或小于100，例如这个例子里，轨道宽度为300，因此我们要根据当前被拖动的动态面板的x位置，来计算在轨道上移动的百分比。公式如下：

[[(100-Math.abs(LVAR1.x)/3).toFixed(0)]]

使用局部变量LVAR1表示动态面板，这样好取它的x位置。计算方法为根据当前x位置除以3（因为全长300，除以3刚好等于100），注意要用100减掉这个值，而且因为当前位置是负值，所以这里使用了取绝对值（Math.abs(值)）的方法去掉负号，最后结果取整(toFixed(0)表示小数位为0，即没有小数)。

到这里滑杆调值基本完成了。

知道大致思路后，就可拓展做成你想要的原型效果了，这就要看你的需要啦！

本文由 @Axure原型设计工场 原创发布于人人都是产品经理 ，未经许可，禁止转载。

Axure教程

来人人都是产品经理【起点学院】，BAT实战派产品总监手把手系统带你学产品、学运营。

之前曾发过一个教程，用来显示秒表的，《如何用Axure设计锤子手机的秒表计时器》，当然这个和锤子手机的秒表无任何关系，唯一有联系的就是分、秒级的计算和显示。

今天，随着axure8的推出，它的旋转功能，终于让我们可以真的可以实现锤子的世界时间。

这个例子其实很简单，可以学习到知识点有下面三个：

1. 只用到了日期相关函数
2. axure8的旋转功能
3. 以及通过显示和隐藏来循环处理的技巧

只是这次我们做的是高保真的效果，背景图部分使用了锤子的截图，重新画了下小时、分钟和秒钟的指针。

到花瓣上找张锤子手机时钟的背景图，使用PS重新简单制作了小时、分钟和秒钟的指针，这三个指针图片的大小和宽度一样，因为axure8里的旋转是围绕部件的中心旋转的，所以这里统一了大小，方便旋转处理。

三个指针要在水平和垂直方向对齐，这样就会围绕着相同的中心点旋转。

另外在axure里设置了下三个指针的阴影效果。

在显示事件里等待一秒后再隐藏，隐藏事件里淡入淡出显示指针，然后开始计算当前时间，旋转指针到正确的位置。

为了先触发循环，在页面加载时先触发部件的隐藏事件，另外将时钟移到页面中央。

怎么样，足够简单吧，可以自己试一下哦！

有任何问题欢迎随时交流。

本文由 @Axure原型设计工场 原创发布于人人都是产品经理 ，未经许可，禁止转载。