CALayer之渐变层和复制层

图片来自500px

文 || 張贺

CAGradientLayer渐变层

• CAGradientLayer是CALayer的子类
  @interface CAGradientLayer : CALayer

  //设置渐变的颜色，即从什么颜色渐变到什么颜色，
  //这里可以设置多个颜色，从一个颜色渐变到另一个颜色再到另一个颜色
  @property(nullable, copy) NSArray *colors;
  
  //设置从哪个位置渐变到下一个颜色
  @property(nullable, copy) NSArray<NSNumber *> *locations;
  
  //设置渐变的方向
  //取值是[0,1]
  @property CGPoint startPoint;
  @property CGPoint endPoint;
  
  @property(copy) NSString *type;
  
  @end
  

• 例子
  - (void)viewDidLoad {
  [super viewDidLoad];
  //系统默认的View所关联的层是CALayer
  NSLog(@"%@",[self.view.layer class]);

      //渐变层
      CAGradientLayer *gradient = [CAGradientLayer layer];
      gradient.frame = CGRectMake(100, 100, 100, 100);
  
      //设置渐变的颜色
      gradient.colors = @[(id)[UIColor redColor].CGColor,(id)[UIColor greenColor].CGColor,(id)[UIColor blueColor].CGColor];
      //设置从哪个位置渐变到下一个颜色
      gradient.locations = @[@(.2)];
      //设置渐变的方向
      gradient.startPoint = CGPointMake(0, 0);
      gradient.endPoint = CGPointMake(1, 1);
  
      [self.view.layer addSublayer:gradient];
  }
  

渐变层示例

CAReplicatorLayer复制层

• CAReplicatorLayer是CALayer的子类

• 复制层可以复制它里面的子层

• 把想要复制的子层添加到复制层里面

  @interface CAReplicatorLayer : CALayer
  //要复制的份数，包括它自己
  @property NSInteger instanceCount;
  
  @property BOOL preservesDepth;
  //设置动画延迟执行时间
  @property CFTimeInterval instanceDelay;
  //相对复制出来的上一个子层做平移
  @property CATransform3D instanceTransform;
  
  @property(nullable) CGColorRef instanceColor;
  
  @property float instanceRedOffset;
  @property float instanceGreenOffset;
  @property float instanceBlueOffset;
  @property float instanceAlphaOffset;
  
  @end
  

• 音乐震动条
  - (void)viewDidLoad {
  [super viewDidLoad];

      //复制层
      CAReplicatorLayer *rep = [CAReplicatorLayer layer];
      rep.frame = self.contentView.bounds;
  
      //复制出来的层的个数，包括自己
      rep.instanceCount = 4;
      //复制出来的层相对上一个平移40
      rep.instanceTransform = CATransform3DMakeTranslation(40, 0, 0);
      //复制出来的层的动画相对前一个延迟0.5秒
      rep.instanceDelay = 0.5;
      [self.contentView.layer addSublayer:rep];
  
      //音乐震动条
      CALayer *redLayer = [CALayer layer];
      redLayer.bounds = CGRectMake(0, 0, 30, 100);
      redLayer.position = CGPointMake(0, self.contentView.bounds.size.height);
      redLayer.anchorPoint = CGPointMake(0, 1);
      redLayer.backgroundColor = [UIColor redColor].CGColor;
  
      //把要复制的层添加到复制层上面
      [rep addSublayer:redLayer];
  
      //动画
      CABasicAnimation *anim = [CABasicAnimation animation];
      anim.keyPath = @"transform.scale.y";
      anim.toValue = @0;
      anim.repeatCount = MAXFLOAT;
      anim.duration = 0.5;
      anim.autoreverses = YES;
      [redLayer addAnimation:anim forKey:nil];
  
  }
  

音量震动条.gif