iOS-VLCKit实现仿网易云音乐播放音乐（二）

iOS仿网易云音乐

iOS-VLCKit实现仿网易云音乐播放音乐（一）

iOS-VLCKit实现仿网易云音乐播放音乐（二）

iOS-VLCKit实现仿网易云音乐播放音乐（三）

前言

上一篇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哦！