核心动画学习笔记

一.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.png

ps:取消动画效果的话:

// 开启事务
[CATransaction begin];
 
// 取消隐世动画
[CATransaction setDisableActions:YES];
_layer.position = CGPointMake(100, 100);
 
// 提交事务
[CATransaction commit];

三.核心动画

CAAnimation继承结构:

CAAnimationConstruct.png

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或者一系列的切换动画中.或者一些点击效果.