Axure教程:实现类网易云音乐APP播放效果

整体效果截图首页:视频播放:我的音乐:朋友:音乐识别:音乐播放:实现本原型实际效果可以在预览地址查看,本文将重点讲述播放器界面的实现过程。1.原型共有11个独立页面:依次为:首页,排行榜,FM,视频,我的,朋友,账号,音乐识别,音乐播放,每日推荐,歌单页面。2.音乐识别界面效果实现分析:1.音乐识别效果由首页左上角麦克风图标点击后触发,进入识别页面时开始识别同时效果自动开始。由于音乐识别和首页分别在两个不同页面,所以可以考虑通过全局变量...

Axure教程:实现类网易云音乐APP播放效果

整体效果截图

首页:

Axure教程:实现类网易云音乐APP播放效果

视频播放:

Axure教程:实现类网易云音乐APP播放效果

我的音乐:

Axure教程:实现类网易云音乐APP播放效果

朋友:

Axure教程:实现类网易云音乐APP播放效果

音乐识别:

Axure教程:实现类网易云音乐APP播放效果

音乐播放:

Axure教程:实现类网易云音乐APP播放效果

实现

本原型实际效果可以在预览地址查看,本文将重点讲述播放器界面的实现过程。

1.原型共有11个独立页面:

Axure教程:实现类网易云音乐APP播放效果

依次为:首页,排行榜,FM,视频,我的,朋友,账号,音乐识别,音乐播放,每日推荐,歌单页面。

2.音乐识别界面效果实现

分析:

  • 1.音乐识别效果由首页左上角麦克风图标点击后触发,进入识别页面时开始识别同时效果自动开始。由于音乐识别和首页分别在两个不同页面,所以可以考虑通过全局变量的设置去触发自动开始。

  • 2.效果呈波浪状,由中心向四周扩散。可以考虑通过多个圆交替改变大小实现。交替效果实现方式多种,本例将使用“显示”和“隐藏”元件来实现交替循环。

实例步骤:

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

Axure教程:实现类网易云音乐APP播放效果

musicreg为全局变量。

(2)音乐识别界面添加如下元件:

Axure教程:实现类网易云音乐APP播放效果

小圆分别命名为:1,2,3,4 设置隐藏;大圆可见 命名为b1,b2,b3

(3)音乐识别界面页面载入事件设置:

Axure教程:实现类网易云音乐APP播放效果

判断全局变量musicreg,如果为1则全选中小圆,最后设置变量为0。

(4)小圆交互设置:

以小圆1为例,其他小圆同理:

Axure教程:实现类网易云音乐APP播放效果

(5)设置音乐识别页面麦克风点击事件:

Axure教程:实现类网易云音乐APP播放效果

判断变量是否为0,为真时重新加载当前页面,从而停止音乐识别动效,当然还有另一种方法实现停止,博主在此偷会懒…至此完成音乐识别界面所有交互。

3.音乐播放界面效果实现

音乐播放实现了如下效果:

  • 点击播放按钮音乐开始播放,同时中部的指针接触到唱片,唱片同步旋转

  • 底部播放时间秒级递增,时间线同步向右移动;

  • 点击中间部分切换到歌词页面,歌词同步向上移动;

  • 再次点击播放按钮时所有动作停止,指针远离唱片;

  • 时间线可以点击,时间线上的滑块可以拖动,同时时间随着增加。

主要元件准备:

  • 1.动态面板play两种状态:play plus 分别存放播放和暂停图标

  • 动态面板slide ,用于时间线上能拖动的滑块

  • SlideBgLine 1px高度的线条或者矩形,用于默认的时间线

  • slide2 动态面板,用于时间线移动时的背景色

  • 文本标签start 用于存放当前播放时间

  • 文本标签 end 用于存放总时长

  • 隐藏的矩形TempPlay/Plus 用于存放播放按钮状态

  • 隐藏的文本框TempTime 用于存放播放的时长

  • 动态面板rotion_pannel 唱片上的指针

  • 动态面板 amb-arr 用于唱片

  • 隐藏的动态面板lyric-pannel 用于存放歌词

实现思路:

  • 当play按钮为播放的时候点击后在内联框架中打开音乐地址,旋转唱片及指针,同时设置唱片和指针的旋转事件旋转当前元件一定角度,就实现了旋转的循环。当按钮为暂停的时候在框架中打开链接设置为空,停止旋转唱片及指针

  • 播放的时候设置一个播放状态 TempPlay/Plus 比如播放为1 ,暂停的时候设置TempPlay/Plus为0

  • 播放时移动TempTime

Axure教程:实现类网易云音乐APP播放效果

  • 在TempTime移动的时候设置TempTime的文本值为当前值+1,再次移动TempTime实现时间的递增,同时移动slide lyric-pannel 并设置slide2的宽度

  • TempTime的移动改变了TempTime的值,但是我们需要这个值一直循环递增,所以还需设置TempTime在文本改变时候的交互:

Axure教程:实现类网易云音乐APP播放效果

其中slide的移动距离需要如下运算:

Axure教程:实现类网易云音乐APP播放效果

[[(LVAR2.width/210)*LVAR1-target.x+77]]这表示:背景的宽度除以总时长再乘以移动时间得到0秒到当前时间的总移动距离,这个距离需要减去slide上一次在X轴移动的距离同时要加上初始的位置。

start开始时间需要做如下处理:
由于时间显示是以00:00这种格式,所以我们需要处理从TempTime得到的时间格式:

Axure教程:实现类网易云音乐APP播放效果

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]]

  • slide拖动事件设置:

Axure教程:实现类网易云音乐APP播放效果

Axure教程:实现类网易云音乐APP播放效果

  • 时间线点击事件设置:

Axure教程:实现类网易云音乐APP播放效果

Axure教程:实现类网易云音乐APP播放效果

cursor.x用于获取点击位置的x坐标值。

本文作者:HideOnBush

Axure教程:实现类网易云音乐APP播放效果

原创文章,作者:交互精选,如若转载,请注明出处:https://www.iamue.com/36049/

(0)
交互精选交互精选
上一篇 2018-03-24
下一篇 2018-03-24

相关推荐

  • UED建筑大师过大年,喜气洋洋温暖了留守娃的心田

    当前浏览器不支持播放音乐或语音,请在微信或其他浏览器中播放世界上最美的花水木年华 - 世界上最美的花编者按:2018年1月19—21日,UED设计年会系列活动在江苏省宿迁市成功举办,共议如何在当下中国,以设计、文化、艺术的力量引领城乡发展。年会系列活动包含“设计·文化·艺术引领下的城市发展和乡村振兴”高峰论坛、第四届全国设计院院长交流会、UED建筑大师过大年等诸多精彩环节。路人甲听说你们也去现场啦?是的呢,我们是带着山里小朋友的心愿去的...

    2018-02-02
  • 我们请50位用户体验了一把Q音的“养生黑科技”

    【快讯】据英国伦敦大学史密斯学院最新研究,两周参加一次演唱会可延长寿命9年。为了亲爱的用户们身体健康心情愉快,QQ音乐团队精心研究,在此成果上推出“食疗续命”公益项目——“肚子饿了!”!4月1日,该项目试点落地北京顺义,经过一番严格筛选,撸串巨星GALA乐队受邀与50位幸运用户共赴春游,在音乐与美食中修身养性,延年益寿。活动后GALA乐队与用户均反馈良好,经非权威机构检测,他们的健康幸福指数在参与“肚子饿了!”后上升显著。科技改变生活,...

    2018-04-10
  • 用通俗的方式告诉你什么是交互设计。

    通常来说,拥有成熟产品的大型互联网公司都会设有交互设计岗位,这个岗位在近几年的招聘市场上也越炒越火。不同于视觉设计师有可视化的作品展示,交互设计师的工作大多无法直观可视化或出于保密性难以对外展示,所以在大众心目中始终是神秘的存在。所以今天就来给大家分享一下我作为一个交互设计师眼中的交互是什么样的。文章的目的是帮助对交互设计不太了解,但工作相关或对此感兴趣的人对交互设计进行基础入门的了解,所以采用了尽量平实简单的描述方式,以帮助大家快速理...

    2018-04-03
  • 交互设计攻略之“竞品分析”上

    前言:无论一个产品是从0到1,还是从1到2,我们需要对自身产品有一个清晰的认知与定位,最快的方式就是竞品调研。知己知彼,取长补短。(这里针对自家产品做的一个竞品调研分享,请勿商用。)首先,我们要确定竞品调研的目的是什么?很简单:为了选取同类型产品功能,可供学习与借鉴的地方,从而对本产品平台进行迭代优化。运用金字塔原理自上而下的方法解决“竞品分析的目的”是找出【同类竞品学习与借鉴】,那么引申的问题如下:一、同类型产品有哪些?想知道同类型产...

    2018-03-16
  • 交互设计毕业的小哥哥小姐姐都在做什么?

    Rania Svoronou作品Written In Sand | Interactive InstallationWalk Me | Internet of ThingsSound Clock | Internet of Things with IntelWhere Were You Last Night? | Art Intervention试听课开始啦,欢迎大家预约平面设计交互设计产品设计三大专业体验课开始啦,带着你的作品集,我们...

    2018-04-30
  • Axure做的APP原型,在手机上怎么预览

    自学Axure,在各大网站查询,终于从小白到学会做基本的交互,再到能在APP端预览自己做好的原型。下面就说一下Axure做的APP原型,在手机上怎么预览?(以苹果手机为例)1原型制作好之后,点击发布→“预览选项”→配置→移动设备,导入做好的图标。2点击发布,“发布到AxShare”。3复制链接,将该链接发送到手机上并使用Safari打开。4粘贴并前往,将原型界面打开。5点击底部工具栏。6选择“添加到主屏幕”。7编辑名称→点击添加。8然后...

    2018-03-18
  • UI设计入门必会:Axure及Adobe系列软件如何安装

    UI设计最最基础的-软件如何正确安装且永久免费试用1、Axure 8.0正确安装、汉化、破解2、UI设计之通过CreativeCloud安装Adobe软件

    微信热点 2018-05-07
  • 干货|关于用户体验,你想知道的都在这里

    昨天,高高老师邀请了北师大本部三位学长学姐分享了心理学用户体验的相关知识以及职业发展的经验。三位主讲者分别是:如如学姐、喵喵学姐、大洲学长,都来自北师珠12级应用心理学系。问:用户体验(UX)到底是什么?答:其实行业内并没有统一说法,我觉得它作为一个动词来说可以指一项研究活动,通过用户体验的研究方法去探究用户在某个情境下的痛点或者是需求,然后再恰当地运用用户体验设计去满足他们的痛点和需求;而且人的需求总是随时间和时代的变化而变化,所以用...

    2018-04-01
  • 用户体验给一百分的应用啊!

    “没想到的是,装了这个桌面应用,可以让手机好玩那么多。”这篇推送,小7就个人使用感受来跟你们聊聊,这个桌面应用给我带来的非一般感受吧。这款桌面应用给我的印象就是:它在尽可能地给你的生活做减法。一、将联系人直接生成桌面图标,点击就能直接拨号,这比将数字键设置为紧要联系人来得更加方便快捷吧。我这部手机大部分都用于工作联系,联系得最多的是我的拍档,这里我可以直接她的联系方式设置为图标,将图标放置于第一页,非常方便。二、底部导航栏可以上滑,惊喜...

    2018-03-24
  • 交互设计牛校排行榜 | 纽约大学ITP研究生项目

    Create Your Difference. by CYDWHO ARE YOU?Do you love biology but also love your art classes你是否热爱生物,也沉醉于艺术and want to merge the two所以想把这两者融入Do you love programming but also like to make things你是否能编程序,也想做出真实的东西Are you int...

    2018-05-06