CAGradientLayer基本内容详解(实现开机渐变效果)

基本介绍：

      CAGradientLayer 是用来生成两种或更多颜色平滑渐变的。用 Core Graphics 复制一个 CAGradientLayer 并将内容绘制到一个普通图层的寄宿图也是有可能的，但是 CAGradientLayer 的真正好处在于绘制使用了硬件加速。

了解iOS中Layer 的单位坐标系统：

       

属性解析：

public  class  CAGradientLayer :  CALayer  {
   
     颜色数组，默认为 nil, 该数组定义了每一个渐变值得颜色。这个数组成员接受 CGColorRef 类型的值 , 如果你愿意， colors 属性可以包含很多颜色，所以创建一个彩虹一样的多重渐变也是很简单的。默认情况下，这些颜色在空间上均匀地被渲染，但是我们可以用 locations 属性来调整空间。是可动画属性
     public  var  colors: [ AnyObject ]?
   
     可选的数组，定义了每一个渐变点的位置 ( 即定义了 colors 属性中每个不同颜色的位置 ) ，范围在 [ 0 , 1 ], 数组中的值必须是渐变增加，如果数组为 nil ，那么将均匀渐变，当渲染的时候，颜色数组值会被映射到输出颜色空间。默认为 nil, 是可动画属性。
     public  var  locations: [ NSNumber ]?

   

    startPoint和endPoint属性，它们决定了渐变的方向。startPoint就是第一个渐变点，endPoint就是最后一个渐变点。这两个参数是以单位坐标系进行的定义，当进行绘制内容的时候会映射到layer的矩形区域，左上角坐标是[0,0]，右下角坐标是[1,1]。默认值是[.5,0]和[.5,1],都是可动画属性。

     public  var  startPoint:  CGPoint
     public  var  endPoint:  CGPoint

    

     默认值是 kCAGradientLayerAxial ，表示按像素均匀变化。除了默认值也无其它选项。
     public  var  type:  String
}

实际使用：

1:简单使用 CAGradientLayer

     //TODO: 基本渐变效果
     func  basicGradient(){
       
         let  gradientLayer:  CAGradientLayer  =  CAGradientLayer ()
        gradientLayer. frame  =  CGRect (x:  20 , y:  100 , width:  280 , height:  200 )

       

        //设置渐变的起始点和结束点,可看图一效果

        gradientLayer. startPoint  =  CGPoint (x:  0.0 , y:  0.5 )
        gradientLayer. endPoint  =  CGPoint (x:  1.0 , y:  0.5 )
       
         // 添加颜色
         let  colors = [
             UIColor . blackColor (). CGColor ,
             UIColor . whiteColor (). CGColor ,
             UIColor . blackColor (). CGColor
        ]
        gradientLayer. colors  = colors

       

        //设置渲染位置，可看图二

         let  locations = [
             0.25 ,
             0.5 ,
             0.75
        ]
        gradientLayer. locations  = locations
         view . layer . addSublayer (gradientLayer)

    }

部分效果图：

图一：设置起点和结束点

                       

图二：设置渲染颜色的位置

 

              

图三：最终实现效果图

                                      

2:开机效果渐变效果实现

// 自定义类实现开机文字渐变效果
class  AnimatedMaskLabel:  UIView  {
  
   let  gradientLayer:  CAGradientLayer  = {
    

    let gradientLayer = CAGradientLayer()

     // Configure the gradient here
    gradientLayer. startPoint  =  CGPoint (x:  0.0 , y:  0.5 )
    gradientLayer. endPoint  =  CGPoint (x:  1.0 , y:  0.5 )
    
     // 设置对应显示颜色数组

     let  colors = [

         UIColor . yellowColor (). CGColor ,
         UIColor . greenColor (). CGColor ,
         UIColor . orangeColor (). CGColor ,
         UIColor . cyanColor (). CGColor ,
         UIColor . redColor (). CGColor ,
         UIColor . yellowColor (). CGColor

    ]

     // 设置对应颜色显示的位置 . 可以设置多个点 , 根据需要操作 !

     let  locations = [

         0.25 ,
         0.5 ,
         0.75

    ]

    gradientLayer. colors  = colors
    gradientLayer. locations  = locations
     return  gradientLayer
    
    }()
    
    
     // 设置文本属性 {} 其实就是一个函数，懒加载
     let  textAtteibutes: [ String :  AnyObject ] = {
    
         let  style =  NSMutableParagraphStyle ()

        style.alignment = .Center

         return  [ NSFontAttributeName : UIFont (name:  "HelveticaNeue-Thin" ,
            size:  28.0 )!,  NSParagraphStyleAttributeName : style]
    }()

  

   @IBInspectable var text: String! {
    didSet {
        
      setNeedsDisplay()
    
      //创建一个临时的绘图文本,用于渲染文本内容为对应的图片.
      UIGraphicsBeginImageContextWithOptions(frame.size, false, 0)
        
      //绘制文本内容,并获得对应文字图片
      text.drawInRect(bounds , withAttributes: textAtteibutes)
      let image = UIGraphicsGetImageFromCurrentImageContext()
      UIGraphicsEndImageContext()
    
      //创建一个 layer 显示绘制的图片
      let maskLayer = CALayer()
      maskLayer.backgroundColor = UIColor.clearColor().CGColor
      maskLayer.frame = CGRectOffset(bounds, bounds.size.width, 0)
      maskLayer.contents = image.CGImage
    
      //显示在渐变 layer 上,作为掩膜,及覆盖物会盖住layer的内容,无背景颜色。
      gradientLayer.mask = maskLayer
    }
  }
  
  overridefunc layoutSubviews() {
        
    layer.borderColor = UIColor.greenColor().CGColor
    gradientLayer.frame = CGRect(x: -bounds.size.width, y: bounds.origin.y, width: 3 * bounds.size.width, height: bounds.size.height)
  }
  
  overridefunc didMoveToWindow() {
    super.didMoveToWindow()
        
     layer.addSublayer(gradientLayer)
    
      //添加位置动画 locations是可动画属性
     let gradientAniamtion = CABasicAnimation(keyPath: "locations")
         //设置颜色显示的对应位置，一一对应
         gradientAniamtion.fromValue = [0.0,0.0,0.0,0.0,0.0,0.25]
         gradientAniamtion.toValue = [0.65, 0.8, 0.85, 0.9, 0.95 ,1.0]
         gradientAniamtion.duration = 3.0
         //无限执行
         gradientAniamtion.repeatCount = Float.infinity
        
         gradientLayer.addAnimation(gradientAniamtion, forKey: nil)

  }

}

效果图如下：

相关推荐：

1: https://github.com/nrj/GradientProgressView