axure8实现登录界面包含加载登录动画，用户密码输入值的判断

axure8实现登录界面包含加载登录动画，用户密码输入值的判断

本文转自：http://blog.csdn.net/ffacffac/article/details/78361508

       本例子通过axure来实现简单的登录界面，包含类似加载动画，判断用户名密码是否为空的功能。

实现效果如下：

一、  实现登录动画

首先画出如图所示的登录界面图，两个输入框，一个登录按钮，各个控件的命名如下，Ctrl+鼠标左键选中所有控件，点击鼠标右键，选“组合”将这些控件组合起来，如下图所示：

准备一张加载动画，比如这样的图片，根据背景色自己选择加载图片，命名为“登录加载动画图片”将图片拖到登录按钮右边，如下图所示：

选中加载图片，鼠标右键—>“设为隐藏”。

接下来要给登录按钮设置一些事件，双击窗口右边“鼠标单击时”—>在弹出的用例窗口中进行如下图操作：

让加载图片显示出来

接下来设置加载图片动画：

接下来你可以预览一下，加载动画就做好了。

二、  实现用户名密码是否正确

添加一个警告文本，右键单击-->“设为隐藏”

选中登录按钮，双击刚才添加的用例，在弹出的用例框中选择“添加条件”，添加输入框判断条件

以上的条件表示只有用户名，密码输入框的值不为空才能通过。

接下来，再添加一个条件，只要判断到用户名，密码输入框有一个是空的，则显示警告语。步骤为：选中登录按钮-->再次双击“鼠标单击时”再添加一个新的用例，在弹出的窗口中选中“添加条件”

点击确定后，单击“显示/隐藏”-->选中“用户密码不能为空”元件将其显示出来。

到最后登录界面的加载动画和判空就做好了，用户名、密码判断那里你可以指定成自己的值进行判断，可以根据判断到正确的值，跳转的不同的界面。

下载地址：http://download.csdn.net/download/ffacffac/10044320