效果图

使用工具

🔹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

实现步骤

step one——素材

🔹寻找钟表表盘的素材

🔹画出时分秒的指针，注意指针长度，使三个指针的中心点重合

🔹此处需要如下元件，其中时分秒的text用于控制指针的旋转，元件如下图：

🔹下图为素材展示：

step two——交互

🔹在 页面 增加交互事件

当页面载入时

设置文本 

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

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

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

设置旋转

时针 to [[Now.getHours()*30+Now.get

Minutes()/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. 到此呢，点击预览就可以收获满满的成就感啦

对了，本rp文件是Axure RP 9 beta版本制作，Axure 8及以下版本无法打开，大家后续如果需要低版本原型，我会上传。

作者：王得宇AIPM

公众号：他们已经在路上了

关注公众号获取原型下载链接。