Axure RP 9 教程—能获取本地时间的钟

用Axure RP 9 beta做一个能获取本地时间稳稳走字儿的钟

 

效果图

Axure RP 9 教程—能获取本地时间的钟

使用工具

?Axure RP 9 beta 绘制原型
?Camtasia 2018 录屏及导出gif

实现逻辑

?[[Now.getHours()]]函数:获取当前小时数?[[Now.getMinutes()]]函数:获取当前分钟数?[[Now.getSeconds()]]函数:获取当前秒数?获取到本地时间后,指针是有初始角度的:

设当前时间为X:Y:Z (即X点Y分Z秒)

时针角度:(X×30+Y×0.5)deg

分针角度:Y×6 deg

秒针角度:Z×6 deg

?指针旋转角度:秒针走60秒 (360deg),分针走6deg,时针旋转0.5deg

实现步骤

?寻找钟表表盘的素材?画出时分秒的指针,注意指针长度,使三个指针的中心点重合?此处需要如下元件,其中时分秒的text用于控制指针的旋转,元件如下图:
Axure RP 9 教程—能获取本地时间的钟
?下图为素材展示:
Axure RP 9 教程—能获取本地时间的钟

?在 页面 增加交互事件

当页面载入时

设置文本

text 时 到 [[Now.getHours()]]

text 分 到 [[Now.getMinutes()]]

text 秒 到 [[Now.getSeconds()]]

设置旋转

时针 to [[Now.getHours()*30+Now.getMinutes()/2]]

分针 to [[Now.getMinutes()*6]]秒针 to [[Now.getSeconds()*6]]

ps. 此时,当页面加载时,我们让指针旋转到了当前时间的角度

?在 text 秒 增加交互事件

文字改变时

if 元件文字 text 秒=“59”
等待 1000ms旋转 秒针 顺时针 by 6°旋转 分针 顺时针 by 6°旋转 时针 顺时针 by 0.5°

设置文本 text 秒 到 “0”

设置文本 text 分 到 “[[LVAR1+1]]”

(注意:在设置 text 分 的文本时,需要设置局部变量,LVAR1 = 元件文字  text 分)

if else

等待 1000ms

旋转 秒针 顺时针 by 6°

设置文本 text 秒 到 “[[LVAR1+1]]”

(注意:在设置 text 秒 的文本时,需要设置局部变量,LVAR1 = 元件文字  text 秒)

?在 text 分 增加交互事件

文字改变时

if 元件文字 text 分=“59”等待60000ms设置文本 text 分 到 “0”设置文本 text 时 到 “[[LVAR1+1]]”(注意:在设置 text 时 的文本时,需要设置局部变量,LVAR1 = 元件文字  text 时)

?在 text 分 增加交互事件

文字改变时

if 元件文字 text 时=“23”等待 3600000 ms设置文本 text 时 到 “0”ps. 到此呢,点击预览就可以收获满满的成就感啦

总结

本案例的原型展示视频中我提到要使用[[Now.toLocaleTimeString()]]函数,但本次教程中更改为使用[[Now.getHours()]]获取即可,这一点需要大家注意。对了,还有一件事:祝大家双十一剁手愉快?
Axure RP 9 教程—能获取本地时间的钟
原型文件下载链接:
https://pan.baidu.com/s/14Dj5JpDuYIb2-zNHq4sYNw
提取密码:o8djGood Bye!!!

psb-2

关注作者公众号,我们一起用心创造快乐

 

本文来自 王得宇AIPM 投稿,不代表 PmTemple 立场,如若转载,请注明出处:

。如有涉及侵权行为,请发送相关证明材料至邮箱admin@pmtemple.com
(6)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
王得宇AIPM的头像王得宇AIPM高级产品经理
上一篇 2018年11月8日 下午8:34
下一篇 2018年12月3日 下午6:11

相关推荐

发表回复

登录后才能评论
微信公众号
微信公众号
edgesensor_high 小程序
小程序
分享本页
返回顶部