《Axure网易云音乐听歌识曲界面效果模仿操作实例》是一篇关于Axure的学习教程,通过简单几步就能实现教程中的效果图效果,当然只学习这一点,并不能完全掌握Axure技巧;你可以通过此加强页面,制作,添加交互等多维度案例或实操来进行更多的学习;此教程是由福到家在2021-07-02发布的,目前为止更获得了 1 个赞;如果你觉得这个能帮助到你,能提升你Axure技巧;请给他一个赞吧。
网易云音乐是个十分不错的的音乐软件,它的听歌识曲界面不知道你是否有注意过,下面教程就给大家分享一下如何用Axure制作模仿网易云音乐APP的听歌识曲界面效果,具体操作步骤如下:
从左侧元件库拉入一个【椭圆形】,尺寸为100*100,填充色为红色,再复制4个作为声波圆圈。
其次,从图表库中拉入一个【话筒】图标,填充色为白色,选中话筒和所有圆圈,居中对齐。状态栏等其他页面元素可忽略,后面分享的文件有,具体页面元素命名如下:
1. 实现圆圈波纹的效果
选中【圆圈1】,给其添加【载入时】事件。
第一步:设置尺寸变化
选择左侧的【元件】-【设置尺寸】-勾选【当前元件】-,宽高设置为300*300,锚点为【中心】,动画为【线性】,时间为【2000毫秒】,设置如下:
第二步:设置透明度变化
选择左侧的【元件】-【设置不透明】- 勾选【当前元件】-,不透明值为【0】,动画为【线性】,时间为【2000毫秒】,设置如下:
第三步:设置等待事件
选择左侧的【其他】-》【等待】,时间为【2000毫秒】,设置如下:
第四步:让元件变为原来大小
选择左侧的【元件】-》【设置尺寸】-》勾选【当前元件】,宽高设置为100*100,锚点为【中心】,动画为【无】,设置如下:
第五步:变为原来的透明度
选择左侧的【元件】-》【设置不透明】-》勾选【当前元件】,不透明值为【100】,动画为【无】,设置如下:
第六步:设置触发事件
选择左侧的【其他】-》【触发事件】-》勾选【当前元件】-》,选中【载入时】事件,设置如下:
2. 制作其它的圆圈波纹的效果
复制【圆圈1】的交互事件,分别粘贴到【圆圈2】、【圆圈3】和【圆圈4】,预览效果如下:
这时发现四个圆圈的波纹效果重叠了,还需要给每个圆圈加不同的等待时间,并放在交互动作的最前面。
【圆圈2】为【500毫秒】、【圆圈3】为【1000毫秒】、【圆圈4】为【1500毫秒】。设置及动作顺序如下:
学习更多教程,可关注本人公众号:艾斯的Axure峡谷。
欢迎大家留言评论,也可以留下你期待看到的交互效果。
示例演示:
以上就是Axure网易云音乐听歌识曲界面效果模仿操作实例的全部内容介绍了,关于更多Axure教程信息,欢迎关注北极熊素材库,给你带来最丰富的素材图片和最有用的教程,更多最新资讯。
赠人玫瑰,手有余香
< 上一篇 axure9全局变量和局部变量的应用情况及操作实例
> 下一篇 AxureRP9跑马灯效果操作实例
2022-08-24 09:29
2022-05-09 10:55
首席设计师
高级视觉设计师
高级插画设计师
输入的验证码不正确
评论区
暂无评论