iOS动画梳理与总结 (一) 核心动画

1、UIView和核心动画区别?

核心动画只能添加到CALayer, 核心动画一切都是假象,并不会改变真实的值。如果需要与用户交互就使用UIView的动画. 不需要与用户交互可以使用核心动画。
在转场动画中,核心动画的类型比较多。根据⼀个路径做动画,只能用核心动画(帧动画) 、动画组:同时做多个动画。

2、核心动画的分类

核心动画继承结构
图中的黑色虚线代表“继承”某个类,红色虚线代表“遵守”某个协议


2-1.png

2.1 CAAnimation

CAAnimation是所有动画对象的父类,负责控制动画的持续时间和速度,是个抽象类,不能直接使用,应该使用它具体的子类

属性解读

属性 描述
duration 动画的持续时间
repeatCount 重复次数,无限循环可以设置HUGE_VALF或者MAXFLOAT
repeatDuration 重复时间
beginTime 可以用来设置动画延迟执行时间,若想延迟2s,就设置CACurrentMediaTime()+2CACurrentMediaTime()为图层的 当前时间
autoreverses 动画自动逆向执行,默认为No
speed 动画执行速度
removedOnCompletion 默认为YES,代表动画执行完毕后就从图层上移除,图形会恢复到动画执行前的状态。如果想让图层保持显示动画执行后的状态,那就设置为NO,不过还要设置fillMode为kCAFillModeForwards
fillMode 决定当前对象在非active时间段的行为。比如动画开始之前或者动画结束之后
timingFunction 速度控制函数,控制动画运行的节奏,例:anima.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn]
delegate 动画代理,监听动画的开始和结束

fillMode属性值(要想fillMode有效,最好设置removedOnCompletion = NO)
kCAFillModeRemoved这个是默认值,也就是说当动画开始前和动画结束后,动画对layer都没有影响,动画结束后,layer会恢复到之前的状态
CAFillModeForwards 当动画结束后,layer会一直保持着动画最后的状态
kCAFillModeBackwards 在动画开始前,只需要将动画加入了一个layer,layer便立即进入动画的初始状态并等待动画开始。
kCAFillModeBoth这个其实就是上面两个的合成.动画加入后开始之前,layer便处于动画初始状态,动画结束后layer保持动画最后的状态

速度控制函数(CAMediaTimingFunction)
kCAMediaTimingFunctionLinear(线性):匀速,给你一个相对静态的感觉
kCAMediaTimingFunctionEaseIn(渐进):动画缓慢进入,然后加速离开
kCAMediaTimingFunctionEaseOut(渐出):动画全速进入,然后减速的到达目的地
kCAMediaTimingFunctionEaseInEaseOut(渐进渐出):动画缓慢的进入,中间加速,然后减速的到达目的地。这个是默认的动画行为。

  • delegate:动画代理
    @protocol CAAnimationDelegate <NSObject>
    @optional
    
    /* Called when the animation begins its active duration. */
    
    - (void)animationDidStart:(CAAnimation *)anim;
    
    /* Called when the animation either completes its active duration or
    * is removed from the object it is attached to (i.e. the layer). 'flag'
    * is true if the animation reached the end of its active duration
    * without being removed. */
    
    - (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag;
    
    @end
    
  • CALayer上动画的暂停和恢复
     //暂停动画
     - (void)pauseLayerAnimation:(CALayer *)layer {
         CFTimeInterval pauseTimes = [layer convertTime:CACurrentMediaTime()  fromLayer:nil];
      // speed动画的运行速度,当为0时会停止动画,speed越大说明动画执行速度越快
         layer.speed = 0.0;
     // 让layer的时间停留在pauseTimes
     // 动画的时间偏移,也就是上次动画的暂停/继续 距离本次动画的继续/暂停的时间差
         layer.timeOffset = pauseTimes;
         NSLog(@":pauseTimes:%f", pauseTimes);
    }
    //恢复动画
     - (void)resumeLayerAnimation:(CALayer *)layer {
         CFTimeInterval pauseTimes = layer.timeOffset;
         //让CALayer的时间继续行走
          layer.speed = 1;
       // 取消上次记录的停留时刻
          layer.timeOffset = 0.0;
       //取消上次设置的时间
          layer.beginTime = 0.0;
          CFTimeInterval timeSincePause = CACurrentMediaTime()-pauseTimes;
          layer.beginTime = timeSincePause;
          NSLog(@":timeSincePause:%f", timeSincePause);
    }
    

2.2 CAPropertyAnimation

CAPropertyAnimation也是一个抽象类,自身并不能对layer进行动画操作,需要其子类CABasicAnimation和CAKeyframeAnimation来实现动画操作。

属性解读

属性 描述
keyPath 指定接收层动画的动画类型(详细见附录表)
cumulative 下一次动画执行是否接着刚才的动画,默认为false
additive 如何处理多个动画在同一时间段执行的结果,若为true,同一时间段的动画合成为一个动画,默认为false。(使用 CAKeyframeAnimation 时必须将该属性指定为 true ,否则不会出现期待的结果)

2.3 CABasicAnimation——基本动画

基本动画,是CAPropertyAnimation的子类

属性 描述
fromValue NSValue类型,keyPath相应属性的初始值
toValue NSValue类型, keyPath相应属性的结束值

动画过程说明:
随着动画的进行,在长度为duration的持续时间内,keyPath相应属性的值从fromValue渐渐地变为toValue
keyPath内容是CALayer的可动画Animatable属性
如果fillMode==kCAFillModeForwards同时removedOnComletion=NO,那么在动画执行完毕后,图层会保持显示动画执行后的状态。但在实质上,图层的属性值还是动画执行前的初始值,并没有真正被改变。

    CABasicAnimation *basicAnim = [CABasicAnimation animation];
    
    basicAnim.keyPath = @"position.y";
    basicAnim.fromValue = @(self.redView.layer.position.y);
    basicAnim.toValue = @(self.redView.layer.position.y + 300);
    
    basicAnim.duration = 2.0;
    // 动画完成时不移除动画
    basicAnim.removedOnCompletion = NO;
    // 动画完成时保持最后的状态
    basicAnim.fillMode = kCAFillModeForwards;
    // 动画重复次数
    basicAnim.repeatCount = MAXFLOAT;
    // 自动返转(怎么去,怎么返回)
    basicAnim.autoreverses = YES;
    // 延迟2S开始动画
    basicAnim.beginTime = CACurrentMediaTime()+2;
    [self.redView.layer addAnimation:basicAnim forKey:nil];

2.3 CAKeyframeAnimation——关键帧动画

关键帧动画,也是CAPropertyAnimation的子类,与CABasicAnimation的区别是:
CABasicAnimation:只能从一个数值(fromValue)变到另一个数值(toValue)
CAKeyframeAnimation:会使用一个NSArray保存这些数值。

属性 描述
values NSArray类型,里面的元素(NSValue)称为“关键帧”(keyframe)。动画对象会在指定的时间(duration)内,依次显示values数组中的每一个关键帧
path 可以设置一个CGPathRef、CGMutablePathRef,让图层按照路径轨迹移动。path只对CALayer的anchorPoint和position起作用。如果设置了path,那么values将被忽略
keyTimes NSArray类型,可以为对应的关键帧指定对应的时间点,其取值范围为0到1.0,keyTimes中的每一个时间值都对应values中的每一帧。如果没有设置keyTimes,各个关键帧的时间是平分的
    UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:self.iconImageView.center radius:100 startAngle:0 endAngle:M_PI clockwise:YES];
    
    CAKeyframeAnimation *keyFrameAnima = [CAKeyframeAnimation animation];
    keyFrameAnima.path = path.CGPath;
    
    keyFrameAnima.keyPath = @"position";
    keyFrameAnima.duration = 2;
    keyFrameAnima.repeatCount = MAXFLOAT;
    keyFrameAnima.autoreverses = YES;
    [self.iconImageView.layer addAnimation:keyFrameAnima forKey:nil];

2.4 CAAnimationGroup——动画组

动画组,是CAAnimation的子类,可以保存一组动画对象,将CAAnimationGroup对象加入层后,组中所有动画对象可以同时并发运行

属性 描述
animations 用来保存一组动画对象的NSArray。默认情况下,一组动画对象是同时运行的,也可以通过设置各个动画对象的beginTime属性来更改动画的开始时间
- (void)addAnimationGrounp {
    // 创建一个基础动画
    CABasicAnimation *basicAnima = [CABasicAnimation animation];
    basicAnima.keyPath = @"transform.scale";
    basicAnima.fromValue = @1.0;
    basicAnima.toValue = @0;
    
    // 创建一个帧动画
    CAKeyframeAnimation *keyframeAnim = [CAKeyframeAnimation animation];
    keyframeAnim.path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(170, self.redView.center.y) radius:100 startAngle:M_PI endAngle:M_PI*2 clockwise:YES].CGPath;
    keyframeAnim.keyPath = @"position";
    
    // 动画组
    CAAnimationGroup *animGroup = [CAAnimationGroup animation];
    animGroup.animations = @[basicAnima,keyframeAnim];
    animGroup.duration = 2.0;
    animGroup.repeatCount = MAXFLOAT;
    animGroup.autoreverses = YES;
    [self.redView.layer addAnimation:animGroup forKey:nil];
}

2.4 CATransition——转场动画

CATransitionCAAnimation的子类,用于做转场动画,能够为层提供移出屏幕和移入屏幕的动画效果。UINavigationController就是通过CATransition实现了将控制器的视图推入屏幕的动画效果。
注意:如果父视图中的两个子视图互相切换,转场动画应加给父视图!

属性 描述
type 动画过渡类型
subtype 动画过渡方向
startProgress 动画起点(在整体动画的百分比)
endProgress 动画终点(在整体动画的百分比)

使用以下public api,如果用了私有api可能会导致上架问题
//-----------------------------public api------------------------------------
/*
type:
kCATransitionFade; //淡入淡出
kCATransitionMoveIn; //覆盖
kCATransitionPush; //推挤
kCATransitionReveal; //揭开
/
/

subType:
kCATransitionFromRight;
kCATransitionFromLeft;
kCATransitionFromTop;
kCATransitionFromBottom;
*/

    CATransition *transiont = [CATransition animation];
    /**
     fade ,                   //淡入淡出
     push,                       //推挤
     reveal,                     //揭开
     moveIn,                     //覆盖
     cube,                       //立方体
     suckEffect,                 //吮吸
     oglFlip,                    //翻转
     rippleEffect,               //波纹(水滴)
     pageCurl,                   //翻页
     pageUnCurl,                 //反翻页
     cameraIrisHollowOpen,       //开镜头
     cameraIrisHollowClose,      //关镜头
     */
    transiont.type =@"pageCurl";
    transiont.subtype = @"fromBottom";
    transiont.duration = 0.5;
    
    // 动画从哪个点开始
    transiont.startProgress = 0;
    // 动画到哪个点结束
    transiont.endProgress = 0.5;
  
    [self.imageView.layer addAnimation:transiont forKey:nil];

2.5 CASpringAnimation——弹性动画

弹性动画,是CABasicAnimation的子类

属性 描述
mass 质量,质量越大,弹簧的惯性越大
stiffness 弹性系数,弹性系数越大,运动越快
damping 阻尼系数,阻尼越大,弹簧的运动停止越快
initialVelocity 初始速度
settlingDuration 执行时间
    CASpringAnimation *springAnimation = [CASpringAnimation animationWithKeyPath:@"bounds"];
    springAnimation.mass = 1;
    springAnimation.stiffness = 1000;
    springAnimation.damping = 20;
    springAnimation.initialVelocity = 50;
    springAnimation.duration = springAnimation.settlingDuration;
    springAnimation.fromValue = @(self.animationView.bounds);
    CGRect newBounds = CGRectMake(self.animationView.bounds.origin.x, self.animationView.bounds.origin.y, self.animationView.bounds.size.width+80, self.animationView.bounds.size.height);
    springAnimation.toValue = @(newBounds);
    springAnimation.fillMode = kCAFillModeForwards;
    springAnimation.removedOnCompletion = NO;
    springAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
    [self.animationView.layer addAnimation:springAnimation forKey:nil];
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,258评论 6 498
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,335评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 162,225评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,126评论 1 292
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,140评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,098评论 1 295
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,018评论 3 417
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,857评论 0 273
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,298评论 1 310
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,518评论 2 332
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,678评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,400评论 5 343
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,993评论 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,638评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,801评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,661评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,558评论 2 352