网易云音乐Axure实现

2018.03.13更新：
新版教程已经完成，建议参考新版原型：Axure实现网易云音乐播放效果[下]

2017.12.12更新：
原型文件已经打包上传，需要的童鞋在文末下载。

2017.11.04更新：
新的视觉表现，适应5.5英寸以上屏幕。原效果已经无法正常预览，一不小心把源文件从服务器中删除了。。。
最新版：点击预览

原效果：点击预览

• 在线预览音乐播放可能会延迟，歌词也可能不同步，这是由于服务器问题。
• IOS下可能音乐播放无声音，这是框架的问题，PC端正常播放
• 首页第一张轮播图为视频，可以点击观看。
• 建议使用5.5英寸及以上屏幕手机浏览，Chrome浏览。

最近做了一个网易云音乐移动端的原型，使用工具为Axure,尽可能做成了高保真的效果。现分享一下播放界面的制作过程，因为播放界面对于播放时间、歌词同步、播放状态等都涉及到用函数实现，稍微复杂些。

网易云音乐APP最近进行了一次更新，UI方面变化较大。本着兴趣，再次尝试更新原型，目前尚未完成：

整体效果图：

首页效果

视频播放

音乐界面

音乐歌词界面

音乐识别新的特效

实现

1.分析结构

首先分析整个界面构成，点击底部导航菜单时候，上部分内容依次改变，音乐播放界面的入口始终在顶层。所以我们大致可以把整个界面分为两大部分：上部内容部分以及底部导航栏。

结构已经清晰，那么内容部分就可以用内联框架去加载，点击每个导航菜单下的内容依次加载发现音乐、我的音乐、朋友、账号 页面内容。左图空白部分是整个界面的核心部分：内联框架，下部分是导航菜单。

2.实现同步系统时间

在右上角会有一个两个状态的动态面板，在页面加载的时候会以1s的时间去切换状态。这个面板是为了实现时间同步系统时间，实现步骤很简单：在动态面板状态改变的时候-设置时间显示在一个文本框上面即可。
小时部分：

[[0.concat(Now.getHour()).substr((0.concat(Now.getHour()))).length-2,2)]]

分钟部分:

[[(0.concat(Now.getMinutes()).substr((0.conncat(Now.getMinutes())).length-2,2)]]

这里用到了几个函数：.concat() 用于字符串的连接、Now.getHour()用于获取系统小时数、 Now.getMinute()获取系统分钟数、.substr(x,y)从参数x开始截取y个字符串、.length 获取字符串长度 。我们想要的格式是这样：00:00

首先分析小时数：Now.getHour()获得的小时可能是一位数的我们可以在前面填充0来补足位数于是就用0.concat(Now.getHour())
但是这个函数连接了0和小时数，当小时数超过1位数的时候获得的值可能是这样010，这显然不符合我们的要求，我们需要得到后面的两位数10，于是substr()函数有用了:substr((0.concat(Now.getHour()))).length-2,2)
substr()从0.concat(Now.getHour() 的length-2位置，也就是倒数第二位开始截取并截取2位数，于是010变成10。分钟数的实现方法同理不再赘述。到这里同步系统时间完成。

3.音乐播放界面实现
首先要实现这样的效果：
点击播放按钮音乐开始播放，同时中部的指针接触到唱片，唱片同步旋转，底部播放时间秒级增加，剩余秒级时间减少，时间线变成红色同步向右移动。点击中间部分切换到歌词页面，歌词同步向上移动。再次点击播放按钮时所有动作停止。指针远离唱片。

元件准备：

1. 播放按钮为动态面板play，状态为未播放时的play已经播放时的plus
2. 播放时间为文本框star,剩余播放时间为end文本框
3. 中间的状态线为动态面板slide小圆点，动态面板slide_frontcol包含一条红色线条slide_colorline位置（-206,0），初始状态线slide_line位于slide_frontcol下一层
4. 中部顶层为一个热区，实现点击切换歌词界面
5. 中部底层为一个动态面板poc_fm包含默认状态fm和歌词界面gc（fm状态里有唱片pic_pod以及指针xz_line；gc状态里一个动态面板里包含歌词lyric矩形、两个阴影矩形  实现当前歌词突出显示）
6. 一个位于底部的内联框架用于音乐文件的加载
7. 右上角有一个隐藏的具有两个状态的动态面板’时间控制’，也是播放时间控制得以实现的核心元件

分析：
以上所有的动作都由播放按钮触发，播放按钮有播放和暂停两种状态，所以播放按钮可以用一个动态面板以两个状态分别表示播放和暂停。

音乐的加载用内联框架实现。

音乐时间用两个变量playtime和playtime2表示，变量的初始值为00:00和总时长03:30，用一个以1s切换一次的动态面板去控制播放时间刚好以1s步进，两个变量分别递增和递减。音乐播放的时候切换这个动态面板，那么时间就随之改变了。

单击点击播放按钮时候，切换播放按钮状态，判断播放按钮所处的状态，如果在播放就把指针旋转到原来位置。停止音乐播放，切换播放按钮状态为停止。如果没有播放则播放音乐，设置时间控制动态面板状态开始循环变化，旋转指针和唱片。

时间控制面板状态改变的时候设置两个变量值并水平移动底部的时间线，同步垂直移动歌词面板。

播放按钮的点击事件以及状态改变事件 以及“时间控制”动态面板的状态改变事件：

播放时间值：

[['0'.concat(math.floor(playtime/60)).slice(-2)]]:[['0'.concat(playtime%60).slice(-2)]]

math.floor()：返回小数向下最接近的整数
剩余时间值：

[['0'.concat(math.floor(playtime2/60)).slice(-2)]]:[['0'.concat(playtime2%60).slice(-2)]]

时间线水平移动值：

[[playtime/210*200+b.x]]

时间控制里的其他项是控制歌词的移动，实现歌词和歌曲的同步。

slide线条移动：