【案例教程】Axure实现移动端顶部栏时分秒电子时钟效果(上)

介绍:

本案例主要讲解移动端的顶部栏,如何实现时分秒动态变化的效果,类似于电子时钟,要实现该效果有两个关键点:

  1. 如何获取当前的时、分、秒
  2. 获取时分秒后,如何让时间动起来,达到每秒钟变化一次的效果

要实现上述两个关键点的效果,需要用到Axure的日期函数和动态面板

预览:

https://www.youzhifang.net/axure/prototype/ZS/ZS0018

涉及知识点:

1、动态面板

  • 循环间隔设置
  • 向后循环

2、日期函数的使用

  • 时:getHours() 获取给定⽇期对象“⼩时”部分数值(0 ~ 23)
  • 分:getMinutes() 获取给定⽇期对象“分钟”部分数值(0 ~59)
  • 秒:getSeconds() 获取给定⽇期对象“秒数”部分数值(0 ~59)

3、交互动作

  • 动态面板-载入时事件
  • 动态面板-状态改变时事件
  • 设置文本动作

重点步骤:

1、将显示时间的文本命名为“时分秒”(用于查找)

【案例教程】Axure实现移动端顶部栏时分秒电子时钟效果(上)

2、拖入动态面板到画布中,命名为“辅助实现时间实时变化”

【案例教程】Axure实现移动端顶部栏时分秒电子时钟效果(上)

3、为“辅助实现时间实时变化”动态面板增加一个子面板,只用添加即可,不用做其他操作

【案例教程】Axure实现移动端顶部栏时分秒电子时钟效果(上)

4、为“辅助实现时间实时变化”动态面板,设置交互:载入时-设置面板状态,选择“辅助实现时间实时变化”动态面板

【案例教程】Axure实现移动端顶部栏时分秒电子时钟效果(上)

5、设置状态为【下一项】,勾选【向后循环】,在更多选项中勾选【循环间隔】并取消勾选【首个状态延迟1000毫秒后切换】。

此步骤设置完毕之后,就可以得到每隔1秒变化一次的效果。

实现的原理是:借助动态面板的两个子面板,每隔1秒自动切换到下一个面板,反复切换来实现动态变化

【案例教程】Axure实现移动端顶部栏时分秒电子时钟效果(上)

接下来是获取当前的时分秒

6、选中“辅助实现时间实时变化”动态面板,设置交互:状态改变时-设置文本,选择“时分秒”文本

【案例教程】Axure实现移动端顶部栏时分秒电子时钟效果(上)

7、点击【fx】编辑文本,插入函数

【案例教程】Axure实现移动端顶部栏时分秒电子时钟效果(上)

8、设置文本值为:[[Now.getHours()]]:[[Now.getMinutes()]]:[[Now.getSeconds()]]

【案例教程】Axure实现移动端顶部栏时分秒电子时钟效果(上)

设置完毕后预览,即可看到时分秒实时变化的效果了

【案例教程】Axure实现移动端顶部栏时分秒电子时钟效果(上)

以上步骤可实现时分秒实时变化的效果,但在显示时,如果时分秒不足两位数,就会出现“9:48:1”这种情况,而实际日常使用大部分会显示“09:48:01”,具体教程可查看

【案例教程】Axure使用函数实现时分秒电子时钟补零效果(下)

相关教程:

【Axure 函数】之时间日期函数概览

原创文章,作者:院长大大,如若转载,请注明出处:https://www.axureschool.cn/291127.html

发表评论

登录后才能评论