iOS:仿jing.fm的音乐播放视图

前两天就注意到 jing.fm ,一款根据用户描述自动匹配音乐的网站,有点创新的意思,空余的时候体验了一把,UI做的还不错,比较人性化的是你在多设备多客户端听的歌曲,会自动记录哪一首歌,听到几分钟,下次在任意客户端都可以继续播放,虽然是很小的细节,但也能体现出Jing的态度。

jing logo

当播放然后就注意到中间播放的那个大圆圈,有个透明的边框,有个漂亮女孩在中间,还会转,播放、暂停还有渐隐渐显的效果。

Jing Web UI

觉得效果不错,可以做一个在iOS上的音乐播放器,正好最近在练习Core Animation、QuartzCore、怎样封装一个好的代码等等,于是果断下手开写,一个午休时间+半个晚上,终在1点Push到GitHub上去了,链接在文末,有感兴趣的朋友可以拿去看看。

制作这个感觉的中间也遇到很多问题,比如动画重复,重写Setter函数导致死循环调用,如何暂停一个view上的动画,再继续接着播放,Quartz绘图,然后保存成image等等…

最终示例效果如下:

JingRound-Screenshot

可以在Storybord、Xib直接拖个View然后更改其类为JingRoundView,设置基本属性即可:

//设置代理,获取回调事件
self.roundView.delegate = self;
//设置中间的图像
self.roundView.roundImage = [UIImage imageNamed:@"girl"]; 
//设置转圈的速度
self.roundView.rotationDuration = 8.0;
//起始状态,转or不转
self.roundView.isPlay = NO;

当点击中间圆盘的时候会触发暂停、播放事件,当然有一个协议:JingRoundViewDelegate:

-(void)playStatuUpdate:(BOOL)playState
{
    NSLog(@"%@...", playState ? @"播放": @"暂停了");
}

使用的时候需要引入一下这两个库:

#import <QuartzCore/QuartzCore.h>
#import <CoreGraphics/CoreGraphics.h>

GitHub:https://github.com/isaced/JingRound