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

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

了解iOSLayer 的单位坐标系统

        这里写图片描述
属性解析:

public  class  CAGradientLayer :  CALayer  {
   
   
  颜色数组,默认为 nil, 该数组定义了每一个渐变值得颜色。这个数组成员接受 CGColorRef 类型的值 , 如果你愿意, colors 属性可以包含很多颜色,所以创建一个彩虹一样的多重渐变也是很简单的。默认情况下,这些颜色在空间上均匀地被渲染,但是我们可以用 locations 属性来调整空间。是可动画属性
   
  public  var  colors: [ AnyObject ]?
   
   
  可选的数组,定义了每一个渐变点的位置 ( 即定义了 colors 属性中每个不同颜色的位置 ) ,范围在 [ 0 , 1 ], 数组中的值必须是渐变增加,如果数组为 nil ,那么将均匀渐变,当渲染的时候,颜色数组值会被映射到输出颜色空间。默认为 nil, 是可动画属性。
   
  public  var  locations: [ NSNumber ]?
   
    startPointendPoint属性,它们决定了渐变的方向。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.sizefalse0)
        
      
//绘制文本内容,并获得对应文字图片
      text.drawInRect(bounds , withAttributes: textAtteibutes)
      
let image = UIGraphicsGetImageFromCurrentImageContext()
      
UIGraphicsEndImageContext()
    
      
//创建一个 layer 显示绘制的图片
      let maskLayer = CALayer()
      maskLayer.
backgroundColor = UIColor.clearColor().CGColor
      maskLayer.
frame = CGRectOffset(boundsbounds.size.width0)
      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.650.80.850.90.95 ,1.0]
         gradientAniamtion.
duration = 3.0
         
//无限执行
         gradientAniamtion.repeatCount = Float.infinity
        
         
gradientLayer.addAnimation(gradientAniamtion, forKey: nil)
  }
}

效果图如下:

相关推荐:


这里写图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值