美文网首页
CALayer和核心动画

CALayer和核心动画

作者: BigBossZhu | 来源:发表于2016-11-06 14:37 被阅读29次

    CALayer和核心动画

    CALayer和UIView(CA框架)

    1. CALayer是View内的图层,现实图案等内容其实在这里面.(效率更快,不耗CUP)
    2. UIView只负责监听和点击事件

    CALayer的基本属性

    首先CA开头的类,是属于CG框架,UI属性都要进行类型转换.

    1. position和bounds(图层建议使用bounds,不使用frame)位置和大小
    2. contents内容(可显示图片,注意类型转换为.CGImage.

    redView.layer.contents = (__bridge id _Nullable)([UIImage imageNamed:@"CALayer2"].CGImage);

    1. backgroundColor背景色
    2. border边框(边框颜色borderColor,边框宽度borderWidth)
    3. shadow阴影,四个属(shadowColor阴影颜色,shadowOffset阴影偏移量,shadowRadius高斯半径)一起出现才能显示,且阴影不透明度(shadowOpacity)要为1(默认为0).
    4. ** cornerRadius (边角弧度), maskToBounds 是否裁剪成对存在**
    5. ** opacity ** 不透明度
    6. ** transform **仿射变换

    只有layer下核心动画是假象,位置不发生改变.layer的transform位置也是发生改变的.

    单独创建Layer显示

    Layer特点:自带隐式动画,跟Layer除外,但可以手动关闭:

    1. 开始事物
    2. 设置行为不实现
    3. 写你要实现的动画
    4. 提交事务
     //开启事物
    // [CATransaction begin];
     //设置事物为不实现行为
    // [CATransaction setDisableActions:YES];
     self.layer.position = CGPointMake(100, 400);
     //提交事物
    // [CATransaction commit];```
    
    
    
    1. 创建CALayer对象.
    2. 设置Layer对象的属性(使我们能看见)
    3. 添加到父Layer中
    ``` [self.view.layer addSublayer:layer]; ```
    
    #### transform属性(仿射变换)
    

    //旋转(3D),理解3d旋转 ,在Z轴上旋转常见,常用)
    self.layer.transform = CATransform3DRotate(self.layer.transform, M_PI_2, 0, 0, 1);
    //缩放(只能在x,y轴缩放,因为Z轴平移缩放视觉无法发现)
    self.layer.transform = CATransform3DScale(self.layer.transform, 0.8, 0.8, 1);
    //平移(只能在x,y轴缩放,因为Z轴平移缩放视觉无法发现)
    self.layer.transform = CATransform3DTranslate(self.layer.transform, 10, 10, 0);

    
    #### Layer时钟动画
    知识点1:anchorPoint锚点和position位置,之间的关系
    anchorPoint锚点(定点),范围(0~1)决定Layer以锚点比例存在的位置,0,0在左下,默认在中心,0.5,0.5.
    
    
    知识点2:CADisplayLink刷帧定时器,每秒刷新频率60次.
    

    CABasicAnimation *basic = [CABasicAnimation animationWithKeyPath:@"position"];
    KeyPath参数transform.rotation 就是旋转关键字

    CADisplayLink *link = [CADisplayLink displayLinkWithTarget:self selector:@selector(move)];
    [link addToRunLoop:[NSRunLoop mainRunLoop] forMode:NSDefaultRunLoopMode];

    
    知识点3:根据日历显示当前时间
    1. 获取时间对象(NSDate)
    2. 获取当前日历对象( NSCalendar )
    3. 根据日历获取当前秒数
    >  NSInteger second = [calender component:NSCalendarUnitSecond fromDate:date]; 
    
    
    1. 通过图层显示时针
    2. 裁剪
    3. 制作秒针(修改锚点位置)
    4. 设置刷帧定时器(调用方法)
    5. 方法内实现秒针,旋转.
    
    Layer的核心动画(真实位置不发生改变).
    
    动画设置代理(隐式代理,不用遵守代理协议,这个协议作为代理的分类了)
    
     > CABasicAnimation 基本动画,可以实现平移翻转,缩放的动画
    
     > CAKeyframeAnimation 关键帧动画,通过帧的形式播放动画,可以有多个点 values属性
    
     > CAAnimationGroup 组动画,内部可以有多个动画为一组播放.animations 属性
    
    >   CATransition 转场动画
    动画的不返回属性
    basic.removedOnCompletion = NO;
    basic.fillMode = 
    
    1. 转场动画需要手势storyBoard拖入轻扫手势.(需要几个拖几个手势对象),加入到View的手势中
    2. 判断手势方向,显示图片内容
    3. 创建转场动画
    
     > //设置属性 
     transition.type = kCATransitionFade;//转场方式
     transition.subtype = kCATransitionFromRight;那个方向显示转场方式.
    4. 加入到图层Layer中
    
    #### 小画板案例
    1. 搭建界面
    2. 先画单线
             1. touchBegin取出起始点,绘制路径,保存路径(属性接收touchMove中要用)
             2. touchMove中添加线条.重绘
             3. drawRect系统方法中渲染.
    3. 画多线:思路,多线就需要保存多组路径,且首尾不想连.所以需要路径数组
             1. 创建路径可变数组(记住实例化,可懒加载,也可awakeNIb中写.
             2. 将起始点路径加入到这个数组中(touchBegin),根绝这个路径添加线
             3. 改变单条路径渲染为遍历数组渲染.
    3. 改变线的颜色,粗细
             1. 同过slider的的值传递到View中(属性),更改线粗为属性值
             2. 传递点击按钮的背景颜色到内部.内部定以UIColor属性,但是UIBezier内没有线的颜色属性(怎么给这个路径对象这个属性呢??直接创建一个类继承UIBezier,我们在内部给他定义这个UIColor属性,更改路径为你自定义的这个类,给他UIColor属性设置为外界传进来的颜色),给你的每个路径设置颜色.
    4. 实现各个按钮的点击事件(记住原则控制器不关心内部实现,自己的事情自己做,他只负责调用方法.
              1. 清除按钮清除集合中的路径
              2. 返回:清除上一个元素
              3. 擦除:用画板的背景色在绘制这个颜色覆盖原来的颜色
              4. 保存图片
                      - 开启图片上下文 UIGraphicsBeginImageContextWithOptions(self.myPaintView.bounds.size, NO, 0); 
                      - 获取当前上下文,因为截屏需要获取上下文(整个就不用了) CGContextRef ctx = UIGraphicsGetCurrentContext(); 
                      - 截图 [self.myPaintView.layer renderInContext:ctx]; 
                      - 获取截图 UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext(); 
                      - 关闭上下文 UIGraphicsEndImageContext(); 
                      - 保存到相册 UIImageWriteToSavedPhotosAlbum(newImage, nil, nil, nil); 
    

    相关文章

      网友评论

          本文标题:CALayer和核心动画

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