老板,要不要加个钟?

AxureRP8.0教程 小楼一夜听春语 8796℃ 0评论

这是用AxureRP8.0实现的动态时钟效果。

下面我们来看实现过程:

1、准备元件:

这里一共4张图片,分别是表盘“ClockImage”、时针“HoursImage”、分针“MinutesImage”、秒针“SecondsImage”;需要注意的是,时针、分针和秒针的背景要求是透明的,并且图片长度要保证指针上的圆形部分为中心。

1

2、将4张图片摆放好位置。

2

3、页面打开时,需要让指针分别旋转到各自的位置,所以在表盘图片的【载入时】事件中添加相应的交互,【载入时】事件需要在元件的【更多事件】中选择。

3

4、交互的动作只有一个,就是旋转,然后分别勾选不同的指针,去设置角度。

4

5、角度中,我们输入计算角度的公式(见上图虚线矩形中的内容):

时针:[[(Hours+Minutes/60)*30]] ,小时刻度间的角度为30度,(小时+分钟/60)*30,就是当前时针要转动到的位置;

分针:[[(Minutes+Seconds/60)*6]],分钟刻度间的角度为6度,(分钟+秒数/60)*6,就是当前分针要转动到的位置;

秒针:[[Seconds*6]],秒数刻度间的角度为6度,秒数*6,就是当前秒针要转动到的位置;

6、时钟需要连续运动,在页面打开时我们旋转了指针的角度,之后每秒钟还要进行一次旋转。我们可以在秒针旋转时,等待一秒钟后,再次执行旋转的动作。这样,在旋转时,间隔一秒钟再次旋转,就会形成不停地交互循环,达到我们要的动态时钟效果。

6

 

老板,有没有爽到呢?如果没爽到,我下面给你看......

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

看!!!源文件下载:http://pan.baidu.com/s/1i4r0Xql

(本案例使用8.0.0.3279版制作,下载最新版点击这里。)

 

 

--------


~~~~~~~~~~~~ 正文结束 下面没了 ~~~~~~~~~~~~

小楼老师再出新作,倾力打造Axure RP 8精品课程系列,以最短的时间高效完成学习目标,入门进阶与实战案例并重,是0基础的新手从入门到精通的必备课程。

《AxureRP 8 入门与实战 - 入门篇》------从零入门进阶的最佳课程------【点此查看详情】

《AxureRP 8 入门与实战 - 案例篇》------实战手册图书的同步视频------【点此查看详情】


转载请注明:Axure原创教程网 » 老板,要不要加个钟?

喜欢 (3)or分享 (0)
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(8)个小伙伴在吐槽
  1. 早上还在群里研究 下午就有啦。楼总威武
    Lain2016-03-04 15:48 回复
  2. 楼总骚气逼人啊
    EVA2016-03-07 15:13 回复
  3. 秒钟旋转时,配置了线性动画后,当秒针转到0时,就会绕一圈后再回到0
    hebery2016-04-08 16:11 回复
  4. 自从和百度传课合并之后,视频不能播放,试听课程也不可以播放,购买了视频课程,想要转成离线的怎么搞,楼总?
    blinda0012016-06-03 13:37 回复
    • 小楼一夜听春语
      这个问题联系网站客服,看怎么解决吧!如果不能解决,在学员群找我。
      小楼一夜听春语2016-06-03 19:34 回复
  5. 其实,不用这么麻烦,在步骤5中【1】直接把角度设置为360度【2】时针,分针、秒针的动画效果旋转为线性,时间分别为6000、360000、21600000就可以了,不需要什么公式来计算【3】其余步骤和楼大大的一样
    花非花2017-11-06 15:58 回复
    • 小楼一夜听春语
      你这么设置跟系统时间还能对应吗?特别是时针角度还对吗?做完和系统时钟对比一下看看指针的角度就明白了。
      小楼一夜听春语2017-11-06 17:59 回复
      • 亲测可用,其实就是三个针,各走各的,无限转圈就对了。公式弄不太懂,就取巧了一个一个方法、时间我是随便写的,分别对应秒针转动一圈,分针转动一圈和时针转动一圈的时间
        花非花2017-11-08 13:59 回复