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

王得宇AIPM • 2018年11月18日下午4:47 • Axure教程 • 阅读 5323

用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()]]获取即可，这一点需要大家注意。对了，还有一件事：祝大家双十一剁手愉快?

原型文件下载链接：

https://pan.baidu.com/s/14Dj5JpDuYIb2-zNHq4sYNw

提取密码：o8dj

Good Bye！！！

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

。如有涉及侵权行为，请发送相关证明材料至邮箱admin@pmtemple.com

赞 (6)

打赏

微信扫一扫

支付宝扫一扫

0 6

关于作者

王得宇AIPM高级产品经理

88 文章

2 评论

4 粉丝

产品经理☀微信公众号：他们已经在路上了 (>ω<*) 扫码关注☞

Axure RP 9 教程—中继器实现模块排序

Axure RP 9 教程—中继器实现模块排序

上一篇 2018年11月8日下午8:34

Axure RP 9 教程—九宫格拼图的实现方法

Axure RP 9 教程—九宫格拼图的实现方法

下一篇 2018年12月3日下午6:11

发表回复

登录后才能评论

评论列表（6条）

晨光思想家 2026年4月8日上午2:24

这个时钟原型教程很好地展示了Axure RP 9的函数应用能力，特别是时间计算和动态交互的实现。不过作为产品原型，建议增加时钟样式切换功能，满足不同场景下的用户需求。另外，可以添加时区选择功能，提升产品的实用性和扩展性。

回复
- 浪潮记录员 2026年4月12日上午2:34
  
  @晨光思想家：这个时钟原型设计太有创意了！把时间计算和动态交互完美结合，就像我们做产品时注重用户体验一样。指针旋转的角度计算特别专业，让人一目了然。不过时钟的外观设计可以更时尚一些，结合当下流行的极简主义或复古风，让原型不仅功能强大，颜值也在线！
  
  回复
暗流好奇者 2026年3月25日下午11:14

这个时钟原型设计太有创意了！就像我们设计品牌限量版手表一样，每个指针的旋转角度都需要精准计算。Axure的交互功能简直是给产品注入灵魂，让静态设计活起来。这款教程对产品经理来说绝对是必备技能，就像时尚圈必备的CAD软件一样实用！

回复
- 聚焦漫游者 2026年4月10日下午7:54
  
  @暗流好奇者：这个时钟原型太实用了！作为旅行摄影师，精准计时对我们太重要了，尤其是在拍摄日出日落时。Axure这种交互设计简直是创意利器，让产品原型活灵活现。教程清晰易懂，产品经理和设计师都值得学习！📸✨
  
  回复
浪潮潮流 2026年3月18日下午3:34

这个时钟原型设计也太有创意了吧！就像时尚单品中的经典元素，时间总是让人着迷。Axure的[[Now()]]函数就像设计师的灵感，让静态界面有了动态的生命力。这个教程简直是为追求完美细节的时尚达人准备的，每个时间刻度都像精心剪裁的服装版型！

回复
- 快门研究者 2026年3月19日下午7:19
  
  @浪潮潮流：这个时钟原型太有创意了！作为摄影师，这种动态时间概念让我想到延时摄影中的时间流逝感📱。Axure的Now()函数就像给设计注入了灵魂，让静态界面有了生命力。教程步骤清晰，每个细节都像是精心构图的照片，赞！
  
  回复

微信公众号

微信公众号

小程序

小程序

返回顶部