美文网首页
核心动画二

核心动画二

作者: coma | 来源:发表于2015-12-28 11:23 被阅读311次

    6> CoreAnimation

    • Core Animation是直接作用在CALayer上的,并非UIView。
      Core Animation,中文翻译为核心动画,它是一组非常强大的动画处理API,使用它能做出非常炫丽的动画效果,而且往往是事半功倍。也就是说,使用少量的代码就可以实现非常强大的功能。
      Core Animation可以用在Mac OS X和iOS平台。
      Core Animation的动画执行过程都是在后台操作的,不会阻塞主线程。
      要注意的是,Core Animation是直接作用在CALayer上的,并非UIView。
    • Core Animation结构
    • Core Animation 使用步骤
      如果不是xcode5之后的版本,使用它需要先添加QuartzCore.framework和引入对应的框架<QuartzCore/QuartzCore.h>
      开发步骤:
      1.首先得有CALayer
      2.初始化一个CAAnimation对象,并设置一些动画相关属性
      3.通过调用CALayer的addAnimation:forKey:方法,增加CAAnimation对象到CALayer中,这样就能开始执行动画了
      4.通过调用CALayer的removeAnimationForKey:方法可以停止CALayer中的动画
    • 创建CALayer
    • touchBegin,点击屏幕,做动画
    • 创建动画,添加动画到CALayer
    • 怎样执行动画?执行动画的本质是改变图层的属性。
    • 告诉动画执行怎样的动画?设置动画属性(position)
    • 告诉动画属性怎么改变?设置动画属性值改变 toValue fromValue
    • duration:动画时长
    • 动画有反弹?取消反弹
      1> 执行动画完毕不要移除
      2> 设置动画填充模式,保持最新的位置。
    • rotation:
      三维旋转:transform
      二维旋转:transform.rotation
    • scale
    • 设置图层内容(心)
    • tovalue:@0.5
        //创建动画对象
        CABasicAnimation *anim = [CABasicAnimation animation];
        //设置属性值.
        anim.keyPath = @"transform.rotation";
        anim.toValue = @(M_PI);
        //动画完成时会自动的删除动画.
        //动画完成时要不要删除动画
        anim.removedOnCompletion = NO;
        //让动画始终保存最前面的效果.
        anim.fillMode = @"forwards" 
        //添加动画
        [self.redView.layer addAnimation:anim forKey:nil];
    
    -(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event{
      //添加动画
        CABasicAnimation *anim = [CABasicAnimation animation];
        //设置属性值.
        anim.keyPath = @"transform.scale";
        anim.toValue = @0;
      //想要动画执行多次
        anim.repeatCount = MAXFLOAT;
     //设置动画的执行时长
        anim.duration = 0.5;
      //反转,怎么去的,怎么样回来.
        anim.autoreverses = YES;
    //添加动画
        [self.imageV.layer addAnimation:anim forKey:nil];    
    }
    
        //创建动画对象
        CABasicAnimation *anim = [CABasicAnimation animation];
        //设置属性值.
        anim.keyPath = @"transform.rotation";
        anim.toValue = @(M_PI);
        //动画完成时会自动的删除动画.
        //动画完成时要不要删除动画
        anim.removedOnCompletion = NO;
      //让动画始终保存最前面的效果.
        anim.fillMode = @"forwards";
       //添加动画
        [self.redView.layer addAnimation:anim forKey:nil];
    
    * 总结CABasicAnimation只能在两个值之间做动画,怎么多个值做动画,用CAKeyframeAnimation
    

    7> CAKeyframeAnimation

    • 面向view开发,拖一个view
    • values:能多个值之间做动画,按照顺序做。
      //添加抖动的动画.
        CAKeyframeAnimation *anim = [CAKeyframeAnimation animation];
        //设置属性值.
        anim.keyPath = @"transform.rotation";
        anim.values = @[@(angle2Rad(-5)),@(angle2Rad(5))];
       anim.autoreverses = YES;
       //动画一直重复执行.
        anim.repeatCount = MAXFLOAT;
     anim.duration = 0.5;
     //添加动画
        [self.iconView.layer addAnimation:anim forKey:nil];
    
    • path
       //添加抖动的动画.
        CAKeyframeAnimation *anim = [CAKeyframeAnimation animation];
        //设置属性值.
        anim.keyPath = @"position";
        
      //根据路径做动画
    //    UIBezierPath *path = [UIBezierPath bezierPath];
    //    [path moveToPoint:CGPointMake(50, 50)];
    //    [path addLineToPoint:CGPointMake(200, 400)];
        UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(50, 50, 300, 300)];
        anim.path = path.CGPath;    
    //    anim.autoreverses = YES;
        //动画一直重复执行.
        anim.repeatCount = MAXFLOAT;
      anim.duration = 0.5;
      //添加动画
        [self.iconView.layer addAnimation:anim forKey:nil];
    
    • 动画节奏(timingFunction)

    8> * 图标抖动

    • PPT分析,左边旋转右边旋转 -> keyPath(transform.rotation) -> values -> 有点瘸 -> PPT分析 -> values添加一个值

    9> * CATransition
    过度动画又叫转场动画 -> type(转场类型) -> subtype(方向) -> 动画进度
    注意:转场动画必须和过度代码放在一块,否则没有效果

    static int _i = 1;
       //转场代码必须得要和转场动画在同一个方法当中.,并没有要求他们的上下顺序.
        //转场代码.
        _i++;
        if (_i > 3) {
            _i = 1;
        }
        NSString *imageName = [NSString stringWithFormat:@"%d",_i];
        self.imageV.image = [UIImage imageNamed:imageName];  
        //添加转场动画
        CATransition *anim = [CATransition animation]; 
        anim.duration = 1;
        //动画从哪个点开始.
        anim.startProgress = 0.3;
        //动画从哪个点结束.
        anim.endProgress = 0.5;  
        //转场类型.
        anim.type = @"pageCurl";  
        [self.imageV.layer addAnimation:anim forKey:nil];
    

    10> * CAAnimationGroup
    同时进行多种动画 -> 平移,旋转,缩放 -> 取消反弹

    -(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event{ 
        CAAnimationGroup *animGroup = [CAAnimationGroup animation];
        //animations数组当中存入的都是animation对象
        //平移
        CABasicAnimation *anim = [CABasicAnimation animation];
        anim.keyPath = @"position.y";
        anim.toValue = @(400); 
        //缩放
        CABasicAnimation *anim2 = [CABasicAnimation animation];
        anim2.keyPath = @"transform.scale";
        anim2.toValue = @(0.5);
        //会自动执行数组当中所有的动画对象.
        animGroup.animations = @[anim,anim2];
        //动画完成不要删除动画
        animGroup.removedOnCompletion = NO;
        //始终保持最前面的效果
        animGroup.fillMode = kCAFillModeForwards;
        [self.redView.layer addAnimation:animGroup forKey:nil];   
    }
    

    11> * UIView封装的动画
    单视图

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

    参数说明:
    duration:动画的持续时间
    view:需要进行转场动画的视图
    options:转场动画的类型
    animations:将改变视图属性的代码放在这个block中
    completion:动画结束后,会自动调用这个block
    双视图
    + (void)transitionFromView:(UIView *)fromView toView:(UIView *)toView duration:(NSTimeInterval)duration options:(UIViewAnimationOptions)options completion:(void (^)(BOOL finished))completion;

    参数说明:
    duration:动画的持续时间
    options:转场动画的类型
    animations:将改变视图属性的代码放在这个block中
    completion:动画结束后,会自动调用这个block
    * 什么时候用核心动画,什么时候用UIView动画
    * 核心动画的缺点:都是假象,不能真正改变图层属性的值
    * 展示和真实的位置不同
    * 如果改变位置就用UIView的动画
    * 转场动画就用核心动画
    * 为什么转场用核心动画?因为UIView的转场动画太少。
    * 演示UIView的转场动画
    * touchBegin,切换图片

    相关文章

      网友评论

          本文标题:核心动画二

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