iOS CABasicAnimation详解

作者: Zhui_Do | 来源:发表于2017-04-25 18:50 被阅读338次

    最近一直在看关于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)

    相关文章

      网友评论

        本文标题:iOS CABasicAnimation详解

        本文链接:https://www.haomeiwen.com/subject/wcwpzttx.html