<img src="http://upload-images.jianshu.io/upload_images/2051268-af2fc12dc00f7522.gif?imageMogr2/auto-orient/strip" align=center />
看大牛的文章，比着步骤，想实现以上功能，反复多次终于有所成就。所以把这些步骤详细的记录下来，以备后续查看。
版本说明：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、设置显示进度
未完待续~~~
