一.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;
}
效果图:
还有一些别的
// 旋转
_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的注释里也写得很清楚.
ps:取消动画效果的话:
// 开启事务
[CATransaction begin];
// 取消隐世动画
[CATransaction setDisableActions:YES];
_layer.position = CGPointMake(100, 100);
// 提交事务
[CATransaction commit];
三.核心动画
CAAnimation继承结构:
CAAnimation的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或者一系列的切换动画中.或者一些点击效果.
