简易登录界面

我们今天来做一个登录的界面，话不多说，下面跟着我来操作吧。<(￣︶￣)↗[ GO! ]

 一、静态页面

1.布局

我们先在元件库里拉一个矩形出来，用时我们可以给它一些样式，圆角啊，颜色啊啥的，只要喜欢就好。

然后我们再在元件库拉两个文本框，可以在前面加上“账号”，“密码”啥的点缀一下，只要喜欢就好。

我们最好先给文本框命好名，方便查找，然后我们也可以给文本框一些样式，比如去掉边框啥的，主要好看些就好。

然后我们给文本框选择类型，我们账号默认就是选择text样式，然后提示文字可以给写上“请输入账号”。

还有一个密码框，我们在类型选择“密码”，然后提示文字，就可以写上“请输入密码”。

然后我们再去拉一个矩形来做登录按钮，可以给他一点样式让他好看些。

然后我们登录的时候都有一个什么账号密码不能为空什么的，我们也来做一个。

这里可根据自己的喜好做一个，小编这里也是随便做的(● ◡●)

然后我们还可以做一个，登录成功的界面，拉一个矩形里面添加文字就好了，这边小编也是做的简易到不行(～￣▽￣)～。

然后我们可以将这三个提示框给隐藏掉，这样就看不见了。 

二、动态页面

1.账号提示框显示

然后就是给我们这个登录界面添加动画了。

我们这个正常思路就是，如果文本框为无的时候，然后显示那个“账号密码不能为空”。

选择登录按钮，在交互里双击“鼠标单击时”。

点击“添加条件”进行判断。

我们这里要添加两个条件，添加条件点击右边的加号就可以了，一个是如果账号（文本框）==“”无的时候，还有一条就是，如果密码（文本框）==“”无的时候，执行动作。

再添加动作里选择“显示/隐藏”然后选择我们账号的提示框，可见性就选择“显示”。

然后我们可以在设置一个等待1秒钟，给他一个过渡。

然后再给他设置一个隐藏。

这几段话的意思就是：“如果密码（文本框），账号（文本框）为无内容时，然后显示提示框（账号不能为空），然后等待1秒钟过后，隐藏提示框（账号不能为空）。”

2.密码提示框显示

然后就是密码，再次点击“鼠标单击时”，并添加条件。

跟刚才设置不一样的就是，他这里只需要设置一条条件就可以了，就是如果密码（文本框）== “”时，执行交互事件。（这里“”指的就是无内容）。

然后设置显示“密码提示框”，在设置等待1秒钟之后，在隐藏“密码提示框”。

到这里就还有最后一个登录成功界面。

再次选择登录按钮，交互事件里双击“鼠标单击时”。

添加事件里选择“显示/隐藏”，勾选到我们的“登录成功”界面，然后下面有一个更多选项，我们选择“灯箱效果”，动画可以给一个逐渐都可以。

这样子之后我们这个简易的登录界面就完成了，想查看效果，点击右上角的“预览”按钮点击查看就行了。

好了，我们下次再见！