【连载100篇】致敬皇后乐队特别篇-AXURE-组件-009-m
2019-04-03 本文已影响1人
duomi88

hi,大家好,我是18岁fantasy,axure组件和实例100篇连载。
3月份在国内上映的《波西米亚狂想曲》凭借完美的还原皇后(queen)乐队的诞生到成熟,到最后大放异彩而备受影迷期待,男猪脚也成功获得届奥斯卡金像奖最佳男主角。皇后乐队的精神及其音乐也因此从重新回到大众身旁。
本期小组件为通过一个模拟的音乐播放器配以queen团队靓照封面,以此致敬皇后乐队。组件主要用到axure的阴影效果,及部分函数计算。
显示效果

实现方式
1.图层分析。后续讲解各组件的制作过程,具体如下:

撞针制作:
通过钢笔工具勾画杆的部分,配以其他圆圈制作而成。
碟片制作:
通过黑色阴影填充制作拉丝效果;
通过阴影实现光晕效果;
具体如下:

整体框架:

添加事件
为播放和停止按钮添加事件。
单击播放按钮时,启动图片动态面板旋转以及旋转撞针到指定位置。并将按钮切换为停止按钮状态。
当点击停止按钮,图片动态面板停止旋转,并恢复撞针到原始位置。
这里用到了全局变量的切换,以便axure通过判断全局变量的值来启动对应逻辑,达到停止和启动旋转的效果。具体如下图:


关于撞针的旋转和恢复里面用到了三角函数相关计算,否则很难将不规则的形状旋转后再恢复到原始位置。大家可以一试。关于这个问题后面单独一篇介绍。
~以上便是本次小组件的全部内容~
原件下载
链接:https://pan.baidu.com/s/1ssbM5-S4uvzdl_D0pQbb0g
提取码:u19y
~~~
18岁提示:以上文件完成于axure 8版本。
定期会将组件整理成完整文件统一发布。
原创文章,转载请标明出处。