效果图
使用工具
🔹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
公众号：他们已经在路上了
关注公众号获取原型下载链接。
