Axure实例教程之动感切换登录注册面板

　　使用AxureRP8中的一些基本功能，我们实现一个动态切换的登录注册面板。

　　效果图：

　　有没有感觉很滑、很爽的样子?

　　接下来，例行公事。

　　先做分析，再实现步骤。

　　问：用户做了什么?

　　答：用户点击了两个标签。

　　问：给用户什么反馈?

　　两个顶部的标签被【鼠标单击时】要完成以下动作：

　　被点击的标签需要放大尺寸，而另外一个标签需要缩小尺寸。

　　与上一个动作同时，登录注册面板要对应的切换内容。

　　好了，分析完毕，接下来我们看实现过程。

　　一、准备元件

　　两个标签用无边框矩形，分别命名为“LoginTag”和“RegisterTag”，然后，设置不同的填充颜色，并且设置圆角后，在样式中取消3个不需要的圆角。

　　下方的面板，我们使用动态面板，命名为“Panel”，双击打开动态面板管理，修改“State1”的命名为“Login”;然后，点添加按钮，新增一个状态，并命名为“Register”;*，在动态面板的两个状态中，分别放入登录面板的元件和注册面板的元件。

　　提示：这一步操作也可以先做好登录面板，全选登录面板的元件，点击鼠标右键，选择【转换为动态面板】，然后双击动态面板，点中*个状态后，点重复按钮，在新添加的状态中将登录面板内容改为注册面板内容。

　　二、添加交互

　　1、为每个元件添加【鼠标单击时】的交互，动作为【设置尺寸】于“当前元件”为放大后的尺寸，设置另外一个元件为缩小后的尺寸，动画选择【线性】时长为“500”毫秒。不过要注意，元件“LoginTag”的锚点是【左上角】或【左侧】，元件“RegisterTag”的锚点是【右上角】或【右侧】。

　　2、继续在用例中添加动作【设置面版状态】于“Panel”为对应的状态，并设置【进入动画】和【退出动画】，时长均为“500”毫秒。

　　注意：两个动画方向保持一致，并且选择状态为“Login”时，动画是【向右滑动】，选择状态为【Register】时，动画是【向左滑动】。

　　到这里，我们就完成了这个带有动态切换效果面板的制作。

　　贵阳航洋动漫职业学校是贵阳市教育局批准(贵阳市教[2010]15号)设立的跨专业(包含计算机平面设计、动漫与游戏制作、影像与影视技术、绘画等专业)、多门类、全日制中等专业职业学校，同时也是一所实行准军事化管理的学校。