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

版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接: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。

展开阅读全文

没有更多推荐了,返回首页