Axure RP 8 企业版 滑块动画制作

Axure RP 8 企业版 滑块动画制作

我所制作的滑块是花瓣网的注册界面的滑动验证，其他网站的滑块验证方法大体相同，效果如图所示！

主要元件：

滑块主要是由矩形，动态面板，热区组成

灰色矩形，

动态面板“BackgroundPanel”，绿色矩形“GreenShape”在这个面板的状态中；

透明矩形“CheckTip”，

动态面板“SliderPanel”，矩形滑块“SliderShape”；

热区“Contact”

思路分析：

1.灰色矩形，作为模块的背景

2.动态面板“BackgroundPanel”，绿色矩形“GreenShape”在这个面板的状态中；这两个元件用于呈现绿背景，所以仅在灰色背景之上

3. 透明矩形“CheckTip”，用于显示验证提示

4.动态面板“SliderPanel”，矩形滑块“SliderShape”；因为元件中只有动态面板才可拖动，所以要将矩形滑块置于其中

5. 热区“Contact”，在整个模块右侧边缘，用于滑块触碰到此元件时，触发验证相关动作

6. 在滑块被拖动时，如果没有触碰到触点元件“Contact”，需要设置滑块为水平拖动，

具体操作：

1.选择一个矩形，设置它的背景颜色为灰色