摘要: 动画效果可以给用户提供流畅的用户体验，在iOS系统中，Core Animation提供了一定的API来实现一些动画效果。今天我们来学习下QuartzCore中 CAAnimation.h 类以及他的子类。
Apple官方提供CAAnimation继承关系
先来介绍下苹果提供的API，如下（通过这次也教大家如何查看Apple官方提供的 API）
- 通过开发工具 Xcode找到对应的.h 文件
#import
#import
@class NSArray, NSString, CAMediaTimingFunction, CAValueFunction;
@protocol CAAnimationDelegate;
NS_ASSUME_NONNULL_BEGIN
/************************* 动画基类 ***************************/
CA_CLASS_AVAILABLE (10.5, 2.0, 9.0, 2.0)
@interface CAAnimation : NSObject
{
@private
void *_attr;
uint32_t _flags;
}
/* 创建一个新的动画对象*/
+ (instancetype)animation;
/* Animations implement the same property model as defined by CALayer. */
+ (nullable id)defaultValueForKey:(NSString *)key;
- (BOOL)shouldArchiveValueForKey:(NSString *)key;
/*
/** 时间函数名**/
CA_EXTERN NSString * const kCAMediaTimingFunctionLinear
CA_AVAILABLE_STARTING (10.5, 2.0, 9.0, 2.0);//(线性）：匀速，给你一个相对静态的感觉
CA_EXTERN NSString * const kCAMediaTimingFunctionEaseIn
CA_AVAILABLE_STARTING (10.5, 2.0, 9.0, 2.0);（渐进）：动画缓慢进入，然后加速离开
CA_EXTERN NSString * const kCAMediaTimingFunctionEaseOut
CA_AVAILABLE_STARTING (10.5, 2.0, 9.0, 2.0);（渐出）：动画全速进入，然后减速的到达目的地
CA_EXTERN NSString * const kCAMediaTimingFunctionEaseInEaseOut
CA_AVAILABLE_STARTING (10.5, 2.0, 9.0, 2.0);//(渐进渐出）：动画缓慢的进入，中间加速，然后减速的到达目的地。
CA_EXTERN NSString * const kCAMediaTimingFunctionDefault
CA_AVAILABLE_STARTING (10.6, 3.0, 9.0, 2.0);//默认,表示线性起搏
*/
@property(nullable, strong) CAMediaTimingFunction *timingFunction;
//动画代理。设置之后在相应时间会回调相应的代理方法
@property(nullable, strong) id delegate;
//默认为YES，代表动画执行完毕后就从图层上移除，图形会恢复到动画执行前的状态。如果想让图层保持显示动画执行后的状态，那就设置为NO，不过还要设置fillMode为kCAFillModeForwards .
@property(getter=isRemovedOnCompletion) BOOL removedOnCompletion;
@end
/* CAAnimation delegate 方法。 */
@protocol CAAnimationDelegate
@optional
//动画开始时的回调
- (void)animationDidStart:(CAAnimation *)anim;
//动画停止的回调，可以通过flag判断动画是否是完成还是暂停
- (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag;
@end
/********************* 属性动画类 ***************************/
CA_CLASS_AVAILABLE (10.5, 2.0, 9.0, 2.0)
@interface CAPropertyAnimation : CAAnimation
/* 创建一个新的动画对象与其“keyPath”属性设置为“道路”。 */
+ (instancetype)animationWithKeyPath:(nullable NSString *)path;
/* 动画路径 */
@property(nullable, copy) NSString *keyPath;
/* 默认 NO */
@property(getter=isAdditive) BOOL additive;
@property(getter=isCumulative) BOOL cumulative;
@property(nullable, strong) CAValueFunction *valueFunction;
@end
/**************** 提供对单一帧动画的实现 ****************/
CA_CLASS_AVAILABLE (10.5, 2.0, 9.0, 2.0)
@interface CABasicAnimation : CAPropertyAnimation
/*
fromValue：keyPath相应属性的初始值
toValue ：keyPath相应属性的结束值（絶対値）
byValue ：相对起始值的改变量
*/
@property(nullable, strong) id fromValue;
@property(nullable, strong) id toValue;
@property(nullable, strong) id byValue;
@end
/**************** 普通的帧动画，可以定义动画路线 ****************/
CA_CLASS_AVAILABLE (10.5, 2.0, 9.0, 2.0)
@interface CAKeyframeAnimation : CAPropertyAnimation
//里面的元素称为“关键帧”(keyframe)。动画对象会在指定的时间(duration)内，依次显示values数组中的每一个关键帧。
@property(nullable, copy) NSArray *values;
//可以设置一个CGPathRef / CGMutablePathRef,让层跟着路径移动。path只对CALayer的anchorPoint和position起作用。如果你设置了path，那么values将被忽略。
@property(nullable) CGPathRef path;
//可以为对应的关键帧指定对应的时间点,其取值范围为0到1.0，keyTimes中的每一个时间值都对应values中的每一帧.当keyTimes没有设置的时候,各个关键帧对时间平均分配 .
@property(nullable, copy) NSArray *keyTimes;
/*
kCAMediaTimingFunctionLinear //线性
kCAMediaTimingFunctionEaseIn //淡入
kCAMediaTimingFunctionEaseOut //淡出
kCAMediaTimingFunctionEaseInEaseOut //淡入淡出
kCAMediaTimingFunctionDefault //默认
*/
//这个属性用以指定时间函数，类似于运动的加速度，这是一个数组，你有几个子路径就应该传入几个元素。
@property(nullable, copy) NSArray *timingFunctions;
/*
const kCAAnimationLinear //线性，默认
const kCAAnimationDiscrete //离散，无中间过程，但keyTimes设置的时间依旧生效，物体跳跃地出现在各个关键帧上
const kCAAnimationPaced //平均，keyTimes跟timeFunctions失效
const kCAAnimationCubic //平均，同上
const kCAAnimationCubicPaced //平均，同上
*/
//该属性决定了物体在每个子路径下是跳着走还是匀速走。
@property(copy) NSString *calculationMode;
@property(nullable, copy) NSArray *tensionValues;
@property(nullable, copy) NSArray *continuityValues;
@property(nullable, copy) NSArray *biasValues;
/* `rotationMode' strings. */
CA_EXTERN NSString * const kCAAnimationRotateAuto
CA_AVAILABLE_STARTING (10.5, 2.0, 9.0, 2.0);
CA_EXTERN NSString * const kCAAnimationRotateAutoReverse
CA_AVAILABLE_STARTING (10.5, 2.0, 9.0, 2.0);
@property(nullable, copy) NSString *rotationMode;
@end
/**************** 提供弹簧效果 (iOS9才引入的动画类)****************/
CA_CLASS_AVAILABLE (10.11, 9.0, 9.0, 2.0)
@interface CASpringAnimation : CABasicAnimation
//质量，影响图层运动时的弹簧惯性，质量越大，弹簧拉伸和压缩的幅度越大。默认为：1
@property CGFloat mass;
//弹簧刚度系数(劲度系数/弹性系数)，刚度系数越大，形变产生的力就越大，运动越快。必须大于0.默认值为100。
@property CGFloat stiffness;
//阻尼系数，阻止弹簧伸缩的系数，阻尼系数越大，停止越快。必须大于或等于0.默认值为10。
@property CGFloat damping;
/*弹簧上的物体的初始速度。
默认为0，表示一个不动的对象。
负值表示物体远离弹簧附接点，
正值表示物体朝向弹簧附接点移动。*/
@property CGFloat initialVelocity;
/*返回结算时间
弹簧动画到停止时的估算时间，根据当前的动画参数估算*/
@property(readonly) CFTimeInterval settlingDuration;
@end
/************************* 提供渐变效果 ***************************/
CA_CLASS_AVAILABLE (10.5, 2.0, 9.0, 2.0)
@interface CATransition : CAAnimation
/* 过渡效果类型:(私有 API)
cube //立方体翻滚效果
oglFlip //上下左右翻转效果
suckEffect //收缩效果，如一块布被抽走(不支持过渡方向)
rippleEffect //滴水效果(不支持过渡方向)
pageCurl //向上翻页效果
pageUnCurl //向下翻页效果
cameraIrisHollowOpen //相机镜
*/
/*
/* Common transition types. */
CA_EXTERN NSString * const kCATransitionFade
CA_AVAILABLE_STARTING (10.5, 2.0, 9.0, 2.0); //交叉淡化过渡(不支持过渡方向
CA_EXTERN NSString * const kCATransitionMoveIn
CA_AVAILABLE_STARTING (10.5, 2.0, 9.0, 2.0); //新视图移到旧视图上面
CA_EXTERN NSString * const kCATransitionPush
CA_AVAILABLE_STARTING (10.5, 2.0, 9.0, 2.0); //新视图把旧视图Push出去
CA_EXTERN NSString * const kCATransitionReveal
CA_AVAILABLE_STARTING (10.5, 2.0, 9.0, 2.0); //将旧视图移开,显示下面的新视图
*/
//动画过渡类型
@property(copy) NSString *type;
/ * 过渡方向
/* Common transition subtypes. */
CA_EXTERN NSString * const kCATransitionFromRight
CA_AVAILABLE_STARTING (10.5, 2.0, 9.0, 2.0); //右边
CA_EXTERN NSString * const kCATransitionFromLeft
CA_AVAILABLE_STARTING (10.5, 2.0, 9.0, 2.0); //左边
CA_EXTERN NSString * const kCATransitionFromTop
CA_AVAILABLE_STARTING (10.5, 2.0, 9.0, 2.0); //上边
CA_EXTERN NSString * const kCATransitionFromBottom
CA_AVAILABLE_STARTING (10.5, 2.0, 9.0, 2.0); //下边
* /
//动画过渡方向
@property(nullable, copy) NSString *subtype;
//动画起点（在整体动画的百分比），值在[ 0，1 ]之间，默认0
@property float startProgress;
//动画终点（在整体动画的百分比），值在[ 0，1 ]之间，默认1
@property float endProgress;
//为动画添加一个可选的滤镜。
//如果指定，那么指定的filter必须同时支持x和y，否则该filter将不起作用。
//如果设置了filter，那么，为layer设置的type和subtype属性将被忽略。
//如果设置了filter，那么必须实现`inputImage', `inputTargetImage' and `inputTime' input keys, and the `outputImage' output key. Optionally it may support the `inputExtent' key,
@property(nullable, strong) id filter;
@end
/****************** 允许多个动画同时播放 ************************/
CA_CLASS_AVAILABLE (10.5, 2.0, 9.0, 2.0)
//CAAnimation的子类，可以保存一组动画对象，将CAAnimationGroup对象加入层后，组中所有动画对象可以同时并发运行
@interface CAAnimationGroup : CAAnimation
//用来存储一组动画对象
@property(nullable, copy) NSArray *animations;
@end
NS_ASSUME_NONNULL_END
- 苹果官方提供的 API 前面标识符的意思如下：
1. C = Class 表示 类
2. M = Method 表示 方法
3. P = Property 表示 属性
4. f =
使用例子
CAKeyframeAnimation
1、values
NSValue *value0 = [NSNumber numberWithFloat:1.0]; //第一帧
NSValue *value1 = [NSNumber numberWithFloat:1.1]; //第二帧
NSValue *value2 = [NSNumber numberWithFloat:1.0]; //第三帧
CAKeyframeAnimation *trAnimation =
[CAKeyframeAnimation animationWithKeyPath:@"transform.scale"];
trAnimation.values = @[value0, value1, value2];
trAnimation.duration = 0.6;
trAnimation.timingFunction =
[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
[View.layer addAnimation:trAnimation forKey:nil];
2、path
CAKeyframeAnimation *animation =
[CAKeyframeAnimation animationWithKeyPath:@"position"];
animation.path = @"需要自己绘制路径（CGMutablePathRef / CGPathRef）";
animation.removedOnCompletion = NO;
animation.autoreverses = NO;
animation.duration = 1.0;
animation.repeatCount = 0;
animation.fillMode = kCAFillModeForwards;
animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn];
[view.layer addAnimation:animation forKey:@"animateLayer"];
CAAnimationGroup
CAAnimationGroup *animation = [CAAnimationGroup animation];
animation.animations = @[trAnimation,theAnimation];
animation.duration = 1.0;
animation.repeatCount = 0;
animation.removedOnCompletion = NO;
animation.fillMode = kCAFillModeForwards;
[view.layer addAnimation:animation forKey:@"animateLayer"];
CABasicAnimation
CABasicAnimation *theAnimation =
[CABasicAnimation animationWithKeyPath:@"transform.translation.y"];
theAnimation.duration = 1;
theAnimation.repeatCount = 0;
theAnimation.removedOnCompletion = FALSE;
theAnimation.fillMode = kCAFillModeForwards;
theAnimation.autoreverses = YES;
theAnimation.fromValue = [NSNumber numberWithFloat:0];
theAnimation.toValue = [NSNumber numberWithFloat:-64];
[view.layer addAnimation:theAnimation forKey:@"animateLayer"];
UIView *bgView = [[UIView alloc] init];
bgView.bounds = CGRectMake(0, 0, 100,100);
bgView.center = self.view.center;
[self.view addSubview:bgView];
CAShapeLayer *shapeLayer = [CAShapeLayer layer];
shapeLayer.frame = CGRectMake(0, 0, 100, 100);
UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:bgView.bounds];
shapeLayer.path = path.CGPath;
shapeLayer.fillColor = [UIColor clearColor].CGColor;
shapeLayer.lineWidth = 2.0f;
shapeLayer.strokeColor = [UIColor redColor].CGColor;
[bgView.layer addSublayer:shapeLayer];
//@property CGFloat strokeStart;
//@property CGFloat strokeEnd;
CABasicAnimation *pathAnima = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
pathAnima.duration = 3.0f;
pathAnima.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
pathAnima.fromValue = [NSNumber numberWithFloat:0.0f];
pathAnima.toValue = [NSNumber numberWithFloat:1.0f];
pathAnima.fillMode = kCAFillModeForwards;
pathAnima.removedOnCompletion = NO;
[shapeLayer addAnimation:pathAnima forKey:@"strokeEndAnimation"];
如果animationWithKeyPath:方法创建对象，参数如下：
| Structure Field | Description |
|---|---|
| rotation.x | The rotation, in radians, in the x axis. |
| rotation.y | The rotation, in radians, in the y axis. |
| rotation.x | The rotation, in radians, in the z axis. |
| rotation | The rotation, in radians, in the z axis. This is identical to setting the rotation.z field. |
| scale.x | Scale factor for the x axis. |
| scale.y | Scale factor for the y axis. |
| scale.x | Scale factor for the z axis. |
| scale | Average of all three scale factors. |
| translation.x | Translate in the x axis. |
| translation.y | Translate in the y axis. |
| translation.x | Translate in the z axis. |
| translation | Translate in the x and y axis. Value is an NSSize or CGSize. |
CASpringAnimation
。。。
CAPropertyAnimation
。。。
CATransition
CATransition *trAnimation = [CATransition animation];
trAnimation.duration = 1.0;
trAnimation.type = kCATransitionPush;
trAnimation.subtype = kCATransitionFromTop;
trAnimation.startProgress = 0.0;
trAnimation.endProgress = 1.0;
trAnimation.timingFunction =
[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
[View.layer addAnimation:trAnimation forKey:@"transition"];
trAnimation.type 苹果公开的类型仅仅有四种类型分别是：
淡化、推挤、揭开、覆盖
NSString * const kCATransitionFade;
NSString * const kCATransitionMoveIn;
NSString * const kCATransitionPush;
NSString * const kCATransitionReveal;
trAnimation.subtype 苹果提供的类型有如下四种：
从右侧、从左侧、从顶部、从底部
NSString * const kCATransitionFromRight;
NSString * const kCATransitionFromLeft;
NSString * const kCATransitionFromTop;
NSString * const kCATransitionFromBottom;
对于trAnimation.type类型苹果还提供了一定的私有API分别如下：
立方体、吸收、翻转、波纹、翻页、反翻页、镜头开、镜头关
animation.type = @"cube"
animation.type = @"suckEffect";
animation.type = @"oglFlip";
animation.type = @"rippleEffect";
animation.type = @"pageCurl";
animation.type = @"pageUnCurl"
animation.type = @"cameraIrisHollowOpen";
animation.type = @"cameraIrisHollowClose";
- CATransition 的 startProgress 和 endProgress属性介绍：
可以控制动画进行的过程，可以让动画停留在某个动画点上，值在0.0到1.0之间。endProgress要大于等于startProgress。比如上面的立方体转到，可以设置endProgress= 0.5，让动画停留在转动一般的位置。