美文网首页
CAAnimation 核心动画

CAAnimation 核心动画

作者: 就算我心狂野 | 来源:发表于2016-05-09 17:26 被阅读50次

    概念

    • 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;

    Paste_Image.png

    一、 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

    属性:

    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(@"动画完成!"); 
        }];
    }
    

    相关文章

      网友评论

          本文标题:CAAnimation 核心动画

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