CoreAnimation

在学习这个之前,也用过,但仅仅是局限于用,对于更深的理解,还是在这次了解过后。

在了解核心动画之前,我们需要了解下UIView和CaLayer的区别。

UIView是绘制的图层和交互行为的封装。UIView中绘制的工作其实就是CaLayer去完成的,所以,在UIView的属性中都会有layer。也就是说,CaLayer才是真正去绘制的。(MAC和iOS是同一种绘制方式,不同的交互方式。想了解的人,可以去具体了解下mac的用户交互)

CAAnimation编辑动画-------layer绘制

CAAnimation为抽象类,真正我们用到的其实是下面几个:

CATransition(转场动画),CABasicAnimation(基础动画),CAKeyframeAnimation(关键帧动画),CAAnimationGroup(动画组)。

有一个类用的非常的多,但并不是CAAnimation中的任何一个,就是贝塞尔曲线UIBezierPath。无论是曲线或者圆都会用到他,在他的基础上添加动画。

CABasicAnimation:

    _redView.frame = CGRectMake(50, 400, 100, 100);

    CABasicAnimation *anim = [CABasicAnimation animation];

    anim.delegate = self;

    anim.keyPath = @"position.y";

    anim.duration = 1.0f;

    anim.toValue = @(400);

    [_redView.layer addAnimation:anim forKey:nil];

 

CAKeyframeAnimation:

    CAKeyframeAnimation *anim = [CAKeyframeAnimation animation];

    anim.keyPath = @"transform.rotation";

    anim.values = @[@angleToRadians(-3), @angleToRadians(3)];

    anim.repeatCount = MAXFLOAT;                //动画重复次数

    anim.autoreverses = YES;                    //反转

    anim.speed = 2.f;                           //动画速度  正常速度的2倍

    //    anim.duration = 1.0f;                       //动画一次的时间  默认是0.25秒

    [_redView.layer addAnimation:anim forKey:nil];

 

CAAnimationGroup:

    UIBezierPath *path = [UIBezierPath bezierPath];

    [path moveToPoint:CGPointMake(50, 150)];

  [path addCurveToPoint:CGPointMake(320, 150) controlPoint1:CGPointMake(170, 0) controlPoint2:CGPointMake(220, 300)];

    CAShapeLayer *shapeLayer = [CAShapeLayer layer];

    shapeLayer.path = path.CGPath;

    shapeLayer.fillColor = nil;

    shapeLayer.strokeColor = [[UIColor orangeColor] CGColor];

    [self.view.layer addSublayer:shapeLayer];

  

    CALayer *layer0 = [CALayer layer];

    layer0.frame = CGRectMake(0, 0, 50, 50);

    layer0.position = CGPointMake(50, 150);

    layer0.backgroundColor = [[UIColor redColor] CGColor];

    [self.view.layer addSublayer:layer0];

    

    CAKeyframeAnimation *anim = [CAKeyframeAnimation animation];

    anim.path = path.CGPath;

    anim.keyPath = @"position";

    anim.duration = 3.0f;

    

    CABasicAnimation *anim1 = [CABasicAnimation animation];

    anim1.keyPath = @"backgroundColor";

    anim1.toValue = (__bridge id _Nullable)([UIColor yellowColor].CGColor);

    anim1.duration = 3.0f;

    

    CABasicAnimation *anim2 = [CABasicAnimation animation];

    anim2.keyPath = @"transform.scale";

    anim2.toValue = @0.5;

    anim2.duration = 3.0f;

    

    CAAnimationGroup *group = [CAAnimationGroup animation];

    group.animations = @[anim, anim1, anim2];

    group.duration = 3.0f;

    [layer0 addAnimation:group forKey:nil];

 

这些是基础使用,还有一点需要注意。所有的动画,都是假象。。。。假象。。。

上面的redView的动画,都只是layer的动画,并不是view的动画。view并没有跟随layer而改变位置。你只有在原view的位置上才会触发交互事件。layer是不会相应你的任何事件。

所以一般情况下,我们会在CAAnimation的Delegate中去处理这些问题。

- (void)animationDidStart:(CAAnimation *)anim                                           动画开始后

- (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag        动画结束后

 

其实在动画这块还有很多内容,比如说2D物理引擎,转场动画等。我还在熟悉中,如果后面有时间的话,我会在另写一个。

写的很粗糙,但是代码中都有详细的注释。(代码里面是3个工程文件,因为我懒,没做处理。。。)

 

特别注意,其实每个view都有2个layer,一个是presentationLayer,一个是modelLayer。

presentationLayer是呈现层,modelLayer是模型层。

当我们在给uiview设置frame的时候其实就是给modelLayer设置,然后等待屏幕刷新的时候在修改呈现层的值,这样能够减少性能消耗(每设置一次去修改一次。)在动画过过程中,其实就是呈现层在进行动画,模型层并没有跟随进行动画。

关于隐式动画,只有单独创建的layer上才有,view的layer是没有隐式动画的。

以上2点补充,一定要注意。能够让人更好的理解动画这块。

你可能感兴趣的:(学习)