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

快来动手试试吧!

目录
打赏
0
0
0
0
76
分享
相关文章
《花100块做个摸鱼小网站! 》第四篇—前端应用搭建和完成第一个热搜组件
本文档详细介绍了从零开始搭建一个包含前后端交互的热搜展示项目的全过程。通过本教程,读者不仅能学习到完整的项目开发流程,还能掌握爬虫技术和前后端交互的具体实践。适合有一定编程基础并对项目实战感兴趣的开发者参考。
117 1
总有一个是你想要的分享31个游戏源代码
该资源分享了31款游戏源代码,包括C#版植物大战僵尸、HTML5版五子棋等,均经过亲测可运行。下载链接中还包含13款游戏源码,适合游戏开发者和爱好者学习参考。作者辛苦整理,希望得到您的点赞与关注作为支持。
306 1
《VitePress 简易速速上手小册》第10章 维护与更新(2024 最新版)
《VitePress 简易速速上手小册》第10章 维护与更新(2024 最新版)
227 2
分享31个游戏源代码总有一个是你想要的
分享31个游戏源代码总有一个是你想要的
290 0
前端知识笔记(三十四)———HBuilder的下载与使用(详细步骤)
前端知识笔记(三十四)———HBuilder的下载与使用(详细步骤)
393 0
|
11月前
|
前端知识笔记(十八)———页面首次滑动不可返回
前端知识笔记(十八)———页面首次滑动不可返回
43 0
【随笔】学习记录、实用脚本
文章目录 工作随笔 一、kafka 1.1 基础命令 二、es 1.1 基础命令 三、实用小脚本 3.1 判断文件中是否有某个对应的值
129 0
【随笔】学习记录、实用脚本
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等