1月25号 CALayer

UIView主要负责视图和用户的交互

真正的内容显示是通过UIView里面的一个图层CALayer来完成的(没有交互能力)

UIView和CALayer两者其实差不多,每一个UIView都有一个主CALayer。主CALayer上可以添加子CALayer,CALayer跟UIView一样有子类,有枝干。UIView上可以添加手势,CALayer是不可以的。但是也不是说它没什么用处,像很多动画效果,都是用它或者他的子类(子类一说有点不贴切)来完成的。打个容易理解的比分,UIView想到于一片叶子,而CALayer则相当于叶子一条条的经络。


1.新建一个CALayer并且设置一些属性

    CALayer *layer = [CALayer layer];//新建一个图层

    layer.backgroundColor = [UIColor yellowColor].CGColor;//图层的背景颜色

    layer.bounds = CGRectMake(0, 0, 100, 100);//图层的尺寸

    layer.cornerRadius = 50;//圆角的半径  当值为宽度和高度的一半的时候就是一个圆形

    layer.borderColor = [UIColor blackColor].CGColor;//边缘颜色

    layer.borderWidth = 2.0;边缘的宽度

    layer.position = self.view.center;//图层的位置为当前视图的中点

    layer.anchorPoint = CGPointMake(0.5, 0.5);////使用anchorPoint一定要用到position   默认的position是(0, 0

    [self.view.layer addSublayer:layer];//把新建的图层加到当前视图的图层中

这样子就把一个新建的图层添加上去了!

 

2.CALayer中的两个重要属性

CALayer有2个非常重要的属性:position和anchorPoint

@property CGPoint position;

用来设置CALayer在父层中的位置

以父层的左上角为原点(0, 0)

 

@property CGPoint anchorPoint;

称为“定位点”、“锚点”

决定着CALayer身上的哪个点会在position属性所指的位置

以自己的左上角为原点(0, 0)

它的x、y取值范围都是0~1,默认值为(0.5, 0.5)

 

添加一个红色图层到绿色图层上,红色图层显示到什么位置,由position属性决定

假设红色图层的position是(100,100)

  到底把红色图层的哪个点移动到(100,100)的坐标位置,锚点。

  红色图层的锚点是(0,0)

红色图层的锚点是(0.5,0.5)

红色图层的锚点是(1,1)

红色图层的锚点是(0.5,0)

 

 

3.改变transform的动画

1 //旋转
2 _layer.transform = CATransform3DRotate(_layer.transform, 10/180.0*M_PI, 0, 0, 1);
3 //放大缩小
4 _layer.transform = CATransform3DScale(_layer.transform, 2, 2, 2);
5 //平移
6 _layer.transform = CATransform3DTranslate(_layer.transform, 10, 10, 0);

 

4.基本动画CABasicAnimation

 1 //渐变
 2 CABasicAnimation *opacityAnimation = [CABasicAnimation animationWithKeyPath:@"opacity"];
 3 opacityAnimation.fromValue = @1;
 4 opacityAnimation.toValue = @0;
 5     
 6 //旋转
 7 CABasicAnimation *rotateAnimation = [CABasicAnimation animationWithKeyPath:@"transform"];
 8 rotateAnimation.fromValue = [NSValue valueWithCATransform3D:CATransform3DIdentity];
 9 rotateAnimation.toValue = [NSValue valueWithCATransform3D:CATransform3DRotate(_layer.transform, M_PI, 0, 0, 1)];
10     
11 //放大缩小
12 CABasicAnimation *scaleAnimation = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
13 scaleAnimation.fromValue = @0.5;
14 scaleAnimation.toValue = @2;
15     
16 //平移
17 CABasicAnimation *moveAnimation = [CABasicAnimation animationWithKeyPath:@"position"];
18 moveAnimation.toValue = [NSValue valueWithCGPoint:CGPointMake(200, 200)];

 

5.组动画CAAnimationGroup

当一次需要实现多个种类的动画效果是就需要用到组动画了

1 CAAnimationGroup *groupAnimation = [CAAnimationGroup animation];
2 groupAnimation.duration = 1;
3 //groupAnimation.removedOnCompletion = NO;
4 groupAnimation.fillMode = kCAFillModeBackwards;//用动画执行完毕前的画面作为当前画面
5 groupAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn];
6 groupAnimation.animations = @[opacityAnimation, rotateAnimation, scaleAnimation, moveAnimation];
7 [_layer addAnimation:groupAnimation forKey:nil];

 

posted @ 2016-01-25 19:14  南城半夏北风过丶  阅读(246)  评论(0编辑  收藏  举报