Origami 临摹网易云音乐交互动效

用户头像
上海/设计爱好者/8年前/517浏览
Origami 临摹网易云音乐交互动效
用户头像
翅膀鱼

音乐播放器

做完视频播放器之后就要做音频播放器,于是选择临摹网易云音乐,因为之前的视频播放器做的稍微有些复杂,所以打算这次稍微简单点,还原一下播放和动效就行。

所用的素材都是ituns提取的。


音频的播放以及唱针动效

播放/暂停button控制音频的play。turn off延时1s是为了音量有缓慢变小的过程,如果直接停止播放,声音是骤停的。

icon的切换和唱针的摆动也是通过button及时间判定来控制的


button特效

然后是按下button 对应显示高光icon。


滑块改变音频播放进度

滑块的进度输出端口同音频time端口连接,这样改变滑块进度就能更改音频的播放进度了


同之前的视频一样,改变音频进度需要打开scrub,所以按住滑块直接打开scrub,松手就关闭


音频的current time输出端口通过 progerss和transition连接滑块的进度端口,这样视频播放时进度滑块也能随之改变了


唱片动效

最后是唱片的旋转,用到repeating motion,通过播放/暂停信号控制循环的开启/关闭。



0
举报
|
4
分享
评论
用户头像
评论你的想法~
表情
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
推荐素材
【新年UI图标】旅行icon
新能源APP应用UIKit
高级感金属拟物 UI设计组件库
【新年UI图标】汽车icon
3D渐变流体抽象矢量UI背景图
我的钱包-UI界面设计-app
UI界面 组件
UI 登录界面设计模板包
原创UIUX交互橙红渐变炫酷视觉平面设计作品集模板PSD
【新年UI图标】秒杀icon
【新年UI图标】30个图标
新拟态风格 UI设计组件库
Security Camera UI kit
【新年UI图标】体育icon
【新年UI图标】礼物/活动icon
APP/小程序商业项目UI模板|99个高保真UI+79个原型
科技医疗透明柜UI界面设计
钱包ui模板
UI通用设计素材1
手表表盘UI系列
拟物风质感写实UI卡片合集源文件
3D卡通UI界面图标可爱插画免扣素
【新年UI图标】钱包icon
你可能喜欢
大家都在看
登录注册