iOS CABasicAnimation详解

最近一直在看关于CALayer的相关知识,这里整理一下CABasicAnimation相关知识
1.CAlayer
2.CoreAnimation
3.anchorPoint(锚点)
4.CABasicAnimation

一、关于CAlayer

CoreAnimation是基于CAlayer层的动画,CAlayer是定义在QuartzCore框架中的(Core Animation)
苹果对于CAlayer的概述
CAlayer管理基于图像的内容并允许您对该内容执行动画的对象
层通常用于为视图提供后备存储,但也可以使用,而无需显示内容。层的主要工作是管理您提供的视觉内容,但图层本身具有可设置的可视属性,例如背景颜色,边框和阴影。除了管理视觉内容之外,该层还保留有关其内容的几何形状的信息(例如其位置,大小和变换),用于在屏幕上呈现该内容。
修改图层的属性是如何启动图层内容或几何图形的动画。层对象通过采用定义层的定时信息的协议来封装层的持续时间和起始位置及其动画。CAMediaTiming
如果图层对象是由视图创建的,则视图通常会自动分配为图层的委托,并且不应更改该关系。对于您自己创建的图层,可以分配delegate对象并使用该对象动态提供图层的内容并执行其他任务。图层也可能具有布局管理器对象(分配给该属性)以分别管理子视图的布局。layoutManager

CALayer.png

CALayer属性.png

CAlayer遵循CAMeidaTiming协议,CABasicAnimation继承于CAPropertyAnimation,CAPropertyAnimation继承于CAAnimation而CAAnimation遵CAMeidaTiming协议

CAMediaTiming属性列表

属性 类型 说明
beginTime CFTimeInterval 指定接收方相对于其父对象(如果适用)的开始时间。
timeOffset CFTimeInterval 指定活动本地时间的额外时间偏移量。
repeatCount float 确定动画重复的次数。
repeatDuration CFTimeInterval 确定动画重复的秒数。
duration CFTimeInterval 指定动画的基本持续时间,以秒为单位。
speed float 指定从父时间空间将时间映射到接收者的时间空间。
autoreverses BOOL 确定动画在完成后是否相反执行
fillMode NSString 确定接收者的演示文稿是否在其活动持续时间完成后被冻结或删除。

FillMode
这些常数决定了定时对象在其活动持续时间完成后的行为。默认值是 kCAFillModeRemoved。

FillMode.png

二、CAAnimation

CAAnimation可以分为以下几类:

  • CABasicAnimation
    基础动画,通过设定起始点,终点,时间,动画会沿着你这设定点进行移动。可以看做特殊的CAKeyFrameAnimation
  • CAKeyframeAnimation
    关键帧动画,可定制度比CABasicAnimation高,也是本系列的接下来的内容
  • CAAnimationGroup
    组动画,支持多个CABasicAnimation或者CAKeyframeAnimation动画同时执行
继承关系.jpg
  • CAAnimation 是一个抽象类, 遵循了CAMediaTiming协议和CAAction协议 我们不能直接使用CAAnimation类 而是使用其子类;
  • CATransition:提供渐变效果,比如推拉push效果,消退fade效果,揭开reveal 效果
  • CAAnimationGroup 允许多个动画同时播放
  • CABasicAnimation 提供了对单一动画的实现
  • CAKeyframeAnimation 关键帧动画 可以定义动画路线
  • CAPropertyAnimation 属性动画 通常不直接使用,而是使用CABasicAnimation子类

** CABasicAnimation属性及说明**


属性和说明.jpeg

CABasicAnimation提供了最基础的动画属性设置,是简单的keyframe动画性能。CABasicAnimation可以看做是一种CAKeyframeAnimation的简单动画,因为它只有头尾的关键帧(keyframe)。

我们可以创建一个CABasicAnimaiton的对象通过keyPath的方式。CABasicAnimation提供了fromValue、toValue、byValue的设置(插值)。它们三个属性定义了一个动画的轨迹,并且最少两个值不能为空。

当设置了CABasicAnimation的起点与终点值后,中间的值都是通过插值方式计算出来的,插值计算是通过timingFunction来指定,timingFunction默认为空,使用liner(匀速运动)。例如,当我们设置了一个position的动画,设置了开始值PointA与结束值PointB,它们的运动先计算PointA与PointB的中间运动值PointCenter,而PointCenter是由timingFunction来指定值的,并且动画默认是直线匀速运动的。

  • CABasicAnimation遵循CAMediaTiming所以拥有CAMediaTiming的属性。

  • CABasicAnimation为图层属性提供基本的单关键帧动画功能的对象。

  • 一个 CABasicAniamtion 的实例对象只是一个数据模型

  • 速度控制函数(CAMediaTimingFunction)

  • kCAMediaTimingFunctionLinear(线性):匀速,给你一个相对静态的感觉,这个是默认的动画行为。

  • kCAMediaTimingFunctionEaseIn(渐进):动画缓慢进入,然后加速离开

  • kCAMediaTimingFunctionEaseOut(渐出):动画全速进入,然后减速的到达目的地

  • kCAMediaTimingFunctionEaseInEaseOut(渐进渐出):动画缓慢的进入,中间加速,然后减速的到达目的地。

    CALayer *layer = [CALayer new];
    layer.frame = CGRectMake(100, 100, 100, 100);
    layer.backgroundColor = [UIColor redColor].CGColor;
    [self.view.layer addSublayer: layer];

    CABasicAnimation *animation  = [CABasicAnimation animationWithKeyPath:@"position"];
    animation.duration = 2;
    
    animation.fromValue = [NSValue valueWithCGPoint:layer.position];
    
    animation.toValue = [NSValue valueWithCGPoint:CGPointMake(300, 300)];
    //延时 1.0秒
    animation.beginTime = CACurrentMediaTime() + 1.0;
    // 指定动画重复是否累加
    animation.cumulative = NO;
    // 动画完成是否移除动画
    animation.removedOnCompletion = YES;
    // 设置移动的效果为快入快出
    animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
    // 设置无限循环动画
    animation.repeatCount = HUGE_VALF;
    // 设置动画完成时,自动以动画回到原点
    animation.autoreverses = YES;
    // 设置动画完成时,返回到原点
    animation.fillMode = kCAFillModeForwards;
    
    [layer addAnimation:animation forKey:nil];
  • 注意

** animation中的postion动画fromValue与fromValue均为layer的position,position与frame中origin不是同一个东西哦,开始弄了半天动画位置一直不对,才知道这里还有一个锚点的知识点。**

三、layer的position和anchorPoint(锚点)两个属性

1.position(位置)
position是layer中的anchorPoint点在superLayer中的位置坐标。
2.anchorPoint(锚点)
anchorPoint点是相对layer的,两者是相对不同的坐标空间的一个重合点。默认的anchorPoint是(0.5,0.5),与positon重合,当我们设置了锚点之后,我们的视图会根据设置的锚点来来进行相对偏移。
看了许多相关文章,有些说锚点是相对于postition的个人感觉有点问题,亲自测试了一下,改变layer的position后锚点还是0.50.5,只有layer的位置发生了变化,所以得出结论position是相对于锚点的描述,描述的是当前layer的锚点在superlayer的位置

锚点与位置测试.png

锚点与位置验证.png

苹果Doc相关说明
锚点影响位置.png

animationWithKeyPath值

说明 value
transform.scale 比例转化 @(0.8)
transform.scale.x 宽的比例 @(0.8)
transform.scale.y 高的比例 @(0.8)
transform.rotation.x 围绕x轴旋转 @(M_PI)
transform.rotation.y 围绕y轴旋转 @(M_PI)
transform.rotation.z 围绕z轴旋转 @(M_PI)
cornerRadius 圆角的设置 @(50)
backgroundColor 背景颜色的变化 (id)[UIColor purpleColor].CGColor
bounds 大小,中心不变 [NSValue valueWithCGRect:CGRectMake(0, 0, 200, 200)];
position 位置(中心点的改变) [NSValue valueWithCGPoint:CGPointMake(300, 300)];
contents 内容,比如UIImageView的图片 imageAnima.toValue = (id)[UIImage imageNamed:@"to"].CGImage;
opacity 透明度 @(0.7)
contentsRect.size.width 横向拉伸缩放 @(0.4)最好是0~1之间的
anchorPoint 锚点(相当于改变position) [NSValue valueWithCGPoint:CGPointMake(1, 1)]

只要是CAlayer属性中的支持隐式动画的都可以作为keypath的值

四、CABasicAnimation

**CABasicAnimation为图层属性提供基本的单关键帧动画功能的对象最重要的三个属性就是fromValue、toValue、byValue **

属性 说明
fromValue 动画的效果变化的初始值
toValue 动画效果变化的结束值(绝对值)
byValue byValue;动画效果变化的结束值(相对值)
  • fromValue和toValue不为空,动画的效果会从fromValue的值变化到toValue。
  • fromValue和byValue都不为空,动画的效果将会从fromValue变化到fromValue+byValue。
  • toValue 和byValue都不为空,动画的效果将会从toValue-byValue变化到toValue。
  • 只有fromValue的值不为空,动画的效果将会从fromValue的值变化到当前的状态。
  • 只有toValue的值不为空,动画的效果将会从当前状态的值变化到toValue的值。
  • 只有byValue的值不为空,动画的效果将会从当前的值变化到(当前状态的值+byValue)的值。

相关资料

初探CALayer属性
[Core Animation Programming Guide](Core Animation Programming Guide)
http://www.jianshu.com/p/cd1bc0e82f4d
http://blog.jobbole.com/69111/
iOS 动画之CoreAnimation(CALayer)

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 206,839评论 6 482
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 88,543评论 2 382
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 153,116评论 0 344
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 55,371评论 1 279
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 64,384评论 5 374
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,111评论 1 285
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,416评论 3 400
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,053评论 0 259
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,558评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,007评论 2 325
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,117评论 1 334
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,756评论 4 324
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,324评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,315评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,539评论 1 262
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,578评论 2 355
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,877评论 2 345

推荐阅读更多精彩内容