在本章中,你将学会如何创建一个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
快来动手试试吧!