2.动画相关

layer的属性

        每一个视图能显示出来，都是因为有layer存在。该对象有两个比较重要的属性：position和anchorPoint，第一个属性代表该视图相对于父控件的位置，第二个属性表示该视图上的哪个点会移动到对应的位置，它的取值范围是0到1.默认是0.5即视图中心。

自定义layer的方法

在创建的继承自CALayer的类里重写- (void)drawInContext:(CGContextRef)ctx 方法

// 重写该方法, 在该方法中给layer上绘制图形
// 注意CALayer中的drawInContext方法, 不会自动调用
// 只能自己通过setNeedDisplay方法调用
- (void)drawInContext:(CGContextRef)ctx
{

    // 1.绘制图形
    CGContextAddEllipseInRect(ctx, CGRectMake(0, 0, 100, 100));
    
//    [[UIColor redColor] set]; // 注意不能用UIKit框架中的类
    
    CGContextSetRGBFillColor(ctx, 1, 0, 0, 1);
    // 1.渲染图形
    CGContextFillPath(ctx);
}

 CALayer *myLayer = [CALayer layer];
 myLayer.delegate = self;
// 通过代理自定义layer
- (void)drawLayer:(CALayer *)layer inContext:(CGContextRef)ctx
{
    
    // 1.绘制图形
    CGContextAddEllipseInRect(ctx, CGRectMake(0, 0, 50, 100));

    CGContextSetRGBFillColor(ctx, 1, 0, 0, 1);
    // 1.渲染图形
    CGContextFillPath(ctx);
}

隐式动画

        所有的非根layer都存在隐式动画。当对非根层的部分属性进行修改时，会自动带有动画。这称之为隐式动画。

- (void)viewDidLoad
{
    [super viewDidLoad];
	// Do any additional setup after loading the view, typically from a nib.
    
    CALayer *layer = [CALayer layer];
    layer.backgroundColor = [UIColor redColor].CGColor;
    layer.bounds = CGRectMake(0, 0, 100, 100);
    layer.anchorPoint = CGPointZero;
    [self.view.layer addSublayer:layer];
    self.layer = layer;
}

- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
    // 关闭隐式动画
//    [CATransaction begin];
//    [CATransaction setDisableActions:YES];
    
    // 隐式动画
    self.layer.backgroundColor = [UIColor greenColor].CGColor;
//    self.layer.bounds = CGRectMake(0, 0, 200, 200);
    self.layer.position = CGPointMake(200, 200);
    //    self.layer.position // 如何查看CALayer的某个属性是否支持隐式动画, 查看头文件是否有 Animatable
    
//    [CATransaction commit];
    
}

核心动画 CoreAnimation

它是一个跨平台的，该动画不会阻塞主线程，在后台操作

基础动画：

- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
    // 1. 创建核心动画
    CABasicAnimation *anima = [CABasicAnimation animation] ;
    // 1.1设置动画类型
//    anima.keyPath = @"transform.translation.x";
    anima.keyPath = @"transform.scale.y";
    
    // 1.2 设置动画执行完毕之后不删除动画
    anima.removedOnCompletion = NO;
    // 1.3 设置保存动画的最新状态
    anima.fillMode = kCAFillModeForwards;
    // 1.4设置动画时间
    anima.duration = 1;
    
    // 1.5如何动画
//    anima.toValue = [NSValue valueWithCATransform3D:CATransform3DMakeTranslation(0, 100, 1)];
//    anima.toValue = @(100);
    anima.toValue = @(1.5);
 
    
    // 2.添加核心动画到Layer
    [self.myLayer addAnimation:anima forKey:nil];

}

关键帧动画：

- (void)test1
{
    // 1.创建核心动画
    CAKeyframeAnimation *keyAnima = [CAKeyframeAnimation animation];
    // 1.1告诉系统执行什么动画
    keyAnima.keyPath = @"position";
    
    CGMutablePathRef path = CGPathCreateMutable();
    CGPathAddEllipseInRect(path, NULL, CGRectMake(0, 100, 200, 200));
    
    keyAnima.path = path;
    CGPathRelease(path);
    
    // 1.2保存执行完之后的状态
    // 1.2.1执行完之后不删除动画
    keyAnima.removedOnCompletion = NO;
    // 1.2.2执行完之后保存最新的状态
    keyAnima.fillMode = kCAFillModeForwards;
    
    // 1.3设置动画时间
    keyAnima.duration = 2;
    // 2.观察动画什么时候开始执行, 以及什么时候执行完毕
    keyAnima.delegate = self;
    // 3.添加核心动画
    [self.customView.layer addAnimation:keyAnima forKey:@"abc"];
}

- (void)test
{
    // 1.创建核心动画
    CAKeyframeAnimation *keyAnima = [CAKeyframeAnimation animation];
    // 1.1告诉系统执行什么动画
    keyAnima.keyPath = @"position";
    //    NSValue *v1 = [NSValue valueWithCGPoint:CGPointMake(0, 100)];
    NSValue *v2 = [NSValue valueWithCGPoint:CGPointMake(100, 100)];
    NSValue *v3 = [NSValue valueWithCGPoint:CGPointMake(100, 200)];
    NSValue *v4 = [NSValue valueWithCGPoint:CGPointMake(0, 200)];
    NSValue *v5 = [NSValue valueWithCGPoint:CGPointMake(0, 100)];
    
    keyAnima.values = @[v2, v3, v4, v5];
    //用来设置每一小段动画的时间
    //    keyAnima.keyTimes = @[@(0.5) ,@(0.5), @(0.5)];
    
    keyAnima.timingFunction =  [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
    
    // 1.2保存执行完之后的状态
    // 1.2.1执行完之后不删除动画
    keyAnima.removedOnCompletion = NO;
    // 1.2.2执行完之后保存最新的状态
    keyAnima.fillMode = kCAFillModeForwards;
    
    // 1.3设置动画时间
    keyAnima.duration = 2;
    
    // 2.观察动画什么时候开始执行, 以及什么时候执行完毕
    keyAnima.delegate = self;
    
    
    // 2.添加核心动画
    [self.customView.layer addAnimation:keyAnima forKey:nil];
}

         可以实现动画的代理方法来看动画什么时候执行，什么时候执行结束

用关键帧动画实现一个图标抖动：

#define angle2Radian(angle) ((angle) / 180.0 * M_PI)

- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
    // 1.创建核心动画
    CAKeyframeAnimation  *keyAnima = [CAKeyframeAnimation animation];
    keyAnima.keyPath = @"transform.rotation";
    // 度数 / 180 * M_PI
    keyAnima.values = @[@(-angle2Radian(4)), @(angle2Radian(4)), @(-angle2Radian(4))];

    keyAnima.removedOnCompletion = NO;
    keyAnima.fillMode = kCAFillModeForwards;
    keyAnima.duration = 0.1;
    
    // 设置动画重复的次数
    keyAnima.repeatCount = MAXFLOAT;
    
    // 2.添加核心动画
    [self.iconView.layer addAnimation:keyAnima forKey:nil];
}

转场动画

// 1.创建核心动画
    CATransition *ca = [CATransition animation];
    // 1.1动画过渡类型
    ca.type = @"cube";
    // 1.2动画过渡方向
    ca.subtype =  kCATransitionFromRight;
    // 1.3动画起点(在整体动画的百分比)
//    ca.startProgress = 0.5;
    ca.endProgress = 0.5;
    // 动画时间
    ca.duration = 1;
    // 2.添加核心动画
    [self.iconView.layer addAnimation:ca forKey:nil];

/* 过渡效果
 fade     //交叉淡化过渡(不支持过渡方向) kCATransitionFade
 push     //新视图把旧视图推出去 kCATransitionPush

 moveIn   //新视图移到旧视图上面  kCATransitionMoveIn
 reveal   //将旧视图移开,显示下面的新视图 kCATransitionReveal
 cube     //立方体翻滚效果
 oglFlip  //上下左右翻转效果
 suckEffect   //收缩效果，如一块布被抽走(不支持过渡方向)
 rippleEffect //滴水效果(不支持过渡方向)
 pageCurl     //向上翻页效果
 pageUnCurl   //向下翻页效果
 cameraIrisHollowOpen  //相机镜头打开效果(不支持过渡方向)
 cameraIrisHollowClose //相机镜头关上效果(不支持过渡方向)
*/
   
/* 过渡方向
 kCATransitionFromRight
 kCATransitionFromLeft
 kCATransitionFromBottom

 kCATransitionFromTop*/

•CATransition的使用

CATransition*anim = [CATransition animation];

anim.type =@“cube”; // 动画过渡类型

anim.subtype =kCATransitionFromTop; // 动画过渡方向

anim.duration =1; // 动画持续1s

//代理，动画执行完毕后会调用delegate的animationDidStop:finished:

anim.delegate= self;

 

/*******中间穿插改变layer属性的代码**********/  

[layeraddAnimation:anim forKey:nil];

组动画

// 平移动画
    CABasicAnimation *a1 = [CABasicAnimation animation];
    a1.keyPath = @"transform.translation.y";
    a1.toValue = @(100);
    // 缩放动画
    CABasicAnimation *a2 = [CABasicAnimation animation];
    a2.keyPath = @"transform.scale";
    a2.toValue = @(0.0);
    // 旋转动画
    CABasicAnimation *a3 = [CABasicAnimation animation];
    a3.keyPath = @"transform.rotation";
    a3.toValue = @(M_PI_2);
    
    // 组动画
    CAAnimationGroup *groupAnima = [CAAnimationGroup animation];
    
    groupAnima.animations = @[a1, a2, a3];
    
    groupAnima.duration = 2;
    groupAnima.fillMode = kCAFillModeForwards;
    groupAnima.removedOnCompletion = NO;
    
    [self.iconView.layer addAnimation:groupAnima forKey:nil];

核心动画与uiview封装的动画的区别：核心动画不会改变view的实际位置，而uiview封装的动画会 改变

UIView封装的转场动画

[UIView transitionWithView:self.view duration:1.0 options:0 animations:^{
        NSLog(@"animations");
        // 要执行的动画
        [UIView setAnimationTransition:UIViewAnimationTransitionFlipFromRight forView:self.view cache:YES];

    } completion:^(BOOL finished) {
        NSLog(@"completion");
        // 执行完毕之后执行的动画
    }];