在学习这个之前,也用过,但仅仅是局限于用,对于更深的理解,还是在这次了解过后。
在了解核心动画之前,我们需要了解下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点补充,一定要注意。能够让人更好的理解动画这块。