动画的分类

基础动画 CABasicAnimation
关键帧动画 CAKeyframAnimation
转场动画 CATransition
组合动画 CAAnimationGroup

分类图

动画分类图.png

隐式动画

隐式动画:默认时间是0.25s(位置，大小，颜色),必须是独立的layer才会存在隐式动画，UIView中封装的layer是根layer关闭了隐式动画。

动画三部曲

1.初始化对象
2.设置需要修改动画的属性值
3.把动画添加到layer上(所有动画都是添加到layer上，而并非UIView上)

常用的keyPath值

常用的keypath值.png

基础动画

   CABasicAnimation *baseAnima = [CABasicAnimation animation];
    baseAnima.keyPath = @"position.y";
    baseAnima.toValue = @400;
    baseAnima.fillMode = kCAFillModeForwards;
    baseAnima.removedOnCompletion = NO;
    baseAnima.delegate = self;
    [_colorView.layer addAnimation:baseAnima forKey:nil];

   执行结果后看到的视图，其实是layer层，真正的View没有发生变化
    keyPath中的position是layer里面设置中心点相当于UIView上的center
    presentationLayer和modelLayer（呈现层和模型层）

关键帧动画

   CAKeyframeAnimation *keyAnim = [CAKeyframeAnimation animation];
    keyAnim.keyPath = @"transform.rotation";
    keyAnim.values = @[@angleToRadians(-6),@angleToRadians(6),@angleToRadians(-6)];
    keyAnim.repeatCount = MAXFLOAT;
//    keyAnim.autoreverses = YES;//(往复运动 会变慢因为要重新计算时间) 等价于 keyAnim.values = @[@angleToRadians(-6),@angleToRadians(6),@angleToRadians(-6)];
    keyAnim.speed = 2;
    [_iconImageView.layer addAnimation:keyAnim forKey:nil];

旋转的单位采用弧度(radians),而不是角度（degress）。
以下两个函数，你可以在弧度和角度之间切换。
CGFloat DegreesToRadians(CGFloat degrees) {return degrees * M_PI / 180;};
CGFloat RadiansToDegrees(CGFloat radians) {return radians * 180 / M_PI;};

转场动画

   NSString *imageName = _imagsArray[_index];
    _tranImageView.image = [UIImage imageNamed:imageName];
    CATransition *transition = [CATransition animation];
    transition.type = @"suckEffect";
    transition.duration = 0.5;
    [_tranImageView.layer addAnimation:transition forKey:nil];

转场动画类型

转场动画类型.png

组合动画

    UIBezierPath *path = [UIBezierPath bezierPath];
    [path moveToPoint:CGPointMake(50, 200)];
    [path addCurveToPoint:CGPointMake(300, 200) controlPoint1:CGPointMake(180, 100) controlPoint2:CGPointMake(200, 300)];
    //需要添加在layer上
    CAShapeLayer *shapeLayer = [CAShapeLayer layer];
    shapeLayer.path = path.CGPath;
    shapeLayer.fillColor = nil;
    shapeLayer.strokeColor = [UIColor redColor].CGColor;
    [self.view.layer addSublayer:shapeLayer];
    
    CALayer *colorLayer = [CALayer layer];
    colorLayer.frame = CGRectMake(0, 0, 60, 60);
    colorLayer.position = CGPointMake(50, 200);
    colorLayer.backgroundColor = [UIColor blueColor].CGColor;
    [self.view.layer addSublayer:colorLayer];
    
    //    过山车的动画
    CAKeyframeAnimation *anim = [CAKeyframeAnimation animation];
    anim.keyPath = @"position";
    anim.path = path.CGPath;
//    anim.duration = 4.0f;
//    anim.removedOnCompletion = NO;
//    anim.fillMode = kCAFillModeForwards;
//    anim.rotationMode = kCAAnimationRotateAuto;
//    [colorLayer addAnimation:anim forKey:nil];
//    改变大小
    CABasicAnimation *sizeAnim = [CABasicAnimation animation];
    sizeAnim.keyPath = @"transform.scale";
    sizeAnim.toValue = @.5;
//    sizeAnim.duration = 4.0;
//    sizeAnim.fillMode = kCAFillModeForwards;
//    sizeAnim.removedOnCompletion = NO;
//
//    [colorLayer addAnimation:sizeAnim forKey:nil];
    
//    修改颜色
    CGFloat red = arc4random() / (CGFloat)INT_MAX;
    CGFloat green = arc4random() / (CGFloat)INT_MAX;
    CGFloat blue = arc4random() / (CGFloat)INT_MAX;
    UIColor *color = [UIColor colorWithRed:red green:green blue:blue alpha:1];
    
    CABasicAnimation *colorAnim = [CABasicAnimation animation];
    colorAnim.keyPath = @"backgroundColor";
    colorAnim.toValue = (id)color.CGColor;
//    colorAnim.duration = 4.0f;
//    colorAnim.fillMode = kCAFillModeForwards;
//    colorAnim.removedOnCompletion = NO;
//    [colorLayer addAnimation:colorAnim forKey:nil];
    
    CAAnimationGroup *group = [CAAnimationGroup animation];
    group.animations = @[anim, sizeAnim, colorAnim];
    group.duration = 4.0f;
    group.fillMode = kCAFillModeForwards;
    group.removedOnCompletion = NO;
    [colorLayer addAnimation:group forKey:nil];

小项目

做一个曲线上面跑小车的动画

//曲线
    UIBezierPath *path = [UIBezierPath bezierPath];
    //起点位置
    [path moveToPoint:CGPointMake(50, 300)];
    //CurveToPoint 终点 controlPoint1第一个控制点 controlPoint2 第二个控制点
    [path addCurveToPoint:CGPointMake(350, 300) controlPoint1:CGPointMake(185, 200) controlPoint2:CGPointMake(235, 400)];
    
    
    CALayer *carLayer = [CALayer layer];
    carLayer.frame = CGRectMake(15, 270, 40, 40);
    [carLayer setAnchorPoint:CGPointMake(0.5, 0.8)];
    carLayer.contents = (id)[UIImage imageNamed:@"car"].CGImage;
    [self.view.layer addSublayer:carLayer];
    
    //绘制
    CAShapeLayer *shapeLayer = [CAShapeLayer layer];
    shapeLayer.path = path.CGPath;
    shapeLayer.fillColor = nil;
    shapeLayer.strokeColor = [UIColor purpleColor].CGColor;
    [self.view.layer addSublayer:shapeLayer];
    
    //帧动画
    CAKeyframeAnimation *anim = [CAKeyframeAnimation animation];
    anim.keyPath = @"position";
    anim.path = path.CGPath;
    anim.duration = 4.0f;
    anim.removedOnCompletion = NO;
    anim.fillMode = kCAFillModeForwards;
    anim.rotationMode = kCAAnimationRotateAuto;
    [carLayer addAnimation:anim forKey:nil];

UIView和Layer的区别

UIView:用户交互，界面展示
CALayer:绘制界面,属于QuartzCore框架(跨平台的）
总结：UIView负责处理用户交互，layer负责绘制内容。我们访问和设置
的UIView的这些负责显示的属性实际就是访问和设置layer对应的属性，
只不过UIView把他封装了起来

frame和bounds的区别

屏幕快照 2019-04-11 17.12.03.png

屏幕快照 2019-04-11 17.12.08.png

锚点：1.概念 2.单位坐标0-1，和position的关系：就是锚点在父视图的位置

屏幕快照 2019-04-11 17.12.23.png