Axure教程十动态面板滑动效果

作者:课课家教育更新于： 2019-03-15 16:38:50

     下面我们来学习一下Axure动态面板的滑动效果，滑动效果的触发条件，可以是点击按钮或者页面加载等条件出发，是与鼠标指针没有关系的。可以通过2种方法来表达，接下来我们会根据两种方式来实行讲解。

　　首先准备需要的Axure元件：一个矩形元件、一个文本、一个动态面板，同样包含两个矩形，一个作为面板，一个作为登录启动的按钮给动态面板添加一个状态，给每一个元件都加上标签，准备工作就到此结束了。

　　方法一：动态面板滑入滑出方式

　　1、设置文本面板状态“登录”的onclick事件，把登录面板的动态面板滑动调到绝对位置（x,y）图一，x和y代表滑动到指定位置时的x轴坐标为320和y轴坐标为80的值（图二图三），坐标值可以通过拖动动态面板状态到指定位置取得。最后，设置动画效果为缓慢进入。　　2、设置动态面板状态1里面的矩形登录按钮的onclick事件，将点击时动态面板滑动到绝对位置（x,y），这时的x和y代表滑动到初始位置时的x轴为320与y轴为-120的坐标值，设置动画效果为缓慢然后退出。

　　3、点击鼠标右键设置顺序为置于底层，并将动态面板拖到初始位置状态上。

　　4、第一种方式完成，可以生成原型看效果了（图四）。

　　第二种：动态面板状态切换方式

　　我们在开始时候呈给动态面板增加了一个一个状态，在第二种方法里起到作用，具体怎么做呢？我们继续讲解。

　　1、把动态面板选项拖到最终显示的位置，将动态面板状态2上移到第一位置（图五）。

　　2、设置登录面板的onclick事件，设置动态面板的状态为状态1，并设置进行动画为向下滑动。

      3、  设置动态面板状态1里面的矩形登录按钮的onclick事件，为点击时设置动态面板的状态为状态2，并设置退出动画为向上滑动完成后效果如下图。

          总结：方法是不是很简单，其实所有操作都是在同一个状态面板上，前提我们需要先准备元件，然后对其坐标的X与Y轴进行参数设置，然后调慢动画状态，效果就出来了，看点动起手来尝试吧，想学习更多Axure的知识都可以来问我喔。