Axure中继器学习笔记

看大牛的文章，比着步骤，想实现以上功能，反复多次终于有所成就。所以把这些步骤详细的记录下来，以备后续查看。

版本说明：Axure8.0 团队版
网盘资源：http://pan.baidu.com/s/1o8foEYQ （需要的请自取）

1、基本元件制作

step1:制作元件base

• 拖动圆角矩形到页面编辑页
• 设置圆角矩形的位置与尺寸，如设置为x:100，y:100，w:400，h:15
• 设置填充色与边框，如设置填充色为单色的#E4E4E4，边框为None
• 元件命名，如命名为base

元件base.png

step2:制作元件button及plan

• plan的制作过程如base，如位置尺寸为x:100，y:200，w:400，h:15；颜色设置为单色#009DD9，边框为None；命名为plan
• 制作batton，我是自己做的，这个可以自行制作，关键是要命名为button，方便后面使用。

3元件视图.PNG

2、设置元件层次

step1:动态面板

• 将plan转为动态面板，选择后点击右键转为动态面板即可，命名为plan
• 将button同样转为动态面板，命名为button

动态面板图示

step2:设置层次

• 将base置于最底层，上次为plan，最上层为button

层次效果图

3、添加滑动效果

step1:滑动分析

滑动的时候是button动，从而引起plan长度变化，base显露出来。所以滑动效果的触发点就是button，base其实是被上层的plan隐藏了而已。换句话说，button是plan变化的条件。

step2:滑动设置

• 对button添加用例，设置它的移动轨迹：水平移动，移动由plan的左端到plan的右端。按位置来说就是y不变，x由100到500

button水平移动.png

• 仍旧对button添加用例，设置plan的尺寸，因为plan的高没变，只是宽在变。而且宽是按一个变量在动态变化。这个减少的量就是button的x轴左边减去100。所以我们要先设置button为一个局部变量，将这个变量的x轴数值算出来，然后再减去100，就是plan变化的尺寸。

plan随button变化尺寸.png

这样滑动条就做好了。把用例设置的图截下来，方便对照：

用例设置.png

4、设置显示进度

未完待续~~~