Axure教程:能播放音乐的播放器(含视频教程)

259 篇文章 24 订阅
69 篇文章 1 订阅

今天作者教大家用中继器以及网易云外联播放器,做一个真的能够播放音乐列表的音乐播放器原型,快点学起来吧!

一、原型预览效果

原型预览地址:https://axhub.im/ax9/40a17c8ae07219e2/#g=1&id=hton1h&p=%E9%9F%B3%E4%B9%90%E6%92%AD%E6%94%BE%E5%99%A8

加入原型分享群,可免费分享该原型及视频教程,详情请咨询微信522073109

 

二、材料准备

图片×1,文本×5(歌名-歌手、介绍、分享、评论、点赞),图标×3(分享、评论、点赞),按钮×2(上一首、下一首),矩形×1(code),中继器×1(默认设置分页显示,每页显示一行)。

将矩形放在中继器内,如下图所示摆放:

三、歌曲准备

我们要上网易云音乐,找到自己喜欢的歌曲,点击生成外联播放器:

我们可以修改播放器尺寸、播放模式,完成后复制代码:

四、中继器表格

需要设置一下几列:

  • Column0就是刚刚我们复制的代码,直接复制进去即可;
  • pic代表歌曲的封面图片,右键导入图片或者复制粘贴均可;
  • songsinger代表歌曲-歌手,手动输入,或者在excel表格输入好再复制会较快;
  • introduce代表歌曲的介绍文字,手动输入,或者在excel表格输入好再复制会较快。

五、交互设置

中继器每项加载时:分别设置介绍、歌名歌手、矩形code的文本值为[[Item.introduce]]、[[Item.songsinger]]、[[Item.Column0]],设置图片,将图片的值设为item.pic。

矩形载入时:这里要用回之前在Axure高级教程:做一个能在Axure中引用html、ccs、js等代码的控件文章中说到的方法,调用js,具体可以看回我之前写的文章。

下一首按钮鼠标单击时:这里要分两种情况,如果该页是不是最后一页,那么我们需要设置中继器到下一页;如果是最后一页,那我们就设置中继器到第一页。

上一首按钮鼠标单击时:这里同样要分两种情况,如果该页是不是第一页,那么我们需要设置中继器到上一页;如果是最后一页,那我们就设置中继器到最后一页。

以上就是本期分享的全部内容,点下关注不迷路哦,谢谢观看。

  • 6
    点赞
  • 32
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
Axure是一个交互原型设计工具,通过使用Axure,我们可以实现各种交互效果和功能,并进行用户界面的设计和测试。 在Axure中,三级菜单和标签之间可以有多种交互使用方式,以下是一种常见的做法: 首先,我们需要创建一个三级菜单组件。在Axure中,我们可以使用层叠面板、动态面板或者自定义交互元件来实现三级菜单。我们可以使用链接和条件规则来控制菜单的展开和收起。 其次,我们需要设计一个标签组件。标签可以是文本或者图标,用来表示三级菜单的具体内容或者功能。我们可以在标签上应用交互效果,比如鼠标移入移出的动画效果,或者点击时的状态变化。 接下来,我们需要使用事件和条件来实现三级菜单和标签之间的交互。比如,当鼠标移入标签时,我们可以触发菜单的展开效果;当鼠标移出标签时,我们可以触发菜单的收起效果。当点击标签时,我们可以触发标签所对应的具体功能或者页面的跳转。 最后,我们可以通过Axure的预览功能来测试三级菜单和标签的交互使用效果。可以通过模拟鼠标移入移出、点击等行为来查看效果,并进行相应的调整和优化。 总的来说,Axure提供了丰富的交互设计功能和工具,我们可以通过事件、条件和效果来实现三级菜单和标签的交互使用。通过不断的测试和调整,我们可以设计出符合用户需求的界面和交互效果。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

梓贤Vigo

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值