自定义UIImage组件实现圆形封面,转动,以及模糊背景
有的时候我们需要给IOS组件做一些扩展,例如增加一个属性或是方法什么的,用以达到我们不可告人的目的,这时候就需要写一个子类继承IOS组件的类,然后在子类上进行扩展。下面用一个例子讲解如何通过UIImage子类实现圆形的图片的裁剪,边框以及旋转。
下面是一个音乐播放器的音乐播放界面,我们要将封面裁剪成圆形并实现播放音乐时旋转的功能:
新建一个类,使用Swift语言:
代码如下,注释已经很详细了:
import UIKit
class EkoImage: UIImageView {
//先写构造方法
required init(coder aDecoder: NSCoder) {
//调用父类的构造方法
super.init(coder: aDecoder)
//设置圆角
self.clipsToBounds = true
self.layer.cornerRadius = self.frame.size.width/2
//设置边框
self.layer.borderWidth = 4
self.layer.borderColor = UIColor(red: 1.0, green: 1.0, blue: 1.0, alpha: 0.7).CGColor //考虑到要设置透明度,因此使用这个方法
}
//实现旋转方法
func onRotation(){
//动画实例关键字
var animation = CABasicAnimation(keyPath: "transform.rotation")
//初始值
animation.fromValue = 0.0
//结束值
animation.toValue = 2*M_PI
//动画执行时间
animation.duration = 20
//动画执行次数
animation.repeatCount = 10000
//将动画实例赋予给层
self.layer.addAnimation(animation, forKey: nil)
}
}
将唱片封面,还有时间背景关联到新写的这个类:
运行一下,成功裁剪为圆形了!
为什么不能旋转呢?还要在视图加载时调用旋转方法:
再运行一次,旋转成功!~
略施小技,还能加入背景模糊效果:
代码如下:
//设置背景模糊
let blurEffect = UIBlurEffect(style: UIBlurEffectStyle.Light)
let blurView = UIVisualEffectView(effect: blurEffect)
blurView.frame.size = CGSize(width: view.frame.width, height: view.frame.height)
bg.addSubview(blurView)