IOS学习之—— 图层与核心动画

 //***************************************        第七天  图层与核心动画   ****************************************** // 




一、理解图层与UIView的关系
1.UIView能显示在屏幕上，是因为里面有个图层，UIView的DrawRect方法，会将绘制的东西绘在图层上，当要显示的时候，将图层拷贝到屏幕上进行显示

二、CALayer的基本属性
1.尺寸(bounds)
2.背影颜色(backgroundColor)
3.位置(position)
4.边框颜色(borderColor)、边框长度(borderWidth) "配合使用才有效果"
5.圆角(cornerRadius)
6.内容对象(contents) 通常设置图片,
  *如果要显示圆角效果，必须设置图层的masksToBounds为YES,意思是把多余的剪切掉
7.阴影属性
  *阴影颜色(shadowColor)、阴影透明度(shadowOpacity) "要配合使用才有效果"
  *阴影起始位置(shadowOffset)
  *如果图片添加了圆角并设置了剪切掉多余的部分，阴影效果不会出现
  *如果又想图片有圆角效果，又想有阴影，那图片只能是本来就有圆角效果的，不用代码设置


8. transform(CATransform3D)属性
   *缩放CATransform3DMakeScale
   *旋转CGAffineTransformMakeRotation,理解xyz方向的意思
   *平移CATransform3DMakeTranslation
   *熟练transform里的key Paths 如transform.scale transform.rotation transform.translation
   *查看文档，搜索CATransform3D key paths，了解更多key paths属性


三、UIView与CALayer的细节
1.CALayer属于QuartzCore框架 与 CGColor所属于CoreGraphics框架
  QuartzCore框架与CoreGraphics框架都是可跨平台使用，能在iOS和Mac OS X上都能使用
2.UIView比CALayer多了一个事件处理的功能


四、position和anchorPoint
/*目标
 *掌握position和anchorPoint的关系
 */


五、隐式动画
"什么是隐式动画，直接改变属性就会有动画效果"

1.根层与非根层,
  *控件的layer属性是根层
  *控件的layer属性的子层就是非根层

2.非根层有隐式动画,根层是没有隐式动画的

3.隐藏动画怎么禁止
/*
 [CATransaction begin];
 [CATransaction setDisableActions:YES];
 //设置隐式动画动画时间
  self.myview.layer.position = CGPointMake(10, 10);
 [CATransaction commit];
 */

六、自定义图层
1.自定义图层实现【drawInContext:】绘制自己想要的东西到图层
2.如果自定图层，要显示时要调用图层的setNeedsDisplay方法
//只有显示的调用setNeedsDisplay方法才会调用 drawInContext:方法
-(void)drawInContext:(CGContextRef)ctx{
CGContextSetRGBStrokeColor(ctx, 1, 0, 0, 1);
CGContextAddEllipseInRect(ctx, CGRectMake(0, 0, 50, 50));
CGContextFillPath(ctx);



七、核心动画
/*目标：
 *掌握核心动画的类结构
 *
 */
1、CABasicAnimation
①相关属性
*keyPath 动画类型
/*如
 *平移动画: position/transform.translation.x
 *旋转动画: transform.rotation/transform.rotation.x/transform.rotation/rotation.y
 *缩放动画: bounds/transform.scale/transform.scale.x/transform.scale.y
 */
*fromValue 动画开始位置
*toValue 动画结束位置
*byValue 动画增加值

*removedOnCompletion 动画完成后不要删除
*fillMode 保持最新状态
/*
 *默认动画执行后，会恢复到动画之前的状态
 *如果想保存动画之后的状态设置动画的removedOnCompletion＝NO/fillMode＝kCAFillModeForwards
 */


2、CAKeyframeAnimation帧动画
*values 动画轨迹
*timingFunction
*path 动画路径 如果设置了path values被忽略
 /*如添加一个圆的路径
  *
  CGMutablePathRef path = CGPathCreateMutable();
  CGPathAddEllipseInRect(path, NULL, CGRectMake(10, 30, 300, 300));
  animation.path = path;
  CFRelease(path);
  */


"图标抖动案例"
步骤：
1>添加图片到控制器view
2>监听抖动按钮
  //创建帧对话对象
  CAKeyframeAnimation *animation = [CAKeyframeAnimation animation];
  animation.keyPath = @"transform.rotation";
  //旋转浮动度数
  CGFloat angle = M_PI_4 * 0.1;
  //抖动轨迹
  animation.values = @[@(-angle),@(angle),@(-angle)];
  //动画次数
  animation.repeatCount = MAXFLOAT;
  //执行动画
  [self.iconBtn.layer addAnimation:animation forKey:@"shake"];
3>监听停止按钮
  //停止动画
   [self.iconBtn.layer removeAnimationForKey:@"shake"];


3、CATransition(转场动画)
"图片游览器案例"


4、组动画
旋转 + 缩放 + 平移


"车小弟补充案例"
1> 透明度动画 CABasicAnimation * opacity
2> 旋转动画 CABasicAnimation *rotation (transform.rotation)
3> 缩放动画CAKeyframeAnimation *scale ("transform.scale)
if (self.imageView.alpha == 0) {//打开

   self.imageView.alpha = 1;

   //由看不见到看得见 opacity.fromValue = @(0); opacity.toValue = @(1);

   //由-45度到0rotation.fromValue = @(-M_PI_4);  rotation.toValue = @(0);

   //缩放scale.values = @[@(0),@(1.2),@(1)];

}    

//组动画
CAAnimationGroup *group = [CAAnimationGroup animation];
group.animations = @[opacity,rotation,scale];



四、动画总结(了解)
写个Demo 只改变Center属性来演练
1.UIView封闭的动画
/*
[UIView beginAnimations:nil context:nil];
.......写要执行动画的代码
[UIView commitAnimations];*/
2.UIView animateWithDuration静态方法的动画
3.UIView的转场动画transitionWithView:duration:options:animations:completion:
4.图层的动画
图层的动画要想监听动画执行完成，要设置代理，监听animationDidStop方法

CALayer的动画，position未真正改变

5.能用UIView动画尽量用UIView


ios事件有三种
1.触摸事件
  *touchesBegan
  *touchesMoved
  *touchesEnd
  *touchesCancled
  *UITouch 一个手指相关
2.回事计事件
3.远程事件


今天内容

一、触摸事件传递

二、响应者链条 面试题

三、手势识别器
触摸、拖拽。。。。


四、图层
自定义图层



一、理解图层与UIView的关系
1.UIView能显示在屏幕上，是因为里面有个图层，UIView的DrawRect方法，会将绘制的东西绘在图层上，当要显示的时候，将图层拷贝到屏幕上进行显示

二、CALayer的基本属性
1.尺寸(bounds)
2.背影颜色(backgroundColor)
3.位置(position)
4.边框颜色(borderColor)、边框长度(borderWidth) "配合使用才有效果"
5.圆角(cornerRadius)
6.内容对象(contents) 通常设置图片,
  *如果要显示圆角效果，必须设置图层的masksToBounds为YES,意思是把多余的剪切掉
7.阴影属性
  *阴影颜色(shadowColor)、阴影透明度(shadowOpacity) "要配合使用才有效果"
  *阴影起始位置(shadowOffset)
  *如果图片添加了圆角并设置了剪切掉多余的部分，阴影效果不会出现
  *如果又想图片有圆角效果，又想有阴影，那图片只能是本来就有圆角效果的，不用代码设置


8. transform(CATransform3D)属性
   *缩放CATransform3DMakeScale
   *旋转CGAffineTransformMakeRotation,理解xyz方向的意思
   *平移CATransform3DMakeTranslation
   *熟练transform里的key Paths 如transform.scale transform.rotation transform.translation
   *查看文档，搜索CATransform3D key paths，了解更多key paths属性


三、UIView与CALayer的细节
1.CALayer属于QuartzCore框架 与 CGColor所属于CoreGraphics框架
  QuartzCore框架与CoreGraphics框架都是可跨平台使用，能在iOS和Mac OS X上都能使用
2.UIView比CALayer多了一个事件处理的功能


四、position和anchorPoint
/*目标
 *掌握position和anchorPoint的关系
 */


五、隐式动画
"什么是隐式动画，直接改变属性就会有动画效果"

1.根层与非根层,
  *控件的layer属性是根层
  *控件的layer属性的子层就是非根层

2.非根层有隐式动画,根层是没有隐式动画的

3.隐藏动画怎么禁止
/*
 [CATransaction begin];
 [CATransaction setDisableActions:YES];
 //设置隐式动画动画时间
  self.myview.layer.position = CGPointMake(10, 10);
 [CATransaction commit];
 */

六、自定义图层
1.自定义图层实现【drawInContext:】绘制自己想要的东西到图层
2.如果自定图层，要显示时要调用图层的setNeedsDisplay方法
//只有显示的调用setNeedsDisplay方法才会调用 drawInContext:方法
-(void)drawInContext:(CGContextRef)ctx{
CGContextSetRGBStrokeColor(ctx, 1, 0, 0, 1);
CGContextAddEllipseInRect(ctx, CGRectMake(0, 0, 50, 50));
CGContextFillPath(ctx);



七、核心动画
/*目标：
 *掌握核心动画的类结构
 *
 */
1、CABasicAnimation
①相关属性
*keyPath 动画类型
/*如
 *平移动画: position/transform.translation.x
 *旋转动画: transform.rotation/transform.rotation.x/transform.rotation/rotation.y
 *缩放动画: bounds/transform.scale/transform.scale.x/transform.scale.y
 */
*fromValue 动画开始位置
*toValue 动画结束位置
*byValue 动画增加值

*removedOnCompletion 动画完成后不要删除
*fillMode 保持最新状态
/*
 *默认动画执行后，会恢复到动画之前的状态
 *如果想保存动画之后的状态设置动画的removedOnCompletion＝NO/fillMode＝kCAFillModeForwards
 */


2、CAKeyframeAnimation帧动画
*values 动画轨迹
*timingFunction 动画速度
*duration 动画时间
*repeatCount 动画重复次数
//kCAMediaTimingFunctionLinear 线性匀速
//kCAMediaTimingFunctionEaseIn 先慢后快
//kCAMediaTimingFunctionEaseOut 先快后慢
//kCAMediaTimingFunctionEaseInEaseOut 先慢后快再慢、中间快两边慢

*path 动画路径
//如果设置了path values被忽略
/*如添加一个圆的路径
*
CGMutablePathRef path = CGPathCreateMutable();
CGPathAddEllipseInRect(path, NULL, CGRectMake(10, 30, 300, 300));
animation.path = path;
CFRelease(path);
*/


"图标抖动案例"
步骤：
1>添加图片到控制器view
2>监听抖动按钮
  //创建帧对话对象
  CAKeyframeAnimation *animation = [CAKeyframeAnimation animation];
  animation.keyPath = @"transform.rotation";
  //旋转浮动度数
  CGFloat angle = M_PI_4 * 0.1;
  //抖动轨迹
  animation.values = @[@(-angle),@(angle),@(-angle)];
  //动画次数
  animation.repeatCount = MAXFLOAT;
  //执行动画
  [self.iconBtn.layer addAnimation:animation forKey:@"shake"];
3>监听停止按钮
  //停止动画
   [self.iconBtn.layer removeAnimationForKey:@"shake"];


3、CATransition(转场动画)

使用步骤
①创建CATransition对象
②设置type
/**
 *******************************************************
 type:动画类型(比如：滴水效果，翻转效果...)
 -------------------------------------------------------
 fade kCATransitionFade 交叉淡化过渡
 moveIn kCATransitionMoveIn 新视图移到旧视图上面
 push kCATransitionPush 新视图把旧视图推出去
 reveal kCATransitionReveal 将旧视图移开,显示下面的新视图
 pageCurl               向上翻一页
 pageUnCurl             向下翻一页
 rippleEffect             滴水效果
 suckEffect 收缩效果，如一块布被抽走
 cube                   立方体效果
 oglFlip              上下左右翻转效果
 rotate     旋转效果
 cameraIrisHollowClose 相机镜头关上效果(不支持过渡方向)
 cameraIrisHollowOpen 相机镜头打开效果(不支持过渡方向)

 ********************************************************/
③设置子类型subtype
/**
 *******************************************************
 subtype: 动画方向(比如说是从左边进入，还是从右边进入...)
 ------------------------------------------------------
 kCATransitionFromRight;
 kCATransitionFromLeft;
 kCATransitionFromTop;
 kCATransitionFromBottom;

 当 type 为@"rotate"(旋转)的时候,它也有几个对应的 subtype,分别为:
 90cw 逆时针旋转 90°
 90ccw 顺时针旋转 90°
 180cw 逆时针旋转 180°
 180ccw  顺时针旋转 180°
 **/



4、组动画
旋转 + 缩放 + 平移
组动画的使用步骤
//1.创建组动画
CAAnimationGroup *group = [CAAnimationGroup animation];
//2.设置动画数组[平移动画、旋转动画]
group.animations = @[transAni,rotationAni,scaleAni];
//3.添加动画
[self.imageView.layer addAnimation:group forKey:nil];


"车小弟补充案例"
1> 透明度动画 CABasicAnimation * opacity
2> 旋转动画 CABasicAnimation *rotation (transform.rotation)
3> 缩放动画CAKeyframeAnimation *scale ("transform.scale)
if (self.imageView.alpha == 0) {//打开
   self.imageView.alpha = 1;

   //由看不见到看得见 opacity.fromValue = @(0); opacity.toValue = @(1);

   //由-45度到0rotation.fromValue = @(-M_PI_4);  rotation.toValue = @(0);

   //缩放scale.values = @[@(0),@(1.2),@(1)];

}
//组动画
CAAnimationGroup *group = [CAAnimationGroup animation];
group.animations = @[opacity,rotation,scale];


"底部旋转菜单案例"




八、动画总结(了解)
1.UIView封闭的动画
/*
[UIView beginAnimations:nil context:nil];
.......写要执行动画的代码
[UIView commitAnimations];*/
2.UIView animateWithDuration静态方法的动画
3.UIView的转场动画transitionWithView:duration:options:animations:completion:
4.图层的动画 如果要监听动画执行完成，要设置代理，监听animationDidStop方法
5.CALayer的动画，position未真正改变
6.能用UIView动画尽量用UIView

CALayer
在iOS中，你能看得见摸得着的东西基本上都是UIView，比如一个按钮、一个文本标签、一个文本输入框、一个图标等等，这些都是UIView

其实UIView之所以能显示在屏幕上，完全是因为它内部的一个图层

在创建UIView对象时，UIView内部会自动创建一个图层(即CALayer对象)，通过UIView的layer属性可以访问这个层
@property(nonatomic,readonly,retain) CALayer *layer; 

当UIView需要显示到屏幕上时，会调用drawRect:方法进行绘图，并且会将所有内容绘制在自己的图层上，绘图完毕后，系统会将图层拷贝到屏幕上，于是就完成了UIView的显示

 换句话说，UIView本身不具备显示的功能，是它内部的层才有显示功能

通过操作CALayer对象，可以很方便地调整UIView的一些外观属性，比如：
阴影
圆角大小
边框宽度和颜色
… …

还可以给图层添加动画，来实现一些比较炫酷的效果

宽度和高度
@property CGRect bounds;

位置(默认指中点，具体由anchorPoint决定)
@property CGPoint position;

锚点(x,y的范围都是0-1)，决定了position的含义
@property CGPoint anchorPoint;

背景颜色(CGColorRef类型)
@property CGColorRef backgroundColor;

形变属性
@property CATransform3D transform;
边框颜色(CGColorRef类型)
@property CGColorRef borderColor;

边框宽度
@property CGFloat borderWidth;

圆角半径
@property GCFloat cornerRadius;

内容(比如设置为图片CGImageRef)
@property(retain) id contents;
首先
CALayer是定义在QuartzCore框架中的
CGImageRef、CGColorRef两种数据类型是定义在CoreGraphics框架中的
UIColor、UIImage是定义在UIKit框架中的

其次
QuartzCore框架和CoreGraphics框架是可以跨平台使用的，在iOS和Mac OS X上都能使用
但是UIKit只能在iOS中使用

为了保证可移植性，QuartzCore不能使用UIImage、UIColor，只能使用CGImageRef、CGColorRef

通过CALayer，就能做出跟UIImageView一样的界面效果

既然CALayer和UIView都能实现相同的显示效果，那究竟该选择谁好呢？
其实，对比CALayer，UIView多了一个事件处理的功能。也就是说，CALayer不能处理用户的触摸事件，而UIView可以
所以，如果显示出来的东西需要跟用户进行交互的话，用UIView；如果不需要跟用户进行交互，用UIView或者CALayer都可以
当然，CALayer的性能会高一些，因为它少了事件处理的功能，更加轻量级

position和anchorPoint

CALayer有2个非常重要的属性：position和anchorPoint

@property CGPoint position;
用来设置CALayer在父层中的位置
以父层的左上角为原点(0, 0)

@property CGPoint anchorPoint;
称为“定位点”、“锚点”
决定着CALayer身上的哪个点会在position属性所指的位置
以自己的左上角为原点(0, 0)
它的x、y取值范围都是0~1，默认值为（0.5, 0.5）

隐式动画

每一个UIView内部都默认关联着一个CALayer，我们可用称这个Layer为Root Layer（根层）

所有的非Root Layer，也就是手动创建的CALayer对象，都存在着隐式动画

什么是隐式动画？
当对非Root Layer的部分属性进行修改时，默认会自动产生一些动画效果
而这些属性称为Animatable Properties(可动画属性)

列举几个常见的Animatable Properties：
bounds：用于设置CALayer的宽度和高度。修改这个属性会产生缩放动画
backgroundColor：用于设置CALayer的背景色。修改这个属性会产生背景色的渐变动画
position：用于设置CALayer的位置。修改这个属性会产生平移动画

可以通过动画事务(CATransaction)关闭默认的隐式动画效果
[CATransaction begin];
[CATransaction setDisableActions:YES];
self.myview.layer.position = CGPointMake(10, 10);
[CATransaction commit];