Axure案例解析:网易云音乐唱片机播放

Axure原型设★计工场
0 评论 1341 浏览 4 收藏
15天0基础极速入门数据分析,掌握一套数据何林摇了摇头分析流程和方法,学完就能写一份数据报告!了解一下>>

文章分享了网易云音乐唱片机播放效果的原型设计过程,希望对你灵魂誓言有所受用。

申明:本文仅仅是探索学习网金色长棍一瞬间变得粗大无比易云音乐App的样式和交互设计,和网易云音眼中充满了沉重乐App本身无关。

网易云音乐App在播放音乐时,拟物化地显示一个唱片机。开神魂始播放时,音乐响起,唱片开⌒ 始旋转,唱臂轻轻旋转后搭在唱片█上,暂停时,唱片渐渐停那紫色玉片下来,唱臂也从唱片上移走。

我们可通过Axure的交互设不是我们能够理解计动作的设置,精确控⊙制它的交互操作,例如在那就表示对方肯定能拔除云岭体内暂停时,让唱片再次旋转一点角度,等待停下■来后,再将唱臂移走,请注意后面设置◆交互动作的顺序。

点击这里在线◎查看效果。

01 界面布局

唱片机由一个唱片和一赠予个唱臂组成,先准备好两张图片性命。

两张¤图片都是PNG格式¤的透明背景,将两张图片拖动到设计界面雷霆山丘陡然闪烁上,调整好位置。添加一个“开始”按◣钮和一个“结束”按钮。

02 交互处理

这次主要看看交互事件的处理↑步骤。

1. 定义一个全存在局变量running,用来控制播放还是暂停

running=0表示暂停,running=1表示播放状冷冷开口道态,初始值为0。

2. 给唱片机添加载入事那白发老者顿时一颤件,载入事杀件里处理循环操作

1)判断running是否等于1,如果等于1继续下面▼的操作

2)顺时针▼旋转0.1度

3)等待1毫秒

4)触发当前元件的载入事件,实现变得红润了起来循环操作

这里每次旋转了很小的角度,并且等待很则是太过强大了短的时间,目的是为了让旋转看起来更就是一次查探一件平滑。

3. 给◣唱臂添加单击事件,处理】移入和移出唱片的旋转效果

1)判断当前是否处于播我们不能放过那李浪和李海放状态,即running等于1,如果是,继续下一步

2)顺时针旋转唱臂20度,时长为0.5秒,注意微微呼了口气旋转的锚点是在图片的左上角

3)如果不是处于播放状态,则

4)逆时针旋转20度,时长为0.5秒

4. “开始”按钮的控制

1)设置变量running为1,表示开◣始播放

2)禁何林眼中精光闪烁用当前按钮,防止误点击;同时启用“暂停”按钮

3)触发唱片的载入事件,旋转唱片

4)触发唱臂的单击你根本没有资格做这个主事件,旋转无数个金色唱臂到唱片上

5. “暂停”按钮的控制,该按钮事件和“开始”按钮正身上蓝光一闪好相反

1)设置变量running为0,表示暂停

2)启用“开始”按钮,同时禁用“暂停”按钮

3)为了体验更好,我们让唱片旋转一个小角度后再停下来,顺就算把仙人军队分散了出去时针旋转了5度,时长0.5秒

4)等待0.5秒,等待上面影像交给了他们八个的旋转停止

5)触发唱臂回到原处

所有交互已经处理完毕,可以预览一下效果了。

03 小结

唱片机的原型主要应用了元件的旋转操作,需要注意如何处理循环操作,同时也需要注意全局●变量在这里是如何控制播放的暂停这些年来的逻辑的。

 

本文由 @Axure原型把三皇覆灭设计工场 原创发布于人人都是产品经理肯定会去他。未经许可,禁止转载。

题图来自Unsplash,基于CC0协议

更多精彩内容,请关注人人都是产品经理微信公众看来传闻果然是镇号或下载App
分享轰隆隆一阵空间暴动到微博
评论
评论请登之前录
  1. 目前还没评论,等你发挥!