Axure实现网易云音乐播放效果[下]

发布于 / 教程 / 39 条评论

首先,这不完全是一篇全新的利用axure实现网易云音乐APP播放效果的文章,原始文章在去年已经发布过,你可以参考去年的原文:

网易云音乐Axure实现

2018.03.13更新: 新版教程已经完成,建议参考新版原型:Axure实现网易云音乐播放效果[下] 2017.12.12更新: 原型文件已经打包上传,需要的童鞋在文末下载 ...
https://www.lylares.com/axure-netmusic.html

现在,基于上一篇文章的自然流量博主重新整理梳理了原文逻辑,并基于最新版的网易云音乐IOS APP重写本教程。
话不多说,按惯例先上实现的效果:
点击体验最新效果


整体效果截图:

首页

网易云音乐Axure实现

视频播放

网易云音乐Axure实现

我的音乐

网易云音乐Axure实现

朋友

网易云音乐Axure实现

音乐识别

网易云音乐Axure实现

音乐播放

网易云音乐Axure实现


实现

本原型实际效果可以在预览地址查看,本文将重点讲述播放器界面的实现过程,其他效果请参考上一篇文章或者本站搜索关键词axure将会有全部内容,本文不再赘述。

1.说明
1.原型共有11个独立页面:
网易云音乐Axure实现
依次为:首页,排行榜,FM,视频,我的,朋友,账号,音乐识别,音乐播放,每日推荐,歌单页面。
2.音乐识别界面效果实现

分析

1.音乐识别效果由首页左上角麦克风图标点击后触发,进入识别页面时开始识别同时效果自动开始。由于音乐识别和首页分别在两个不同页面,所以可以考虑通过全局变量的设置去触发自动开始。
2.效果呈波浪状,由中心向四周扩散。可以考虑通过多个圆交替改变大小实现。交替效果实现方式多种,本例将使用“显示”和“隐藏”元件来实现交替循环。

实例步骤

1.给首页麦克风图标设置如下交互:

musicreg 为全局变量。
2.音乐识别界面添加如下元件:rn网易云音乐Axure实现
小圆分别命名为:1,2,3,4 设置隐藏;大圆可见 命名为b1,b2,b3rn3.音乐识别界面页面载入事件设置:
网易云音乐Axure实现
判断全局变量musicreg ,如果为1则全选中小圆,最后设置变量为0。
4.小圆交互设置:
以小圆1为例,其他小圆同理:
网易云音乐Axure实现
n5.设置音乐识别页面麦克风点击事件:
网易云音乐Axure实现
判断变量是否为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
网易云音乐Axure实现
4.在TempTime移动的时候设置TempTime的文本值为当前值加一,再次移动TempTime实现时间的递增,同时移动slide lyric-pannel 并设置slide2的宽度rn5.TempTime的移动改变了TempTime的值,但是我们需要这个值一直循环递增,所以还需设置TempTime在文本改变时候的交互
网易云音乐Axure实现
其中slide的移动距离需要如下运算:
lylares
[[(LVAR2.width/210)*LVAR1-target.x+77]]这表示:背景的宽度除以总时长再乘以移动时间得到0秒到当前时间的总移动距离,这个距离需要减去slide上一次在X轴移动的距离同时要加上初始的位置。
start开始时间需要做如下处理:rn由于时间显示是以00:00这种格式,所以我们需要处理时间一下从TempTime得到的时间格式
网易云音乐Axure实现
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拖动事件设置:
lylares
lylares
6.时间线点击事件设置:
lylares
lylares
cursor.x用于获取点击位置的x坐标值。

如果你还有不清楚的地方你可以在文末下载源rp文件。

温馨提示 :附件解压密码需评论本文后才能查看,评论成功后刷新页面密码自动显示,评论是否成功以邮件通知为准。


转载原创文章请注明,转载自: LYLARES'S BLOG » Axure实现网易云音乐播放效果[下]

  1. avatar

    厉害

  2. avatar

    想要密码

  3. avatar

    厉害厉害!!!!

  4. avatar

    非常感谢,支持一下

  5. avatar

    这个原型做的超级棒啊

  6. avatar

    密码是什么呀

  7. avatar

    学习大神的思路

  8. avatar

    音乐播放那块不是很懂。。。。。。需要外链吗

    1. avatar
      @一放好多年 加载的一个mp3 链接,可以是外链也可以是本地(服务器)文件。
  9. avatar

    再来试试这个版本,也是提示密码错误呢

  10. avatar

    这个密码netmusic@lylares.com不对啊,哭

    1. avatar
      @想太多星球人 不要问密码了。。。公告已经说了,评论通过自动显示的。
  11. avatar

    密码一直错误

    1. avatar
      @ Big Baby 小程序留言目前有个bug ,可能看不到密码。。。
  12. avatar

    一直说密码错误。。。

    1. avatar
      @想太多星球人 你运气不太好,评论触发了后台垃圾评论回收,所以评论一直没通过,你就看不到密码。以前的密码已经不能用了。
  13. avatar

    不错,想要密码

  14. avatar

    密码错误的,这怎么搞?

    1. avatar
      @佘建 密码是不会错的,你直接复制密码后面会多一个空格。
    2. avatar
      @佘建 密码是不会错的,你直接复制密码后面会多一个空格。
  15. avatar

    密码是多少呢?这个打字的效果很好看啊!,太赞了3

  16. avatar

    这个输入框的动画好好看

  17. avatar

    谢咯,站长要不要收徒弟呢

    1. avatar
      @如步-设计部-刘丽萍(木子) 你是做UI设计还是。
    2. avatar
      @如步-设计部-刘丽萍(木子) 之前做的前端呢 想往产品走
      1. avatar
        @如步-设计部-刘丽萍(木子) 可以的,QQ通过邮箱发你。
  18. avatar

    我就想知道评论成功 推送的邮件有密码吗?我去

    1. avatar
      @如步-设计部-刘丽萍(木子) 收到邮件才说明评论成功,评论成功后再次查看原文,密码自动显示。
  19. avatar

    想要密码

  20. avatar

    快掉密码!感谢!!!

  21. avatar

    再来评论一次~~~~~

  22. avatar

    @lylares 站长,点击官方网盘下载原型的时候显示文件丢失,能否请您修复下?

    1. avatar
      @allen 你好,已经修复,你再试试。
      1. avatar
        @lylares 可以下载了,感谢站长!
  23. avatar

    你好哦~站长 密码都不对的呢 搜索过你站内的密码有关内容 试了 都不正确 能不能提供正确密码呢

    1. avatar
      @gun 密码就在文章 https://www.lylares.com/to-good-guy.html的评论里netmusic@lylares.com
      1. avatar
        @lylares 哦对了站长,5.0版本你使用的是图标字体么?都是问好,自己装的字体库么?
        1. avatar
          @gun 1.几乎所有原型都使用fontawesome 2.电脑不联网使用则需要下载安装字体文件:https://fontawesome.com/ 3.联网下随便找个在线fontawesome css就行,比如:https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css 4.然后在Axure里引入,如果你不会引入可以百度,教程很多的也很简单的
  24. avatar

    你好啊 lylares.com和 https://www.lylares.com 都试过 解压密码还是不正确 能告诉密码或者发我邮箱吗 luscuvip@163.com 谢谢