Axure实战05:创建一个fakeUpdate假装更新网站

简介: Axure实战05:创建一个fakeUpdate假装更新网站

在本章中,你将学会如何创建一个fakeUpdate假装更新网站。

在日常工作中,常常会遇到需要“小憩一会儿”的场景,比如中午点餐、查下快递、打杯热水……这时我们电脑如果熄屏了,又恰巧老板走了过来看到人不在工位电脑又关了,那可就尴尬了。


但如果屏幕一直亮着,开着代码编辑器,又担心被人碰到,真是麻烦。

这时候,我们就需要有一个既能亮着屏幕,又能防止其他人碰到的页面来应对。


image.png

本章我们就用Axure9.0来创建一个fakeUpdate假装更新网站。

那么,我们开始吧。


项目创建


首先,创建一个新项目,命名为fakeUpdate

image.png

基础样式


我们在左侧“样式”工具栏中,修改背景的填充颜色为“000000”。

image.png

我们从左侧“元件”工具栏拖入一个加载icon组件,点击选中它,组件名称重命名为“加载中”。

并在“样式”工具栏中,把它的填充颜色变为白色“FFFFFF”。

image.png

我们再拖入一个“二级标题”组件放在加载icon组件下面。

修改文字为“正在更新68%”,并在“样式”工具栏中,把它的文字颜色变为白色“FFFFFF”。

组件名称重命名为“更新文字”。

image.png

同理,再拖入拖入一个“二级标题”组件放在“正在更新 68%”组件下面。

修改文字为“请保持计算机打开状态”,并在“样式”工具栏中,把它的文字颜色变为白色“FFFFFF”。

image.png

然后,我们选中所有组件,让它们居中对齐展示。

image.png

恭喜你,完成了基础的页面样式的绘制!

交互动作


接下来,让我们梳理下交互逻辑。

我们希望的交互是:


1、加载的icon图标是一直在顺时针旋转的,然后下面的“正在更新”的文字的数字部分是从0开始自增。

2、但为了让我们“离开”的时间长一点,我们的百分比最好增加到某一个数值时就停止,嘻嘻。


梳理完逻辑之后,我们看看如何实现它。

如果我们用常规的交互是没有办法实现的,因为常规的交互动作是一个闭环的动作,也就是执行后会停止。而我们希望的是加载的icon图标一直旋转。

这时候,我们可以用“动态面板”组件来代替这个执行动作。

我们可以拖入一个“动态面板”组件,设置2个状态,然后让它载入时不断“循环”。

image.png

我们拖入了一个“动态面板”组件,双击进入,在动态面板状态一栏中添加1个状态,这样我们动态面板就有2个状态:State1State2

然后,我们在右侧“交互”工具栏,点击“新建交互”,选择“载入时”,目标选择“动态面板”,状态选择“下一项”,勾选“向后循环”。

点击“更多选项”,我们勾选“循环间隔”,设置为500毫秒,并勾选“首个状态延时500毫秒后切换”。

这样,我们就完成了所谓中间件的构建。

下一步,我们在动态面板右上角点击“关闭”,关闭动态面板,返回到外层。

我们创建一个全局变量,命名叫percentage,初始值为1

image.png

image.png紧接着,我们还是选中“动态面板”,给动态面板加交互动作。

在之前,我们已经完成了动态面板自动切换状态,而且是循环切换。

那么,当动态面板在切换时,我们就可以再它切换的同时,旋转我们的“加载中”icon图标。

我们选中“动态面板”,在右侧“交互”工具栏,点击“新建交互”,选择“状态改变时”。选择“旋转”,目标选择“加载中”图标,旋转方向为“顺时针”,经过“90”度。动画选择“线性动画”,输入500毫秒的间隔。

image.png

然后我们设置“更新文字”,在旋转下面点击“添加动作”,选择“设置文本”,目标为“更新文字”,设置为“文本”,值设置为“正在更新 [[percentage]]%”。

我们使用“[[全局变量]]”中括号的形式引用全局变量,这是Axure的引用参数的方式。

image.png

这时候,我们只设置了在动态面板改变时,加载中icon图标旋转,但“更新文字”只是读取了percentage的值。

下一步,我们让percentage隔两秒+1

我们点击“添加动作”,选择“等待”,设置2000毫秒。

image.png

我们继续添加动作,在等待2秒后,点击“添加动作”,选择“设置变量值”,目标为percentage全局变量,设置值为“[[percentage+1]]”。

这样,我们就完成了percentage全局变量每2秒增加1的操作。

image.png

我们点击预览,在浏览器中看一下效果。

image.png

逻辑优化


我们发现一个问题,它好像停不下来

这是因为percentage不断自增,但没有停止的交互。下面,我们继续优化它。

我们可以设置“不同情形”下的交互动作,比如percentage<=69的时候,加载中图标一直在旋转,且“更新文字”的数字部分也在增加,而percentage的值超过69后,就只旋转加载中图标。

image.png

我们在“状态改变时”的交互动作中,点击“启用情形”,目标选择“变量值”,选择“percentage”,设置条件为“<=”,设置参数为“”,设置参数值为“69”。

同理,我们再点就“启用情形”,这时候不需要设置条件,把上面“旋转”的动作复制在下面。

image.png

我们再在浏览器中预览下效果。

image.png

哈哈哈,效果不错!

为了让这个网站能够公开访问,我们可以生成html文件到本地,然后发布到gitHub或者gitee中,这样就可以将网站地址分享给朋友们了。

image.png

网站地址


假装更新:ricardowesley.gitee.io/fakeupdate

快来动手试试吧!

相关文章
|
9月前
|
自然语言处理 Python Windows
|
前端开发
#yyds干货盘点 【React工作记录二十】前端常规关于网页文件下载的问题
#yyds干货盘点 【React工作记录二十】前端常规关于网页文件下载的问题
74 0
|
数据采集
【安排】23行代码爬取知乎全部回答(内附源码和应用程序)
上个月行哥为了给大家推荐书单,1分钟爬取了知乎5646个回答,并统计出前十名推荐量最高的书单给大家分享,并且为了大家使用方便将该篇推文中的代码转成应用程序给大家使用,但是万万没想到 居然有小伙伴要求能不能直接让爬虫代码回答爬取下来做成应用程序
234 0
【安排】23行代码爬取知乎全部回答(内附源码和应用程序)
|
canal 数据库 数据安全/隐私保护
项目的第十七天内容介绍 | 学习笔记
快速学习 项目的第十七天内容介绍
59 0
|
存储 数据库
Axure实战24:创建一个掘金Lottery幸运抽奖工具
Axure实战24:创建一个掘金Lottery幸运抽奖工具
244 0
Axure实战24:创建一个掘金Lottery幸运抽奖工具
Axure实战19:创建一个“每日一句”网站
Axure实战19:创建一个“每日一句”网站
264 0
Axure实战19:创建一个“每日一句”网站
|
前端开发
#私藏项目实操分享# 【React工作记录二十】前端常规关于网页文件下载的问题
#私藏项目实操分享# 【React工作记录二十】前端常规关于网页文件下载的问题
100 0
#私藏项目实操分享# 【React工作记录二十】前端常规关于网页文件下载的问题
|
前端开发
#私藏项目实操分享# 【React工作记录六】如何实现一个图片的伪预览效果
#私藏项目实操分享# 【React工作记录六】如何实现一个图片的伪预览效果
76 0
|
域名解析 网络协议 网络安全
拼搏百天我要日站——扫描工具的基本使用
拼搏百天我要日站——扫描工具的基本使用
186 0
拼搏百天我要日站——扫描工具的基本使用