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

原文地址：https://blog.csdn.net/u014636932/article/details/77479210

 

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

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

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