iOS-CoreAnimation核心动画(API&&属性篇)

当你的才华撑不起你的野心时，你就应该静下来学习。 —— CJJ

  • 这一篇讲解的是CoreAnimation这个类中的属性和方法，了解了每一个属性和方法之后，使用起来就很轻松了。
  • 文尾有demo链接，想要学习一下的小伙伴可以下载看看，帮到你的话点个star吧😄
  • 话不多说，直接上图上代码

我们用下图来表达CoreAnimation的完整结构

动画类关系图

  • 此外还有CASpringAnimation 弹性动画 （iOS9.0之后，它实现弹簧效果的动画，是CABasicAnimation的子类。）

在Core Animation中可以使用创建实例对象的动画类：
1.基础动画： CABasicAnimation
2.关键帧动画： CAKeyframeAnimation
3.转场动画: CATransition
4.弹性动画： CASpringAnimation
5.动画组合： CAAnimationGroup

  • Core Animation是在后台执行的，不会阻塞主线程。
  • Core Animation直接作用于CALayer，而不是UIView

总体来说核心动画的优点有：
1、性能强大，使用硬件加速，可以同时向多个图层添加不同的动画效果
2、接口易用，只需要少量的代码就可以实现复杂的动画效果。
3、运行在后台线程中，在动画过程中可以响应交互事件（UIView动画默认动画过程中不响应交互事件）
4、只有在发生改变的时候才重绘内容，消除了动画的帧速率上的运行代码，提高应用性能

动画操作过程：
1、创建一个CAAnimation对象
2、设置一些动画的相关属性
3、给CALayer添加动画（addAnimation:forKey: 方法）
4、移除CALayer中的动画（removeAnimationForKey: 方法）

各项类的用法与相关属性

  • CAAnimation(动画基类)

@interface CAAnimation : NSObject
    <NSSecureCoding, NSCopying, CAMediaTiming, CAAction>
{
@private
  void *_attr;
  uint32_t _flags;
}
/* 初始化类方法,创建实例对象 */
+ (instancetype)animation;
/* 动画实现与CALayer定义的相同的属性模型.有关更多详细信息，请参见CALayer.h */
/* 设置动画key值(在CALayer添加动画时，添加动画并设置key:CALayer方法中设置- (void)addAnimation:(CAAnimation *)anim forKey:(nullable NSString *)key */
+ (nullable id)defaultValueForKey:(NSString *)key;
- (BOOL)shouldArchiveValueForKey:(NSString *)key;

(
 属性类别：
 
 设置 动画一段时的快慢
 设置了其动画的时间函数为CAMediaTimingFunction(name:kCAMediaTimingFunctionLinear)。时间函数通过修改持续时间的分数来控制动画的速度。(猜想：通过这个方法设置CAMediaTiming协议下的speed)
 
 kCAMediaTimingFunctionLinear  //线型移动
 kCAMediaTimingFunctionEaseIn  //淡入
 kCAMediaTimingFunctionEaseOut   //淡出
 kCAMediaTimingFunctionEaseInEaseOut   //淡入淡出
 kCAMediaTimingFunctionDefault       // 默认

 同时可以通过自定义CAMediaTimingFunction时间功能定义动画的时间
)
@property(nullable, strong) CAMediaTimingFunction *timingFunction;
/* 动画的执行的两个阶段的代理 */
@property(nullable, strong) id <CAAnimationDelegate> delegate;
/* 默认为YES，代表动画执行完毕后就从图层上移除，图形会恢复到动画执行前的状态。如果想让图层保持显示动画执行后的状态，那就设置为NO，不过还要设置fillMode属性为kCAFillModeForwards。比如进入后台回来动画依然执行，可以使用这个属性。*/
@property(getter=isRemovedOnCompletion) BOOL removedOnCompletion;
@end

/* 以下属性继承CAMediaTiming协议 */
@protocol CAMediaTiming
/* 设置当前动画开始的时间，如果没有设置默认为0，动画当前生成的时间 */
@property CFTimeInterval beginTime;
/* 设置 动画执行的时长 默认：0 */
@property CFTimeInterval duration;
/*
 可以通过speed和timeOffset这两个参数设置更复杂的动画效果，可以实现动画的暂停、快进等效果
 动画执行时间： t = (tp - begin) * speed + offset
 动画执行时间为：t     系统时间：tp   动画开始时间：begin
 默认情况下，speed：1     offset：0
 speed：单位时间执行的rate  例子：如果rate是2  本地时间是当前时间快两倍
*/
@property float speed;
@property CFTimeInterval timeOffset;
/* 动画执行的重复次数 */
@property float repeatCount;
/* 动画每次执行的时长   默认时间为0 */
@property CFTimeInterval repeatDuration;
/* 是否 动画反方向执行)；自定义为NO */
@property BOOL autoreverses;
( 
 //默认是kCAFillModeRemoved，当动画不再播放的时候就显示图层模型指定的值剩下的三种类型向前，向后或者即向前又向后去填充动画状态，使得动画在开始前或者结束后仍然保持开始和结束那一刻的值
 kCAFillModeForwards//对应toValue：动画结束后，图层保持toValue状态
 kCAFillModeBackwards//对应fromValue：动画前，图层一直保持fromValue状态
 kCAFillModeBoth//对应fromValue和toValue：以上两者的结合
 kCAFillModeRemoved//对图层没有什么影响，动画结束后图层恢复原来的状态
)
@property(copy) CAMediaTimingFillMode fillMode;
@end

/* 动画的执行的两个阶段的协议 */
@protocol CAAnimationDelegate <NSObject>
@optional
/* 核心动画开始时执行 */
- (void)animationDidStart:(CAAnimation *)anim;
/* 核心动画执行结束后调用 */
- (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag;
@end

  • CAPropertyAnimation(属性动画，继承CAAnimation)

CAPropertyAnimation基于property,他的keyPath就是描述需要动画的属性
keyPath：通过指定CALayer的一个属性名做为keyPath里的参数(NSString类型)，并且对CALayer的这个属性的值进行修改，达到相应的动画效果。比如，指定@”position”为keyPath，就修改CALayer的position属性的值，以达到平移的动画效果。

CAPropertyAnimation *animation = [CAPropertyAnimation animationWithKeyPath:@"position.y"];
[self.view.layer addAnimation:animation forKey:@"position_y"];
一些常用的animationWithKeyPath值的总结
一些常用的animationWithKeyPath值的总结
@interface CAPropertyAnimation : CAAnimation
+ (instancetype)animationWithKeyPath:(nullable NSString *)path;
/* 要改变的属性名称（传字符串）*/
@property(nullable, copy) NSString *keyPath;
/*
这个属性确定动画执行的状态是否叠加在控件的原状态上
默认设置为NO，如果我们执行两次位置移动的动画，会从同一位置执行两次
如果设置为YES，则会在第一次执行的基础上执行第二次动画
*/
@property(getter=isAdditive) BOOL additive;
/*
cumulative这个属性，有重复次数时才有用，
当设为true时这个动画的当前value就是上次动画的结尾的value加上当前重复中的value，
当设为false，value就一直是这个值
*/
@property(getter=isCumulative) BOOL cumulative;
/*
valueFunction这个是用来转化你设置的动画值为动画需要的矩阵值，
不赋值他就有默认的转化方式
*/
@property(nullable, strong) CAValueFunction *valueFunction;
@end
  • CABasicAnimation(基本动画，继承CAPropertyAnimation)
@interface CABasicAnimation : CAPropertyAnimation
/* keyPath相应属性的初始值 */
@property(nullable, strong) id fromValue;
/* keyPath相应属性的结束值 */
@property(nullable, strong) id toValue;
/* byValue和toValue的区别，前者是在当前的位置上增加多少，后者是到指定的位置 */
@property(nullable, strong) id byValue;
@end
  • CAKeyframeAnimation(关键帧动画，继承CAPropertyAnimation)

类似画图，画多个点，各个点连起来的线就是动画轨迹，每个点有对应的位置，对应的时间点

@interface CAKeyframeAnimation : CAPropertyAnimation
/* 
NSArray对象，里面的元素称为”关键帧”（NSValue类型），
动画对象会在指定的时间(duration)内，
依次显示values数组中的每一个关键帧（ NSValue）
*/
@property(nullable, copy) NSArray *values;
/*
可以设置一个CGPathRef、CGMutablePathRef，
让层跟着路径移动，path只对CALayer的anchorPoint和position起作用，
如果设置了path，那么values、keyTimes将被忽略。
*/
@property(nullable) CGPathRef path;
/* 
keyTimes的值与values中的值一一对应指定关键帧在动画中的时间点，取值范围为[0,1]。当keyTimes没有设置的时候,
各个关键帧的时间是平分的  
*/
@property(nullable, copy) NSArray<NSNumber *> *keyTimes;
/* 指定每个关键帧之间的动画缓冲效果，timingFunctions.count = keyTimes.count-1 */
@property(nullable, copy) NSArray<CAMediaTimingFunction *> *timingFunctions;
/* 关键帧间插值计算模式 */
@property(copy) CAAnimationCalculationMode calculationMode;
/*针对cubic 计算模式的动画，这些属性提供对插值方案的控制。每个*关键帧都可以具有与之相关的
张力、连续性和偏差值，这些值的范围在[-1,1]内（这定义了Kochanek-*Bartels样条，见http://en.wikipedia.org/wiki/Kochanek-Bartels_spline）。

*tensionValues控制曲线的“紧密度”（正值更紧，负值更圆）。
*continuityValues控制段的连接方式（正值表示锐角，负值表示倒角）。
*biasValues定义曲线发生的位置（正值在控制点之前移动曲线，负值在控制点之后移动它）。

*每个数组中的第一个值定义第一个控制点的切线的行为，第二个值控*制第二个点的切线，依此类推。任何未指定的值都默认为零
 *（如果未指定，则给出Catmull-Rom样条曲线）。 
*/
@property(nullable, copy) NSArray<NSNumber *> *tensionValues;
@property(nullable, copy) NSArray<NSNumber *> *continuityValues;
@property(nullable, copy) NSArray<NSNumber *> *biasValues;
/* 
定义沿路径动画的对象是否旋转以匹配路径切线 
kCAAnimationRotateAuto         //根据路径自动旋转
kCAAnimationRotateAutoReverse //根据路径自动翻转
*/
@property(nullable, copy) CAAnimationRotationMode rotationMode;
@end

  • CASpringAnimation(弹簧动画，继承CAAnimation)

@interface CASpringAnimation : CABasicAnimation
/* 质量，影响图层运动时的弹簧惯性，质量越大，弹簧拉伸和压缩的幅度越大 */
@property CGFloat mass;
/* 刚度系数(劲度系数/弹性系数)，刚度系数越大，形变产生的力就越大，运动越快 */
@property CGFloat stiffness;
/* 阻尼系数，阻止弹簧伸缩的系数，阻尼系数越大，停止越快 */
@property CGFloat damping;
/*
初始速率，动画视图的初始速度大小 Defaults to zero
速率为正数时，速度方向与运动方向一致，速率为负数时，速度方向与运动方向相反
*/
@property CGFloat initialVelocity;
/* 估算时间 返回弹簧动画到停止时的估算时间，根据当前的动画参数估算 */
@property(readonly) CFTimeInterval settlingDuration;
@end

  • CATransition(转场动画，继承CAAnimation)

CATransitionType
以下是基本的四种效果

kCATransitionPush 推入效果
kCATransitionMoveIn 移入效果
kCATransitionReveal 截开效果
kCATransitionFade 渐入渐出效果

以下API效果可以安全使用
cube 方块
suckEffect 三角
rippleEffect 水波抖动
pageCurl 上翻页
pageUnCurl 下翻页
oglFlip 上下翻转
cameraIrisHollowOpen 镜头快门开
cameraIrisHollowClose 镜头快门开

以下API效果请慎用

spewEffect 新版面在屏幕下方中间位置被释放出来覆盖旧版面.
genieEffect 旧版面在屏幕左下方或右下方被吸走, 显示出下面的新版面
unGenieEffect 新版面在屏幕左下方或右下方被释放出来覆盖旧版面.
twist 版面以水平方向像龙卷风式转出来.
tubey 版面垂直附有弹性的转出来.
swirl 旧版面360度旋转并淡出, 显示出新版面.
charminUltra 旧版面淡出并显示新版面.
zoomyIn 新版面由小放大走到前面, 旧版面放大由前面消失.
zoomyOut 新版面屏幕外面缩放出现, 旧版面缩小消失.
oglApplicationSuspend 像按”home” 按钮的效果

CATransitionSubtype
kCATransitionFromRight   从右边开始
kCATransitionFromLeft    从左边开始
kCATransitionFromTop     从上面开始
kCATransitionFromBottom  从下面开始

@interface CATransition : CAAnimation
/* 可选效果如上，动画的效果，传字符串 */
@property(copy) CATransitionType type;
/* 可选效果如上 动画开始的方向*/
@property(nullable, copy) CATransitionSubtype subtype;
/* 开始和结束的位置进度，数值介于[0,1]之间，结束值一定是大于开始值的 */
@property float startProgress;
@property float endProgress;
@end

  • CAAnimationGroup(动画组，继承CAAnimation)

@interface CAAnimationGroup : CAAnimation
/* 组动画中的动画数组 */
@property(nullable, copy) NSArray<CAAnimation *> *animations;
@end

文尾献上Demo CJJCoreAnimationDemo

传送门：iOS-CoreAnimation核心动画(使用篇)

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 203,324评论 5赞 476
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 85,303评论 2赞 381
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 150,192评论 0赞 337
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,555评论 1赞 273
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,569评论 5赞 365
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,566评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,927评论 3赞 395
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,583评论 0赞 257
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,827评论 1赞 297
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,590评论 2赞 320
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,669评论 1赞 329
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,365评论 4赞 318
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,941评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,928评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,159评论 1赞 259
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 42,880评论 2赞 349
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,399评论 2赞 342