在本章中，你将学会如何创建一个fakeUpdate假装更新网站。
在日常工作中，常常会遇到需要“小憩一会儿”的场景，比如中午点餐、查下快递、打杯热水……这时我们电脑如果熄屏了，又恰巧老板走了过来看到人不在工位电脑又关了，那可就尴尬了。
但如果屏幕一直亮着，开着代码编辑器，又担心被人碰到，真是麻烦。
这时候，我们就需要有一个既能亮着屏幕，又能防止其他人碰到的页面来应对。
本章我们就用Axure9.0来创建一个fakeUpdate假装更新网站。
那么，我们开始吧。
项目创建
首先，创建一个新项目，命名为fakeUpdate。
基础样式
我们在左侧“样式”工具栏中，修改背景的填充颜色为“000000”。
我们从左侧“元件”工具栏拖入一个加载icon组件，点击选中它，组件名称重命名为“加载中”。
并在“样式”工具栏中，把它的填充颜色变为白色“FFFFFF”。
我们再拖入一个“二级标题”组件放在加载icon组件下面。
修改文字为“正在更新68%”，并在“样式”工具栏中，把它的文字颜色变为白色“FFFFFF”。
组件名称重命名为“更新文字”。
同理，再拖入拖入一个“二级标题”组件放在“正在更新 68%”组件下面。
修改文字为“请保持计算机打开状态”，并在“样式”工具栏中，把它的文字颜色变为白色“FFFFFF”。
然后，我们选中所有组件，让它们居中对齐展示。
恭喜你，完成了基础的页面样式的绘制！
交互动作
接下来，让我们梳理下交互逻辑。
我们希望的交互是：
1、加载的icon图标是一直在顺时针旋转的，然后下面的“正在更新”的文字的数字部分是从0开始自增。
2、但为了让我们“离开”的时间长一点，我们的百分比最好增加到某一个数值时就停止，嘻嘻。
梳理完逻辑之后，我们看看如何实现它。
如果我们用常规的交互是没有办法实现的，因为常规的交互动作是一个闭环的动作，也就是执行后会停止。而我们希望的是加载的icon图标一直旋转。
这时候，我们可以用“动态面板”组件来代替这个执行动作。
我们可以拖入一个“动态面板”组件，设置2个状态，然后让它载入时不断“循环”。
我们拖入了一个“动态面板”组件，双击进入，在动态面板状态一栏中添加1个状态，这样我们动态面板就有2个状态：State1、State2。
然后，我们在右侧“交互”工具栏，点击“新建交互”，选择“载入时”，目标选择“动态面板”，状态选择“下一项”，勾选“向后循环”。
点击“更多选项”，我们勾选“循环间隔”，设置为500毫秒，并勾选“首个状态延时500毫秒后切换”。
这样，我们就完成了所谓中间件的构建。
下一步，我们在动态面板右上角点击“关闭”，关闭动态面板，返回到外层。
我们创建一个全局变量，命名叫percentage，初始值为1。
紧接着，我们还是选中“动态面板”，给动态面板加交互动作。
在之前，我们已经完成了动态面板自动切换状态，而且是循环切换。
那么，当动态面板在切换时，我们就可以再它切换的同时，旋转我们的“加载中”icon图标。
我们选中“动态面板”，在右侧“交互”工具栏，点击“新建交互”，选择“状态改变时”。选择“旋转”，目标选择“加载中”图标，旋转方向为“顺时针”，经过“90”度。动画选择“线性动画”，输入500毫秒的间隔。
然后我们设置“更新文字”，在旋转下面点击“添加动作”，选择“设置文本”，目标为“更新文字”，设置为“文本”，值设置为“正在更新 [[percentage]]%”。
我们使用“[[全局变量]]”中括号的形式引用全局变量，这是Axure的引用参数的方式。
这时候，我们只设置了在动态面板改变时，加载中icon图标旋转，但“更新文字”只是读取了percentage的值。
下一步，我们让percentage隔两秒+1。
我们点击“添加动作”，选择“等待”，设置2000毫秒。
我们继续添加动作，在等待2秒后，点击“添加动作”，选择“设置变量值”，目标为percentage全局变量，设置值为“[[percentage+1]]”。
这样，我们就完成了percentage全局变量每2秒增加1的操作。
我们点击预览，在浏览器中看一下效果。
逻辑优化
我们发现一个问题，它好像停不下来。
这是因为percentage不断自增，但没有停止的交互。下面，我们继续优化它。
我们可以设置“不同情形”下的交互动作，比如percentage在<=69的时候，加载中图标一直在旋转，且“更新文字”的数字部分也在增加，而percentage的值超过69后，就只旋转加载中图标。
我们在“状态改变时”的交互动作中，点击“启用情形”，目标选择“变量值”，选择“percentage”，设置条件为“<=”，设置参数为“值”，设置参数值为“69”。
同理，我们再点就“启用情形”，这时候不需要设置条件，把上面“旋转”的动作复制在下面。
我们再在浏览器中预览下效果。
哈哈哈，效果不错！
为了让这个网站能够公开访问，我们可以生成html文件到本地，然后发布到gitHub或者gitee中，这样就可以将网站地址分享给朋友们了。
网站地址
假装更新：ricardowesley.gitee.io/fakeupdate
快来动手试试吧！
如果本专栏对你有帮助，不妨点赞、评论、关注～
