自定义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)

posted on 2016-01-21 17:51  罗小夕  阅读(546)  评论(2编辑  收藏  举报

导航