CAAnimation 核心动画

概念

  • Core Animation可以用在 Mac OS X 和 iOS平台. Core Animation的动画执行过程是在后台操作的.不会阻塞主线程. 要注意的是, Core Animation是直接作用在CALayer上的.并非UIView。

  • 使用步骤:
    1、创建一个CAAnimation对象
    2、设置一些动画的相关属性
    3、给CALayer添加动画(addAnimation:forKey: 方法)
    4、停止CALayer动画(removeAnimationForKey: 方法)

  • 注意: 如果当动画正在执行的时候, 将程序退出到后台, 那么当程序再次进入前台的时候就不执行了。
    原因: 因为再次进入前台后动画已经被删除了。
    解决: anim.removedOnCompletion = NO;

CAAnimation继承结构

一、 CAAnimation

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

属性:
  1. duration:动画的持续时间,默认为0.25秒
  2. repeatCount:动画的重复次数
  3. repeatDuration:动画的重复时间
  4. removedOnCompletion:默认为YES,代表动画执行完毕后就从图层上移除,图形会恢复到动画执行前的状态。如果想让图层保持显示动画执行后的状态,那就设置为NO,不过还要设置fillMode属性为kCAFillModeForwards
  5. fillMode:决定当前对象在非active时间段的行为.比如动画开始之前,动画结束之后
  6. beginTime:可以用来设置动画延迟执行时间,若想延迟2s,就设置为CACurrentMediaTime()+2,CACurrentMediaTime()为图层的当前时间
  7. timingFunction:速度控制函数,控制动画运行的节奏

枚举参数:
(1)kCAMediaTimingFunctionLinear 时间曲线函数,匀速
(2)kCAMediaTimingFunctionEaseIn 时间曲线函数,由慢到特别快
(3)kCAMediaTimingFunctionEaseOut 时间曲线函数,由快到慢
(4)kCAMediaTimingFunctionEaseInEaseOut 时间曲线函数,由慢到快
(5)kCAMediaTimingFunctionDefault 系统默认

  1. delegate:动画代理,一般设置隐式代理,该代理是NSObject的分类,不需要遵守协议
    anim.delegate = self;
    (1)- (void)animationDidStart:(CAAnimation *)anim;核心动画开始时执行
    (2)- (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag;核心动画执行结束后调用

二、 CAPropertyAnimation

是CAAnimation的子类,也是个抽象类,要想创建动画对象,应该使用它的两个子类:CABasicAnimation和CAKeyframeAnimation

属性:@property(nullable, copy) NSString *keyPath;
类方法:+ (instancetype)animationWithKeyPath:(nullableNSString *)path;

keyPath参数:通过指定CALayer的一个属性名做为keyPath里的参数(NSString类型),并且对CALayer的这个属性的值进行修改,达到相应的动画效果。比如,指定@”position”为keyPath,就修改CALayer的position属性的值,以达到平移的动画效果。
例子:

CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"position.y"];

可修改的keyPath参数:


keyPath参数

三、CABasicAnimation(基本动画)CAPropertyAnimation的子类

属性:
  1. fromValue : keyPath相应属性的初始值
  2. toValue : keyPath相应属性的结束值,到某个固定的值(类似transform的make含义)
    注意:随着动画的进行,在长度为duration的持续时间内,keyPath相应属性的值从fromValue渐渐地变为toValue.
    如果fillMode = kCAFillModeForwards和removedOnComletion = NO;那么在动画执行完毕后,图层会保持显示动画执行后的状态,但实质上,图层的属性值还是动画执行前的初始值,并没有真正被改变.比如: CALayer的postion初始值为(0,0),CABasicAnimation的fromValue为(10,10),toValue为 (100,100),虽然动画执行完毕后图层保持在(100,100) 这个位置,实质上图层的position还是为(0,0);
  3. byValue:不断进行累加的数值(类似transform非make方法的含义)
    例子:
CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"transform.rotation.z"];
animation.byValue = @(M_PI * 2);

四、 CAKeyframeAnimation(关键帧动画)CAPropertyAnimation的子类

和CABasicAnimation的区别:CABasicAnimation只能从一个数值(fromValue)变到另一个数值(toValue),而CAKeyframeAnimation会使用一个NSArray(values)保存这些数值,实现多个点间的动画效果,CABasicAnimation可看做是最多只有2个关键帧的CAKeyframeAnimation

属性:
  1. values:NSArray对象,里面的元素称为”关键帧”(NSValue类型),动画对象会在指定的时间(duration)内,依次显示values数组中的每一个关键帧( NSValue)
    例子:
//设置动画属性
NSValue *p1 = [NSValue valueWithCGPoint:CGPointMake(50, 150)];
NSValue *p2 = [NSValue valueWithCGPoint:CGPointMake(250, 150)];
NSValue *p3 = [NSValue valueWithCGPoint:CGPointMake(50, 550)];
NSValue *p4 = [NSValue valueWithCGPoint:CGPointMake(250, 550)];
animKey.values = @[p1, p2, p3, p4];
  1. path:可以设置一个CGPathRef\CGMutablePathRef,让层跟着路径移动,path只对CALayer的anchorPoint和position起作用,如果设置了path,那么values将被忽略。
    例子:
UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(50, 100, 250, 100)];
animKey.path = path.CGPath;
  1. keyTimes:可以为对应的关键帧指定对应的时间点,其取值范围为0到1.0,keyTimes中的每一个时间值都对应values中的每一帧,当keyTimes没有设置的时候,各个关键帧的时间是平分的
  2. rotationMode:旋转模式
    (1)如果为nil或不设置效果为
    旋转模式效果1

    (2)设置为kCAAnimationRotateAuto 或 kCAAnimationRotateAutoReverse 会随着旋转的角度做 ”自转“
    animKey.rotationMode = kCAAnimationRotateAuto; 效果为:
    旋转模式效果2

五、 CAAnimationGroup(组动画)CAAnimation的子类

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

属性:

animations:动画组,用来保存一组动画对象的NSArray
默认情况下,一组动画对象是同时运行的,也可以通过设置动画对象的beginTime属性来更改动画的开始时间
例子:

// 2. 向组动画中添加各种子动画
// 2.1 旋转
CABasicAnimation *anim1 = [CABasicAnimation animationWithKeyPath:@"transform.rotation.z"];
// anim1.toValue = @(M_PI * 2 * 500);
anim1.byValue = @(M_PI * 2 * 1000);
// 2.2 缩放
CABasicAnimation *anim2 = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
anim2.toValue = @(0.1);
// 2.3 改变位置, 修改position
CAKeyframeAnimation *anim3 = [CAKeyframeAnimation animationWithKeyPath:@"position"];
anim3.path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(50, 100, 250, 100)].CGPath;

// 把子动画添加到组动画中
anim.animations = @[anim1, anim2, anim3];

六、CATransition(转场动画)CAAnimation的子类

用于做转场动画,能够为层提供移出屏幕和移入屏幕的动画效果。iOS比Mac OS X的转场动画效果少一点。
UINavigationController就是通过CATransition实现了将控制器的视图推入屏幕的动画效果

属性:
  1. type:设置动画过渡的类型

枚举:
kCATransitionFade 交叉淡化过渡
kCATransitionMoveIn 新视图移到旧视图上面
kCATransitionPush 新视图把旧视图推出去
kCATransitionReveal 将旧视图移开,显示下面的新视图
下面类型包装成字符串赋值

转场动画过渡效果
  1. subtype:设置动画过渡方向

枚举:
kCATransitionFromRight
kCATransitionFromLeft
kCATransitionFromTop
kCATransitionFromBottom

  1. startProgress:动画起点(在整体动画的百分比)
  2. endProgress:动画终点(在整体动画的百分比)
    例子:
- (IBAction)didRecognizeSwipeGesture:(UISwipeGestureRecognizer *)sender {
    // 1. 创建一个转场动画对象
    CATransition *anim = [[CATransition alloc] init];
    // 设置转场动画的类型
    anim.type = @"suckEffect";
    // 设置转场动画时间
    anim.duration = 1.5;
    anim.delegate = self;

    // 判断方向
    if (sender.direction == UISwipeGestureRecognizerDirectionLeft) {
        // 设置转场动画的子类型
        anim.subtype = kCATransitionFromRight;
        // NSLog(@"left");
        self.index++;
    } else {
        // 设置转场动画的子类型
        anim.subtype = kCATransitionFromLeft;
        // NSLog(@"right");
        self.index--;
    }
    // 判断是否越界
    if (self.index > 4) {
        self.index = 0;
    }
    if (self.index < 0) {
        self.index = 4;
    }

    // 拼接图片名称
    NSString *imgName = [NSString stringWithFormat:@"%d", self.index + 1];
    // 切换图片
    self.imgViewIcon.image = [UIImage imageNamed:imgName];
    // 把转场动画添加到对应的控件上
     [self.imgViewIcon.layer addAnimation:anim forKey:@"anim1"];
}

七、UIView的类方法实现转场动画

单视图:

+ (void)transitionWithView:(UIView *)view duration:(NSTimeInterval)duration options:(UIViewAnimationOptions)options animations:(void (^ __nullable)(void))animations completion:(void (^ __nullable)(BOOL finished))completion NS_AVAILABLE_IOS(4_0);

双视图:

+ (void)transitionFromView:(UIView *)fromView toView:(UIView *)toView duration:(NSTimeInterval)duration options:(UIViewAnimationOptions)options completion:(void (^ __nullable)(BOOL finished))completion NS_AVAILABLE_IOS(4_0);

参数解析:
duration:动画的持续时间
view:需要进行转场动画的视图
options:转场动画的类型、效果,枚举类型
animations:将改变视图属性的代码放在这个block中
completion:动画结束后,会自动调用这个block

例子:

// 识别到了轻扫手势
- (IBAction)didRecognizeSwipeGesture:(UISwipeGestureRecognizer *)sender {
    // 判断方向
    if (sender.direction == UISwipeGestureRecognizerDirectionLeft) {
        self.index++;
    } else {
        self.index--;
    }
    // 判断是否越界
    if (self.index > 4) {
        self.index = 0;
    }
    if (self.index < 0) {
        self.index = 4;
    }
    // 拼接图片名称
    NSString *imgName = [NSString stringWithFormat:@"%d", self.index + 1];
    // 切换图片
    self.imgViewIcon.image = [UIImage imageNamed:imgName];
    // 通过UIView来添加转场动画
    [UIView transitionWithView:self.imgViewIcon duration:0.5 options:UIViewAnimationOptionLayoutSubviews animations:^{
        [UIView animateWithDuration:0.5 animations:^{
            self.imgViewIcon.alpha = 0.4;
        } completion:^(BOOL finished) {
            [UIView animateWithDuration:0.5 animations:^{
                self.imgViewIcon.alpha = 1.0;
            }];
        }];
    } completion:^(BOOL finished) {
        NSLog(@"动画完成!");
    }];
}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,080评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,422评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,630评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,554评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,662评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,856评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,014评论 3 408
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,752评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,212评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,541评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,687评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,347评论 4 331
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,973评论 3 315
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,777评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,006评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,406评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,576评论 2 349

推荐阅读更多精彩内容

  • 概念 Core Animation可以用在 Mac OS X 和 iOS平台. Core Animation的动画...
    就算我心狂野阅读 736评论 0 0
  • 在iOS实际开发中常用的动画无非是以下四种:UIView动画,核心动画,帧动画,自定义转场动画。 1.UIView...
    请叫我周小帅阅读 3,082评论 1 23
  • 在iOS中随处都可以看到绚丽的动画效果,实现这些动画的过程并不复杂,今天将带大家一窥ios动画全貌。在这里你可以看...
    每天刷两次牙阅读 8,471评论 6 30
  • 在iOS中随处都可以看到绚丽的动画效果,实现这些动画的过程并不复杂,今天将带大家一窥iOS动画全貌。在这里你可以看...
    F麦子阅读 5,104评论 5 13
  • 一只鸟的追忆 尊贵的人类: 你们好! 叽叽叽,我是一只鸟儿。 中国的每...
    小红帽0914阅读 228评论 0 1