iOS开发之音乐播放器专辑图片旋转动画

仿网易云音乐专辑图片的旋转动画

用过网易云音乐的人都知道，在网易云音乐的控制界面有一张旋转的，类似唱片一样的图片，这个效果其实是两张图片合成的，一张是黑色胶片，中间一张是专辑图片。这里不说怎么合成一张图片，只说说专辑图片的旋转动画。废话不多说，看代码：

objective-c版：

SCImageView.h

//
// SCImageView.h
// BaiduMusic
//
// Created by 凌       陈 on 8/22/17.
// Copyright © 2017 凌       陈. All rights reserved.
//

#import <UIKit/UIKit.h>

@interface SCImageView : UIImageView

-(void) startRotating;
-(void) stopRotating;
-(void) resumeRotate;

@end


SCImageView.m

//
// SCImageView.m
// BaiduMusic
//
// Created by 凌       陈 on 8/22/17.
// Copyright © 2017 凌       陈. All rights reserved.
//

#import "SCImageView.h"

@implementation SCImageView

// 开始旋转
-(void) startRotating {
CABasicAnimation* rotateAnimation = [CABasicAnimation animationWithKeyPath:@"transform.rotation"];
rotateAnimation.fromValue = [NSNumber numberWithFloat:0.0];
rotateAnimation.toValue = [NSNumber numberWithFloat:M_PI * 2]; // 旋转一周
rotateAnimation.duration = 20.0; // 旋转时间20秒
rotateAnimation.repeatCount = MAXFLOAT; // 重复次数，这里用最大次数

[self.layer addAnimation:rotateAnimation forKey:nil];

}

// 停止旋转
-(void) stopRotating {

CFTimeInterval pausedTime = [self.layer convertTime:CACurrentMediaTime() fromLayer:nil];
self.layer.speed = 0.0; // 停止旋转
self.layer.timeOffset = pausedTime; // 保存时间，恢复旋转需要用到
}

// 恢复旋转
-(void) resumeRotate {

if (self.layer.timeOffset == 0) {
[self startRotating];
return;
}

CFTimeInterval pausedTime = self.layer.timeOffset;
self.layer.speed = 1.0; // 开始旋转
self.layer.timeOffset = 0.0;
self.layer.beginTime = 0.0;
CFTimeInterval timeSincePause = [self.layer convertTime:CACurrentMediaTime() fromLayer:nil] - pausedTime; // 恢复时间
self.layer.beginTime = timeSincePause; // 从暂停的时间点开始旋转
}

@end

swift版：

//
// SCImageView.swift
// SC Player
//
// Created by 凌       陈 on 7/9/17.
// Copyright © 2017 凌       陈. All rights reserved.
//

import UIKit

class SCImageView: UIImageView {

var ablumView: UIImageView?

required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)

self.ablumView = UIImageView(frame: CGRect(x: self.frame.size.width / 2 - 80, y: self.frame.size.height / 2 - 80, width: 160, height: 160))
self.ablumView?.clipsToBounds = true
self.ablumView?.layer.cornerRadius = 80

self.addSubview(ablumView!)
}

func startRotating() {
let rotateAnimation = CABasicAnimation(keyPath: "transform.rotation")
rotateAnimation.fromValue = 0.0
rotateAnimation.toValue = Double.pi * 2
rotateAnimation.duration = 20.0
rotateAnimation.repeatCount = MAXFLOAT

self.layer.add(rotateAnimation, forKey: nil)
}

func stopRotating() {

let pausedTime = self.layer.convertTime(CACurrentMediaTime(), from: nil)
self.layer.speed = 0.0
self.layer.timeOffset = pausedTime
}

func resumeRotate() {

if self.layer.timeOffset == 0 {
startRotating()
return
}

let pausedTime = self.layer.timeOffset
self.layer.speed = 1.0
self.layer.timeOffset = 0.0
self.layer.beginTime = 0.0
let timeWhenpause = self.layer.convertTime(CACurrentMediaTime(), from: nil) - pausedTime
self.layer.beginTime = timeWhenpause
}
}swift版中有合成专辑图片，其实就是图中图，UIImageView中再定义一个UIImageView。