CALayer和核心动画

2016-11-06  本文已影响29人  BigBossZhu

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); 
上一篇 下一篇

猜你喜欢

热点阅读