首先,这不完全是一篇全新的利用axure实现网易云音乐APP播放效果的文章,原始文章在去年已经发布过,你可以参考去年的原文:
网易云音乐Axure实现
现在,基于上一篇文章的自然流量博主重新整理梳理了原文逻辑,并基于最新版的网易云音乐IOS APP重写本教程。
话不多说,按惯例先上实现的效果:
点击体验最新效果
整体效果截图:
首页
视频播放
我的音乐
朋友
音乐识别
音乐播放
实现
本原型实际效果可以在预览地址查看,本文将重点讲述播放器界面的实现过程,其他效果请参考上一篇文章或者本站搜索关键词axure将会有全部内容,本文不再赘述。
1.说明
1.原型共有11个独立页面:
依次为:首页,排行榜,FM,视频,我的,朋友,账号,音乐识别,音乐播放,每日推荐,歌单页面。
2.音乐识别界面效果实现
分析
1.音乐识别效果由首页左上角麦克风图标点击后触发,进入识别页面时开始识别同时效果自动开始。由于音乐识别和首页分别在两个不同页面,所以可以考虑通过全局变量的设置去触发自动开始。
2.效果呈波浪状,由中心向四周扩散。可以考虑通过多个圆交替改变大小实现。交替效果实现方式多种,本例将使用“显示”和“隐藏”元件来实现交替循环。
实例步骤
1.给首页麦克风图标设置如下交互:
musicreg
为全局变量。
2.音乐识别界面添加如下元件:rn
小圆分别命名为:1,2,3,4 设置隐藏;大圆可见 命名为b1,b2,b3rn3.音乐识别界面页面载入事件设置:
判断全局变量musicreg
,如果为1则全选中小圆,最后设置变量为0。
4.小圆交互设置:
以小圆1为例,其他小圆同理:
n5.设置音乐识别页面麦克风点击事件:
判断变量是否为0,为真时重新加载当前页面,从而停止音乐识别动效,当然还有另一种方法实现停止,博主在此偷会懒…至此完成音乐识别界面所有交互。
2.音乐播放界面效果实现
音乐播放实现了如下效果:
1.点击播放按钮音乐开始播放,同时中部的指针接触到唱片,唱片同步旋转
2.底部播放时间秒级递增,时间线同步向右移动;
3.点击中间部分切换到歌词页面,歌词同步向上移动;
4.再次点击播放按钮时所有动作停止,指针远离唱片;
5.时间线可以点击,时间线上的滑块可以拖动,同时时间随着增加。
主要元件准备:
1.动态面板play两种状态:play plus 分别存放播放和暂停图标
2.动态面板slide ,用于时间线上能拖动的滑块
3.SlideBgLine 1px高度的线条或者矩形,用于默认的时间线
4.slide2 动态面板,用于时间线移动时的背景色
5.文本标签start 用于存放当前播放时间
6.文本标签 end 用于存放总时长
7.隐藏的矩形TempPlay/Plus 用于存放播放按钮状态
7.隐藏的文本框TempTime 用于存放播放的时长rn8.动态面板rotion_pannel 唱片上的指针rn9.动态面板 amb-arr 用于唱片
10.隐藏的动态面板lyric-pannel 用于存放歌词
实现思路:
1.当play按钮为播放的时候点击后在内联框架中打开音乐地址,旋转唱片及指针,同时设置唱片和指针的旋转事件旋转当前元件一定角度,就实现了旋转的循环。当按钮为暂停的时候在框架中打开链接设置为空,停止旋转唱片及指针
2.播放的时候设置一个播放状态 TempPlay/Plus 比如播放为1 ,暂停的时候设置TempPlay/Plus为0
3.播放时移动TempTime
4.在TempTime移动的时候设置TempTime的文本值为当前值加一,再次移动TempTime实现时间的递增,同时移动slide lyric-pannel 并设置slide2的宽度rn5.TempTime的移动改变了TempTime的值,但是我们需要这个值一直循环递增,所以还需设置TempTime在文本改变时候的交互
其中slide的移动距离需要如下运算:
[[(LVAR2.width/210)*LVAR1-target.x+77]]
这表示:背景的宽度除以总时长再乘以移动时间得到0秒到当前时间的总移动距离,这个距离需要减去slide上一次在X轴移动的距离同时要加上初始的位置。
start开始时间需要做如下处理:rn由于时间显示是以00:00
这种格式,所以我们需要处理时间一下从TempTime得到的时间格式
0[[(LVAR1/60).toFixed(0)]]:0[[LVAR1%60]]
时间以秒递增,所以我们以当前时间除以60四舍五入取整作为分钟数,当前时间除以60取余数得到当前秒,同时在分钟和秒前添加0得到00:00这种时间格式。
需要说明的是由于是四舍五入取整,所以在小于30s的每个递增10s区间你都要如上设置,而在超过30s到60s之间由于取整满足了入的条件,分钟数额外增加了一分钟数需要减一分钟。
0[[(LVAR1/60).toFixed(0)-1]]:[[LVAR1%60]]
5.slide拖动事件设置:
6.时间线点击事件设置:
cursor.x用于获取点击位置的x坐标值。
如果你还有不清楚的地方你可以在文末下载源rp文件。
你好啊 lylares.com和 https://www.lylares.com 都试过 解压密码还是不正确 能告诉密码或者发我邮箱吗 [email protected] 谢谢
你好哦~站长 密码都不对的呢 搜索过你站内的密码有关内容 试了 都不正确 能不能提供正确密码呢
[email protected]
@lylares 站长,点击官方网盘下载原型的时候显示文件丢失,能否请您修复下?
再来评论一次~~~~~
快掉密码!感谢!!!
想要密码
我就想知道评论成功 推送的邮件有密码吗?我去
谢咯,站长要不要收徒弟呢
这个输入框的动画好好看
密码是多少呢?这个打字的效果很好看啊!,太赞了3
密码错误的,这怎么搞?
不错,想要密码
一直说密码错误。。。
密码一直错误
这个密码[email protected]不对啊,哭
再来试试这个版本,也是提示密码错误呢
音乐播放那块不是很懂。。。。。。需要外链吗
学习大神的思路
密码是什么呀
这个原型做的超级棒啊
非常感谢,支持一下
厉害厉害!!!!
想要密码
厉害
想要密码啊
查看密码
站长真是严格(捂脸),再试一次~
好厉害
学习一下,另外,这个字体输入的效果很赞;
发布到V5了,厉害了
感谢楼主!
楼主好人一生平安~
我真的看不到密码在哪里呀喂,救救我
作者很厉害啊!作为一个想从事前端开发的,我也很想涉猎一下axure交互设计。
求密码
正好想学这个
看不到密码?
牛逼
楼主厉害,学习学习
效果很好,下载学习,谢谢博主
很感谢博主,学到了很多自己试了很久没能掌握的知识。
我发过一次了,哭唧唧,还是没有密码
很棒
谢谢博主
厉害
博主牛逼,邮件啥时候发勒
博主很厉害!感谢博主能够分享这个教程,学习到了很多!
求大神帮帮忙呀
站长太6了,想快点学习,能够像站长一样强大。
感谢感谢
站长大大,求发一份密码,谢谢
为什么发邮件后那个密码还是不会显示的?
站长,那个网易云v5.0的原型评论之后发了邮件了,但是那个密码不会显示啊,还是那样?这是不是出了bug了�� �� ?
站长,评论以后发了邮件后点击以后那行文字不会消失啊,不会显示出密码来,不知道为什么。
站长,为什么邮件发了点击然后不会显示密码的?
牛逼牛逼,希望今后出个更全的
膜拜大神
凭什么有邮件提醒刷新了 解压密码还没有???浪费时间
发个教程资源了不起了哦 牛批
想要密码
暗号。密码?
好棒啊,作者好人
这么强大
学习到了!
好棒
你真是太棒啦
真牛逼
楼主厉害了,值得学习
感谢楼主,一起加油
登录交互界面我已经学习完了,今天过来把网易APP音乐播放界面学了,嘿嘿,每天都要加油!!!
大大 厉害
很棒,我要好好学一波
感谢,找工作需要多研究一下技能
感谢楼主
感谢楼主
感谢楼主
谢谢楼主分享好东西,很有帮助
找工作需要多研究一下技能
谢谢楼主!
做的太好了
今天实训的就是这东西,楼主做的很棒,特别还原
很厉害
厉害
赞
赞
赞
想要
讲的很仔细 棒
刚好实训课再说这个
真的牛皮
大神厉害,需要密码唉
讲得特别好,终于知道插入音频该怎么做了,谢谢作者,这么好的东西都分享出来
大佬下载链接可以发给我一个吗
感谢博主
哪位大神告诉我一下在哪里下载啊
能不能邮件下下载地址呢,二维码扫不出来了
扫码付款了,哪里能下载能?
静待邮箱
想要网易云音乐APP的原型图 想学习一下
厉害
额,为什么我下载下来无法打开呀 是因为我用的8.0吗
怎么才能下载源rp文件啊?
邮件是在哪里看的?
需要网易云音乐V5.0Axure实现的原型文件 谢谢~
我付款了为啥还没收到邮件啊?
为什么我没收到
这东西对我帮助很大