Axure制作动态时钟

2022-03-23 15:17:33 浏览数 (1)

1、指针（秒针、分针、时针） 2、时钟素材（可自行百度下载后进行适当抠图） 3、动态面板一个，复制State1，重命名为State2 4、一个十字架（可使用平行线和垂足线制作），用于对齐

步骤一

将秒针、分针、时针底部对齐（Ctrl Alt B）并放于十字架中心位置，指针对准12：00方向

步骤二

  1. 双击动态面板State1
  2. 设置交互状态改变时
  3. 添加动作旋转
  4. 选择秒针、分针、时针组件
  5. 将旋转设置为绝对位置
  6. 设置方向均为顺时针，锚点均为底部
  7. 设置锚点偏移为x：0 y：-20
  8. 秒针设置角度为[[Now.getSeconds()*6]]
  9. 分针设置角度为[[Now.getMinutes()*6]]
  10. 时针设置角度为[[(Now.getHours()*30 Now.getMinutes()/60*30).toFixed(0)]]

获取时间的分和秒后*6是因为： 分和秒转一圈是360度，同时转一圈是60分钟/t秒，所以角色是360/60=6 小时*30的原因是： 小时的刻度是12个，一圈360度，一个刻度就是360/12=30度，后面的加号是计算分钟的偏移角度.toFixed(0) 转为整数

步骤三

  1. 设置交互载入时
  2. 设置面板状态
  3. 当前元件，选择状态为Next，向后循环，循环间隔为1000毫秒

步骤四

重复步骤二、步骤三设置动态面板State2

https://sublog.lanzoux.com/irKKPospc7g

next

0 人点赞