Core Animation核心动画的使用

什么是核心动画

核心动画就是CoreAnimation直译过来的中文，它是一组非常强大的动画处理API，只需要使用少量代码就能实现炫酷的动画效果。

---

核心动画的好处

核心动画可以跨平台使用，Mac OS和iOS平台都能使用。核心动画执行过程是在后台操作，不会阻塞主线程。核心动画直接作用在CALayer，不是在UIView上，更加轻量级。

---

核心动画继承结构

可以使用的核心动画只有四种: - CABasicAnimation - CAKeyframeAnimation - CATransition - CAAnimationGroup 其中CABasicAnimation和CAKeyframeAnimation是CAPropertyAnimation的子类，他是一个抽象类，想要创建动画对象，应该使用它的子类。

---

四种核心动画通用属性和方法

[keyPath:要执行什么样的动画，下图展示可以设置的值 fromValue:动画起始的位置，不设置就是当前的位置开始toVlaue:动画结束的位置byValue:在原来基础上，增加多少duration:动画执行的时间removedOnCompletion:动画执行完毕后是否移除动画fillMode:设置动画的保留的状态repeatCount:动画的重复次数repeatDuration:动画的重复时间timingFunction:控制动画运行的节奏 以上属性，基本上每个动画都会用到，下面挨个讲解核心动画就不再赘述这些属性了

---

CABasicAnimation基础动画

/**CABasicAnimation的position演示*/ -(void)CABasicAnimationSetupPosition { //1.创建基础核心动画 CABasicAnimation *basic = [CABasicAnimation animation]; //设置要执行什么样的动画 basic.keyPath = @"position"; //动画起始位置,若不设置就默认当前为止开始 basic.fromValue = [NSValue valueWithCGPoint:CGPointMake(0, 0)]; //动画结束为止 basic.toValue = [NSValue valueWithCGPoint:CGPointMake(300, 300)]; //动画执行时间 basic.duration = 3.0; /* 以下两句是强行改变动画为止和强行保留动画结束状态 默认是结束后移除动画，并且回到原始为止 */ //设置动画执行完毕后不删除动画 basic.removedOnCompletion = NO; //设置动画结束后保留最后的状态 basic.fillMode = kCAFillModeForwards; //2.添加核心动画到layer [self.layer addAnimation:basic forKey:nil]; }

---

CAKeyframeAnimation关键帧动画

value:通过这个属性，可以设置动画的运动轨迹 /**CAKeyframeAnimation的postion演示2*/ -(void)CAKeyframeAnimationSetupPosition2 { //圆运动轨迹 CAKeyframeAnimation *keyframe = [CAKeyframeAnimation animationWithKeyPath:@"position"]; //绘制行走路径 CGMutablePathRef path = CGPathCreateMutable(); CGPathAddEllipseInRect(path, NULL, CGRectMake(0, 100, 200, 200)); keyframe.path = path; //创建路径后记得要释放路径 CGPathRelease(path); keyframe.fillMode = kCAFillModeForwards; keyframe.removedOnCompletion = NO; keyframe.duration = 2.0; [self.imageView.layer addAnimation:keyframe forKey:@"keyframe"]; }

---

/**CAKeyframeAnimation的postion演示1*/ -(void)CAKeyframeAnimationSetupPosition1 { //矩形运动轨迹 CAKeyframeAnimation *keyframe = [CAKeyframeAnimation animationWithKeyPath:@"position"]; keyframe.delegate = self; NSValue *v1 = [NSValue valueWithCGPoint:CGPointMake(100, 100)]; NSValue *v2 = [NSValue valueWithCGPoint:CGPointMake(300, 100)]; NSValue *v3 = [NSValue valueWithCGPoint:CGPointMake(300, 300)]; NSValue *v4 = [NSValue valueWithCGPoint:CGPointMake(100, 300)]; NSValue *v5 = [NSValue valueWithCGPoint:CGPointMake(100, 100)]; keyframe.fillMode = kCAFillModeForwards; keyframe.removedOnCompletion = NO; //动画效果 keyframe.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn]; keyframe.duration = 2.0; keyframe.values = @[v1,v2,v3,v4,v5]; [self.layer addAnimation:keyframe forKey:nil]; }

---

/**CAKeyframeAnimation的rotation演示(抖动效果)*/ -(void)CAKeyframeAnimationShakeEffect { CAKeyframeAnimation *keyframe = [CAKeyframeAnimation animationWithKeyPath:@"transform.rotation"]; keyframe.removedOnCompletion = NO; keyframe.fillMode = kCAFillModeForwards; keyframe.duration = 0.1; keyframe.values = @[@(-angle(4)),@(angle(4)),@(-angle(4))]; keyframe.repeatCount = MAXFLOAT; //而且直接添加到self.view.layer的keyframe 和直接添加到self.imageView.layer的keyframe效果不一样 //前者以左上角旋转，后者以中心点旋转 [self.imageView.layer addAnimation:keyframe forKey:nil]; }

---

CATransition转场动画

type:指定要执行什么样的动画subtype:执行时候转动的方向 /**CATransition实现相册效果*/ -(void)CATransitionAlbumEffect:(NSInteger)target { CATransition *transition = [CATransition animation]; //指定要执行什么动画 transition.type = @"cube"; transition.subtype = kCATransition; if (target == 1) { transition.subtype = kCATransitionFromLeft; } else if (target == 2) { transition.subtype = kCATransitionFromRight; } transition.duration = 0.5; [self.imageView1.layer addAnimation:transition forKey:nil]; }

---

CAAnimationGroup组动画

animations:设置所有要执行的动画 /**CAAnimationGroup演示*/ -(void)CAAnimationGroupShow { //平移动画 CABasicAnimation *basci = [CABasicAnimation animationWithKeyPath:@"transform.translation.y"]; basci.toValue = @(100); //缩放动画 CABasicAnimation *basic1 = [CABasicAnimation animationWithKeyPath:@"transform.scale"]; basic1.toValue = @(0); //旋转动画 CABasicAnimation *basic2 = [CABasicAnimation animationWithKeyPath:@"transform.rotation"]; basic2.toValue = @(M_PI); CAAnimationGroup *group = [CAAnimationGroup animation]; group.removedOnCompletion = NO; group.fillMode = kCAFillModeForwards; group.duration = 2.0; group.animations = @[basci,basic1,basic2]; [self.imageView.layer addAnimation:group forKey:nil]; }

---

核心动画和UIView动画的一些区别

UIView动画变化后，他的真实位置是变化了(center,或者frame)。但是，核心动画变化之后，他的真实位置并没有变化。看到的都是假象而已(实际上是他的layer没有变化) `/*UIView动画和核心动画的一些区别/ -(void)differentBetweenUIviewAndCALayer { //这里的self.imageView.center变化了 [UIView animateWithDuration:2.0 animations:^{ NSLog(@”doAnimation before: %@”,NSStringFromCGPoint(self.imageView.center)); self.imageView.center = CGPointMake(300, 300); [UIView setAnimationTransition:UIViewAnimationTransitionFlipFromRight forView:self.view cache:YES]; } completion:^(BOOL finished) { NSLog(@”doAnimation after: %@”,NSStringFromCGPoint(self.imageView.center)); }]; //可以发现，self.imageView2.center根本就没有变化 NSLog(@”doCoreAnimation before: %@”,NSStringFromCGPoint(self.imageView2.center)); [self CAAnimationGroupShow]; NSLog(@”doCoreAnimation after: %@”,NSStringFromCGPoint(self.imageView2.center));

}`

---

个人总结

核心动画所展示的都是假象，并不会真是修改layer的属性(比如它的frame)，我们只是强制保留动画结束的状态，并且不移除它而已。 核心动画使用场景:最多的是用转场动画、加入购物车功能也会用到组动画 不需要与用户交互就用核心动画，需要和用户交互就用UIView

---

参考代码

https://github.com/HZhenF/CoreAnimation.git 参考代码