Axure怎么制作日历日期选择框效果?

时间:2021-05-22

想要制作一个日期选择框,该怎么制作选择日期的效果呢?平时我们查看电子日历的时候,可以根据年份月份日期也发生改变,并可以点击选择日期,该怎么实现这个效果呢?下面我们就来看看详细的教程。

软件名称:
原型设计工具Axure RP Pro 8.1特别版 中文汉化特别版(附汉化包+注册码+安装教程)
软件大小:
90.5MB
更新时间:
2018-05-24立即下载

1、首先我们在Axure中拖动一个矩形作为日期选择呈现,命名为日期选择框,并按需设计效果,这里我设计悬停及选中为浅蓝色

2、接着拖动一个矩形框作为承载日期的底部面板,在样式中设计阴影效果

3、接着制作相关日期,相关箭头可以在阿里巴巴矢量图标库找到。拖动两个矩形作为年和日期摆放,用两种箭头作为年和月的调整,即点击双箭头跳上一年下一年的效果,单箭头跳换上个月下个月的效果。同时为箭头设置悬停效果

4、接下来设计日期,不属于本月的时间字体较属于本月的更灰些,同时鼠标移至对应日期时字体变为蓝色效果

5、之后将有关日期的组合并转换为动态面板并设置为隐藏

6、在日期选择框中设计事件交互,当点击时切换显示动态面板并向下滑动、隐藏动态面板并向上滑动。如图

7、接下来设计选中相关日期时,日期选择框文本变为选中日期的时间,以1号为例,新建单击交互事件,当点击时日期选择框为当前年月(即一开始用来表示2019年12月的矩形)文本值加上选中的日期。动态面板向上滑动隐藏。设计完事件后点击预览没问题之后将1号上的事件复制黏贴到其他可选择的日期上。之后点击预览,可以看见基本的日期选中效果完成。

8、接下来我们要设计关于年和月的切换。关于这部分的思路大致如下:因为每一年每个月所对应的日期都是不一样的,所以需要利用动态面板建立多个状态,当点击时设置动态面板切换到对应的状态即可。有兴趣的朋友可以思考一下如何设计。

9、由于Axure演示原型时不需要这么准确,所以我们可以点击相关箭头时使文本变成对应文本就行,但是问题在于我们没办法知道当前点击时需要变成什么文本,点击了多少次。所以要利用全局变量来实现这个效果。

10、回到年月的矩形框,我们先新建两个全局变量,一个作为年,一个作为月,然后默认年为2019,月默认为12

11、关于箭头<的逻辑如下:当点击<时,

1)判断当前月是不是1月,如果是1月,全局变量year减一,全局变量month值为12月。

2)如果不是1月就全局变量month减一

关于年月的文本值为year年month月

12、关于箭头>的逻辑如下

1)如果当前月为12月,全局变量year加一,全局变量month值为1月

2)如果当前月不是12月,则全局变量month加一

关于年月的文本值为year年month月

13、关于箭头《的逻辑比较简单,点击时全局变量year-1即可,最后再设置关于年月的文本值为year年month月。箭头》同理,点击时全局变量year+1即可,最后再设置关于年月的文本值为year年month月。如下图

14、最后再点击预览,基本的日期选择器交互效果就完成了

以上就是Axure设计日期选择框的教程,希望大家喜欢,请继续关注。

相关推荐:

Axure中继器怎么制作穿梭框效果?

axure怎么制作页面标签切换的效果?

Axure模型怎么添加角标? axure四分之一圆角标的做法

声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。

相关文章