【连载100篇】AXURE-组件-010-沙漏
2019-04-05 本文已影响3人
duomi88

hi,大家好,我是18岁fantasy,axure组件和实例100篇连载。本期小组件为一个沙漏实例,主要用到axure的全局变量,IF and ELSE 事件,钢笔工具,对象引用等知识点。
文章结尾提供本期组件的原件下载地址,随时可下载。
显示效果

实现方式
1.图层分析。
整个实例主要包含组件如下,左侧的沙漏外框制作后面介绍。


沙漏外框制作
主要用到组件合并,阴影,钢笔工具等完成沙漏外形。具体如下:
合并去除形成基本外形。

钢笔工具制作弧度。

2.添加事件。
沙漏主要原理为:
1,同时改变上下两个矩形的高度,一个增加,一个减少,达到沙漏的效果。
2,当上方矩形高度减少到0(确切的说是1)时,旋转整个沙漏,。
3,旋转后,充值矩形的位置和高度,重新循环第一步。
具体如下:

小经验
axure对象(元件)引用不支持中文别名,需用英文,否则无法获取对象应用的属性。
例如:当我通过局部变量应用一个元件,并通过对象别名获取元件的x(左上角x坐标值)。如果别名为中文就无法获取到x,必须命名为英文。
具体如下:


~以上便是本次小组件的全部内容~
原件下载
链接:https://pan.baidu.com/s/1xRprP8Ee2e1JDuUv7Af7Rg
提取码:of1c
~~~
18岁提示:以上文件完成于axure 8版本。
定期会将组件整理成完整文件统一发布。
原创文章,转载请标明出处。
搜索同名微信公号“18岁fantasy”,也可以看到后续所有文章哦。
