iOS仿网易云音乐
前言
上一篇iOS-VLCKit实现仿网易云音乐播放音乐（一）简单实现了播放音乐显示歌词的功能，有网友提出实现仿网易云的播放转盘功能，于是抽时间实现了下。Demo中的图片均来自与网易云APP。
第一（转盘的实现）
转盘在播放时需要无限旋转，就好像播放唱片时一样
方法一：通过基本动画设置transform
CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"transform.rotation.z"];
animation.removedOnCompletion = NO;
// 设定动画选项
animation.duration = 2.0; // 持续时间
animation.repeatCount = HUGE_VALF; // 重复次数,这里设置为最大，达到不停旋转的效果
// 设定旋转角度
animation.fromValue = [NSNumber numberWithFloat:0.0]; // 起始角度
animation.toValue = [NSNumber numberWithFloat:M_PI]; // 终止角度
// 添加动画
[self.imgView.layer addAnimation:animation
forKey:@"imageView-layer"];
这种方法有个坑就是，当通过手势滑动返回控制器的时候，动画会停止，就好像停止播放了一样，效果不好，于是通过查阅相关资料，找到了第二种方法
方法二：通过强大的QuartzCore框架中的CADisplayLink定时器不停的刷新动画，并改变视图的transform来实现旋转
// 创建定时器，不停刷新动画
self.displayLink = [CADisplayLink displayLinkWithTarget:self selector:@selector(imgRotation)];
// 加入到主循环中
[self.displayLink addToRunLoop:[NSRunLoop mainRunLoop] forMode:NSDefaultRunLoopMode];
// 视图旋转
- (void)imgRotation {
self.imgView.transform = CGAffineTransformRotate(self.imgView.transform, M_PI_4 / 100);
}
这种方式可防止滑动返回的时候导致动画停止。
第二（指针的实现）
根据网易云的图片，要达到播放音乐时指针在转盘上，停止播放时指针离开转盘，就行播放唱片一样，这里需要实现另一种动画效果：定点旋转，实现方法：通过固定视图的layer的anchorPoint属性，并重新设置center来达到定点旋转
// 通过固定layer的anchorPoint来实现定点旋转
- (void)setAnchorPoint:(CGPoint)anchorPoint forView:(UIView *)view
{
CGPoint oldOrigin = view.frame.origin;
view.layer.anchorPoint = anchorPoint;
CGPoint newOrigin = view.frame.origin;
CGPoint transition;
transition.x = newOrigin.x - oldOrigin.x;
transition.y = newOrigin.y - oldOrigin.y;
view.center = CGPointMake (view.center.x - transition.x, view.center.y - transition.y);
}
// 暂停时
// 设置定点
[self setAnchorPoint:CGPointMake(25.0/97, 25.0/153) forView:self.needleView];
// 旋转-30°
self.needleView.transform = CGAffineTransformMakeRotation(-M_PI_2 / 3);
// 播放时
// 设置定点
[self setAnchorPoint:CGPointMake(25.0/97, 25.0/153) forView:self.needleView];
// 恢复
self.needleView.transform = CGAffineTransformIdentity;
通过以上的代码就可以实现指针的定点旋转
优化
通过上面我们已经实现了转盘和指针的旋转，但是效果并不完美，主要是指针旋转时时间过快，于是需要再次加入动画
// 播放音乐时，指针恢复，图片旋转
- (void)playedWithAnimated:(BOOL)animated {
[self setAnchorPoint:CGPointMake(25.0/97, 25.0/153) forView:self.needleView];
if (animated) {
[UIView animateWithDuration:0.5 animations:^{
self.needleView.transform = CGAffineTransformIdentity;
}];
}else {
self.needleView.transform = CGAffineTransformIdentity;
}
self.displayLink = [CADisplayLink displayLinkWithTarget:self selector:@selector(animation)];
// 加入到主循环中
[self.displayLink addToRunLoop:[NSRunLoop mainRunLoop] forMode:NSDefaultRunLoopMode];
}
// 停止音乐时，指针旋转-45°，图片停止旋转
- (void)pausedWithAnimated:(BOOL)animated {
[self setAnchorPoint:CGPointMake(25.0/97, 25.0/153) forView:self.needleView];
if (animated) {
[UIView animateWithDuration:0.5 animations:^{
self.needleView.transform = CGAffineTransformMakeRotation(-M_PI_4);
}];
}else {
self.needleView.transform = CGAffineTransformMakeRotation(-M_PI_4);
}
[self.displayLink invalidate];
}
// 图片旋转
- (void)animation {
self.imageView.transform = CGAffineTransformRotate(self.imgView.transform, M_PI_4 / 100);
}
说了这么多，还是看看效果图吧。
转盘.gif
以上就是转盘唱片的实现过程了，github地址再来一遍：GKAudioPlayerDemo，别忘了点个star哦！
