一.CALayer 1.概念: 在iOS中,能看见的基本上都是UIView. 在创建UIView时UIView会自动创建一个图层(即CALayer对象),通过UIView的layer属性可以访问这个图层. 当UIView需要显示到屏幕上时,会调用drawRect方法进行绘图.并且会将所有内容绘制在自己的图层上.绘图完毕后,系统会将图层拷贝到屏幕上.于是就完成了UIView的显示. 2.基本使用: 通过操作CALayer对象,可以很方便地调整UIView的一些外观属性,比如: 阴影 圆角大小 边框宽度和颜色
- (void)viewLayer { // 设置阴影透明度 _redView.layer.shadowOpacity = 1; // 设置阴影颜色 _redView.layer.shadowColor = [UIColor yellowColor].CGColor; // 设置阴影圆角半径 _redView.layer.shadowRadius = 10; // 设置圆角半径 _redView.layer.cornerRadius = 50; // 设置边框半径 _redView.layer.borderColor = [UIColor whiteColor].CGColor; // 设置边框半径 _redView.layer.borderWidth = 2; }
效果图:
layer.png
还有一些别的// 旋转 _imageView.layer.transform = CATransform3DMakeRotation(M_PI, 1, 1, 0); // 平移 _imageView.layer.transform = CATransform3DMakeTranslation(200, 200, 0); // 缩放 _imageView.layer.transform = CATransform3DMakeScale(1, 0.5, 1); // 利用KVC改变形变 NSValue *rotation = [NSValue valueWithCATransform3D:CATransform3DMakeRotation(M_PI, 1, 1, 0)]; [_imageView.layer setValue:rotation forKeyPath:@"transform"];
注意:
CALayer是定义在QuartzCore框架中的[Core Animation]
CGImageRef, CGColorRef 两种数据类型是定义在CoreGraphics框架中的.
UIColor, UIImage是定义在UIKit框架中.QuartzCore框架和CoreGraphics框架是可以跨平台使用的,在iOS和Mac OS X上都能使用.
但是UIKit只能在iOS中使用.
所以,为了保证可移植性, QuartzCore不能使用UIImage, UIColor, 只能使用CGImageRef, CGColorRef.3.position和anchorPoint
/* The position in the superlayer that the anchor point of the layer's * bounds rect is aligned to. Defaults to the zero point. Animatable. */ @property CGPoint position; // 用来设置CALayer在父层中的位置. // 以父层的左上角为原点(0, 0). /* Defines the anchor point of the layer's bounds rect, as a point in * normalized layer coordinates - '(0, 0)' is the bottom left corner of * the bounds rect, '(1, 1)' is the top right corner. Defaults to * '(0.5, 0.5)', i.e. the center of the bounds rect. Animatable. */ @property CGPoint anchorPoint; // 定位点 // 决定着CALayer的哪个点会在position属性所指的位置. // 以自己的左上角为原点(0, 0) // 她的(x, y)取值范围都是0 ~ 1, 默认是(0.5, 0.5) 也就是中点.
二.隐式动画
每个UIView内部都默认关联着一个CALayer.除了该CALayer以外,也就是手动创建的CALayer,都存在着隐式动画.
对手动创建的CALayer的部分属性做修改时,默认会自动产生一些动画效果.而且苹果API的注释里也写得很清楚.hiddenAnime.pngps:取消动画效果的话:
// 开启事务 [CATransaction begin]; // 取消隐世动画 [CATransaction setDisableActions:YES]; _layer.position = CGPointMake(100, 100); // 提交事务 [CATransaction commit];
三.核心动画
CAAnimation继承结构:
CAAnimationConstruct.pngCAAnimation的CAMediaTimingFunction的属性
kCAMediaTimingFunctionLinear(线性):匀速,给你一个相对静态的感觉
kCAMediaTimingFunctionEaseIn(渐进):动画缓慢进入,然后加速离开
kCAMediaTimingFunctionEaseOut(渐出):动画全速进入,然后减速的到达目的地
kCAMediaTimingFunctionEaseInEaseOut(渐进渐出):动画缓慢的进入,中间加速,然后减速的到达目的地。1.CABasicAnimation
改变位置:- (void)position { // 创建动画对象 CABasicAnimation *anime = [CABasicAnimation animation]; // 设置动画的属性(layer的属性) anime.keyPath = @"position"; // 设置属性改变的值 anime.toValue = [NSValue valueWithCGPoint:CGPointMake(200, 200)]; // 设置动画时长 anime.duration = 2; // 取消反弹 // 动画执行完毕之后不要把动画移除 anime.removedOnCompletion = NO; // 保持最新的位置 anime.fillMode = kCAFillModeForwards; // 给图层添加了动画 [_layer addAnimation:anime forKey:nil]; }
2. CAKeyframeAnimation
- (void)value { CAKeyframeAnimation *anim = [CAKeyframeAnimation animation]; // 设置动画属性 anim.keyPath = @"position"; NSValue *v1 = [NSValue valueWithCGPoint:CGPointZero]; NSValue *v2 = [NSValue valueWithCGPoint:CGPointMake(160, 160)]; NSValue *v3 = [NSValue valueWithCGPoint:CGPointMake(270, 0)]; anim.values = @[v1,v2,v3]; anim.duration = 2; [_redView.layer addAnimation:anim forKey:nil]; }
3.CATransition(不是CATransaction) 主要!!!!
-(void)imageChange { _index++; if (_index == 4) { _index = 1; } NSString *fileName = [NSString stringWithFormat:@"%d",_index]; _imageView.image = [UIImage imageNamed:fileName]; CATransition *anim = [CATransition animation]; anim.type = @"pageCurl"; anim.subtype = kCATransitionFromLeft; // anim.startProgress = 0.5; anim.duration = 2; [_imageView.layer addAnimation:anim forKey:nil]; }
4. CAAnimationGroup
- (void)groupAnime { CABasicAnimation *rotation = [CABasicAnimation animation]; rotation.keyPath = @"transform.rotation"; rotation.toValue = @M_PI_2; CABasicAnimation *position = [CABasicAnimation animation]; position.keyPath = @"position"; position.toValue = [NSValue valueWithCGPoint:CGPointMake(100, 250)]; CABasicAnimation *scale = [CABasicAnimation animation]; scale.keyPath = @"transform.scale"; scale.toValue = @0.5; CAAnimationGroup *group = [CAAnimationGroup animation]; group.animations = @[rotation,position,scale]; group.duration = 2; // 取消反弹 group.removedOnCompletion = NO; group.fillMode = kCAFillModeForwards; [_redView.layer addAnimation:group forKey:nil]; }
另外需要注意:
核心动画都是假象,不能改变layer的真实属性的值
展示的位置和实际的位置不同。实际位置永远在最开始位置最好是将核心动画 用在NavigationController的push或者一系列的切换动画中.或者一些点击效果.
CAAnimation动画收录:三、核心动画笔记
